Jump to content

Персонализация фона форума

Featured Replies

Posted
comment_18856

Здравствуйте, Можно как нибудь из стиля Uniform для IP.Board 3.3.x отдельно взять функцию смены фона и сделать её на стиле Velvet?

3851991.jpg

comment_18865

Вообще можно.

Если никто не ответит, завтра вечером напишу по этому поводу.

comment_18915

1) Изображения из папки back кидаем в папку с изображениями стиля

2) Папку js кидаем в папку с изображениями стиля

3) Создаём новый css с названием: custom_backgrounds и добавляем в него:

body.bg1{ background-color: #000; background-image: url('{style_images_url}/background1.jpg'); background-repeat: no-repeat; }
body.bg2{ background-color: #000; background-image: url('{style_images_url}/background2.jpg'); background-repeat: no-repeat; }
body.bg3{ background-color: #000; background-image: url('{style_images_url}/background3.jpg'); background-repeat: no-repeat; }
body.bg4{ background-color: #000; background-image: url('{style_images_url}/background4.jpg'); background-repeat: no-repeat;}
body.bg5{ background-color: #000; background-image: url('{style_images_url}/background5.jpg'); background-repeat: no-repeat;}
body.bg6{ background-color: #000; background-image: url('{style_images_url}/background6.jpg'); background-repeat: no-repeat; }
body.bg_custom{ background-color: #fff; }

4) В самый низ ipb_styles.css добавляем:

#nav_background{
	/*cursor: pointer;
	padding: 0 2px;*/
	float: right;
	margin-top: 7px;
	list-style: none;
	padding-left: 2px;
}

#custom_background span{
	display: block;
	float: left;
	width: 145px;
	height: 90px;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
	-webkit-box-shadow: inset rgba(0,0,0,1) 0px 1px 7px, rgba(255,255,255,0.05) 0px 1px 0px, rgba(255,255,255,0.35) 0px 0px 1px;
	-moz-box-shadow: inset rgba(0,0,0,1) 0px 1px 7px, rgba(255,255,255,0.05) 0px 1px 0px, rgba(255,255,255,0.35) 0px 0px 1px;
	box-shadow: inset rgba(0,0,0,1) 0px 1px 7px, rgba(255,255,255,0.05) 0px 1px 0px, rgba(255,255,255,0.35) 0px 0px 1px;
	margin-right: 15px;
	cursor: pointer;
	background: #000 no-repeat 50% 50%;
	-moz-transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
}

#custom_background span:hover{
	-webkit-box-shadow: inset rgba(0,0,0,1) 0px 1px 2px, rgba(255,255,255,0.05) 0px 1px 0px, rgba(255,255,255,0.35) 0px 0px 1px;
	-moz-box-shadow: inset rgba(0,0,0,1) 0px 1px 2px, rgba(255,255,255,0.05) 0px 1px 0px, rgba(255,255,255,0.35) 0px 0px 1px;
	box-shadow: inset rgba(0,0,0,1) 0px 1px 2px, rgba(255,255,255,0.05) 0px 1px 0px, rgba(255,255,255,0.35) 0px 0px 1px;
}

#custom_url{
	clear: left;
	padding-top: 10px;
	text-align: center;
}

#custom_input{
	background: url("{style_images_url}/trans50.png") repeat;
	background: rgba(0,0,0,0.5);
	border: 0;
	-webkit-box-shadow: inset rgba(0,0,0,0.75) 0px 1px 3px, rgba(255,255,255,0.15) 0px 1px 0px;
	-moz-box-shadow: inset rgba(0,0,0,0.75) 0px 1px 3px, rgba(255,255,255,0.15) 0px 1px 0px;
	box-shadow: inset rgba(0,0,0,0.75) 0px 1px 3px, rgba(255,255,255,0.15) 0px 1px 0px;
	padding: 0 10px;
	font-size: 20px;
	line-height: 40px;
	height: 40px;
	width: 780px;
	color: #fff;
	white-space: nowrap;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	margin-right: 8px;
}

#custom_submit{
	line-height: 40px;
	font-size: 20px;
	display: inline-block;
	font-weight: normal;
	color: #fff;
	cursor: pointer;
	background: #686c73 url("{style_images_url}/highlight.png") repeat-x 0 0;
	text-shadow: #4c5057 0px -1px 0px;
	-webkit-box-shadow: rgba(0,0,0,0.6) 0px 1px 3px;
	-moz-box-shadow: rgba(0,0,0,0.6) 0px 1px 3px;
	box-shadow: rgba(0,0,0,0.6) 0px 1px 3px;
	padding: 0 10px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

#custom_submit:hover{
	background-color: #898f96;

}

