Перейти к содержанию

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

lyamon4ik
 Поделиться

Рекомендуемые сообщения

lyamon4ik Новичок

lyamon4ik

Опубликовано
Опубликовано

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

3851991.jpg

Ссылка на комментарий
Поделиться на другие сайты
_Dark_ Ветеран

_Dark_

Опубликовано
Опубликовано

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

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

Ссылка на комментарий
Поделиться на другие сайты
Respected Солдат мафии

Respected

Опубликовано
Опубликовано

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 Новичок

lyamon4ik

Опубликовано
  • Автор
Опубликовано

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

2566372.jpg

Ссылка на комментарий
Поделиться на другие сайты
Respected Солдат мафии

Respected

Опубликовано
Опубликовано

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

<li id='nav_background' data-tooltip="Change background image"><a href="#"><img src='{style_images_url}/nav_background.png' alt='' /></a></li>
Ссылка на комментарий
Поделиться на другие сайты
lyamon4ik Новичок

lyamon4ik

Опубликовано
  • Автор
Опубликовано

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

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

Ссылка на комментарий
Поделиться на другие сайты
lyamon4ik Новичок

lyamon4ik

Опубликовано
  • Автор
Опубликовано

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

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

Ссылка на комментарий
Поделиться на другие сайты
Respected Солдат мафии

Respected

Опубликовано
Опубликовано

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

Ссылка на комментарий
Поделиться на другие сайты
  • 3 года спустя...
benix Специалист

benix

Опубликовано
Опубликовано
В 19.01.2013 в 11:47, Respected сказал:

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

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

Ссылка на комментарий
Поделиться на другие сайты
benix Специалист

benix

Опубликовано
Опубликовано

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

Ссылка на комментарий
Поделиться на другие сайты

Присоединяйтесь к обсуждению

Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.
Примечание: Ваш пост будет проверен модератором, прежде чем станет видимым.

Гость
Ответить в этой теме...

×   Вставлено с форматированием.   Вставить как обычный текст

  Разрешено использовать не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отображать как обычную ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставлять изображения напрямую. Загружайте или вставляйте изображения по ссылке.

×
 Поделиться
Перейти к списку тем

  • Последние посетители   0 пользователей онлайн

    • Ни одного зарегистрированного пользователя не просматривает данную страницу
×
×
  • Создать...