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

Posted 16 января, 201311 yr

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

Цитата

16 января, 201311 yr

comment_18865

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

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

Цитата

lyamon4ik
1

16 января, 201311 yr

Author

comment_18876

Спасибо огромное!!! Буду ждать!

Цитата

17 января, 201311 yr

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

Цитата

Юрьевич, lyamon4ik, benix and 1 other
4

18 января, 201311 yr

Author

comment_18965

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

Цитата

18 января, 201311 yr

comment_18969

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

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

Цитата

lyamon4ik and benix
2

18 января, 201311 yr

Author

comment_18976

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

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

Цитата

19 января, 201311 yr

Author

comment_19071

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

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

Цитата

19 января, 201311 yr

comment_19080

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

Цитата

benix and lyamon4ik
2

28 апреля, 20168 yr

comment_106057

В 19.01.2013 в 11:47, Respected сказал:

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

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

Цитата

28 апреля, 20168 yr

comment_106065

И еще вопрос, можно ли добавить в качестве фона картинку персонализацию пользователя?

Цитата

Sign In

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

Featured Replies

Join the conversation

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

Account

Navigation

Messages

Уведомления

Search