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

Posted 16 января, 201311 yr

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

Цитата

Link to comment

https://ipbmafia.ru/topic/2784-personalizaciya-fona-foruma/

Share on other sites

16 января, 201311 yr

comment_18865

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

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

Цитата

lyamon4ik
1

Link to comment

https://ipbmafia.ru/topic/2784-personalizaciya-fona-foruma/?&do=findComment&comment=18865

Share on other sites

16 января, 201311 yr

Author

comment_18876

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

Цитата

Link to comment

https://ipbmafia.ru/topic/2784-personalizaciya-fona-foruma/?&do=findComment&comment=18876

Share on other sites

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

Цитата

benix, lyamon4ik, Ded2 and 1 other
4

Link to comment

https://ipbmafia.ru/topic/2784-personalizaciya-fona-foruma/?&do=findComment&comment=18915

Share on other sites

18 января, 201311 yr

Author

comment_18965

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

Цитата

Link to comment

https://ipbmafia.ru/topic/2784-personalizaciya-fona-foruma/?&do=findComment&comment=18965

Share on other sites

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

Link to comment

https://ipbmafia.ru/topic/2784-personalizaciya-fona-foruma/?&do=findComment&comment=18969

Share on other sites

18 января, 201311 yr

Author

comment_18976

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

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

Цитата

Link to comment

https://ipbmafia.ru/topic/2784-personalizaciya-fona-foruma/?&do=findComment&comment=18976

Share on other sites

19 января, 201311 yr

Author

comment_19071

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

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

Цитата

Link to comment

https://ipbmafia.ru/topic/2784-personalizaciya-fona-foruma/?&do=findComment&comment=19071

Share on other sites

19 января, 201311 yr

comment_19080

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

Цитата

lyamon4ik and benix
2

Link to comment

https://ipbmafia.ru/topic/2784-personalizaciya-fona-foruma/?&do=findComment&comment=19080

Share on other sites

28 апреля, 20168 yr

comment_106057

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

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

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

Цитата

Link to comment

https://ipbmafia.ru/topic/2784-personalizaciya-fona-foruma/?&do=findComment&comment=106057

Share on other sites

28 апреля, 20168 yr

comment_106065

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

Цитата

Link to comment

https://ipbmafia.ru/topic/2784-personalizaciya-fona-foruma/?&do=findComment&comment=106065

Sign In

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

Featured Replies

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

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

Account

Navigation

Messages

Уведомления

Search