Jump to content

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

lyamon4ik
 Share

Recommended Posts

lyamon4ik Rookie

lyamon4ik

Posted
Posted

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

3851991.jpg

Link to comment
Share on other sites
_Dark_ Veteran

_Dark_

Posted
Posted

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

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

Link to comment
Share on other sites
Respected Mafia soldier

Respected

Posted
Posted

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

Link to comment
Share on other sites
lyamon4ik Rookie

lyamon4ik

Posted
  • Author
Posted

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

2566372.jpg

Link to comment
Share on other sites
Respected Mafia soldier

Respected

Posted
Posted

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

<li id='nav_background' data-tooltip="Change background image"><a href="#"><img src='{style_images_url}/nav_background.png' alt='' /></a></li>
Link to comment
Share on other sites
lyamon4ik Rookie

lyamon4ik

Posted
  • Author
Posted

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

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

Link to comment
Share on other sites
lyamon4ik Rookie

lyamon4ik

Posted
  • Author
Posted

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

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

Link to comment
Share on other sites
  • 3 years later...
benix Proficient

benix

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

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

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

Link to comment
Share on other sites

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
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

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

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...