#toggle_background{
	display: none;
}

#custom_background {
	color: #fff;
	background: #fff url("{style_images_url}/slide_bg.jpg") repeat;
	position: relative;
	padding: 15px;
	-webkit-box-shadow: inset rgba(0,0,0,0.8) 0px 0px 10px;
	-moz-box-shadow: inset rgba(0,0,0,0.8) 0px 0px 10px;
	box-shadow: inset rgba(0,0,0,0.8) 0px 0px 10px;
}

#custom_background{
	padding-right: 0;
	overflow: hidden;
}

 

5) Редактируем globalTemplate

Найти:

{parse template="includeJS" group="global" params="$jsModules"}

 

Добавить выше:

<script type='text/javascript'>!window.jQuery && document.write('<script src="{style_images_url}/js/jquery.min.js"></script>')</script>
		<script type='text/javascript' src="{style_images_url}/js/cookie.js"></script>
		<script type='text/javascript' src="{style_images_url}/js/ipbforumskins.js"></script>

 

Найти:

<body id='ipboard_body'>

 

Заменить на:

<body data-customBackground='enabled' id='ipboard_body'>

 

Найти:

<if test="canSearch:|:$this->memberData['g_use_search']">
						{parse template="quickSearch" group="global" params=""}
					</if>

 

Ниже добавить:

<li id='nav_background' data-tooltip="Change background image"><a href="#"><img src='{style_images_url}/nav_background.png' alt='' /></a></li> 
<div id='toggle_background'><div id='custom_background'>
						<span id='bg1' style='background-image: url({style_images_url}/background1_thumb.jpg);'></span>
						<span id='bg6' style='background-image: url({style_images_url}/background6_thumb.jpg);'></span>
						<span id='bg5' style='background-image: url({style_images_url}/background5_thumb.jpg);'></span>
						<span id='bg2' style='background-image: url({style_images_url}/background2_thumb.jpg);'></span>
						<span id='bg3' style='background-image: url({style_images_url}/background3_thumb.jpg);'></span>
						<span id='bg4' style='background-image: url({style_images_url}/background4_thumb.jpg);'></span>
						<div id='custom_url'><input type='text' id='custom_input' placeholder="ИЛИ введите URL своего бэкграунда и нажмите Изменить" /><strong id='custom_submit'>Изменить</strong></div>
					</div></div><br />

 

Вроде всё :)

js.rar

backs.rar

  • Author
comment_18965

Привет, Respected спасибо огромное что помог! у меня к тебе один вопрос, на форуме не отображается картинка на которую нужно нажать чтоб выдвинулась окно окно где вводить url, но если удалить параметр <div id='toggle_background'> то он показывает окно где в водить url, по какой причини он может не отображать? 

2566372.jpg

comment_18969

Всё таки забыл указать один код. Где нужна кнопка, добавить:

<li id='nav_background' data-tooltip="Change background image"><a href="#"><img src='{style_images_url}/nav_background.png' alt='' /></a></li>	
  • Author
comment_18976

Теперь всё работает норм) только когда нажимаешь на кнопку то выдвигается менюшка где можно ввести url, но она также быстро сома убирается назад)

В чём причина?)

  • Author
comment_19071

С этой проблемой разобрался, я нечаянно подключил 2 раза <script type='text/javascript' src="{style_images_url}/js/ipbforumskins.js"></script> =)
а вот как сделать чтобы картинку которую поставили по url растягивалась на весь экран?

которые стандартные на выбор давались я проста в настройках сайта поставил параметр "fixed"

comment_19080

За кастомный бэкграунд отвечает css: body.bg_custom{ background-color: #fff; }

  • 3 years later...
comment_106057
В 19.01.2013 в 11:47, Respected сказал:

За кастомный бэкграунд отвечает css: body.bg_custom{ background-color: #fff; }

Спасибо большое за инструкцию! Можешь перезалить архив  js.rar, пожалуйста?

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.


Guest
Ответить в этой теме...

Последние посетители 0

  • No registered users viewing this page.