lyamon4ik Posted January 16, 2013 Report Share Posted January 16, 2013 Здравствуйте, Можно как нибудь из стиля Uniform для IP.Board 3.3.x отдельно взять функцию смены фона и сделать её на стиле Velvet? Quote Link to comment Share on other sites More sharing options...
_Dark_ Posted January 16, 2013 Report Share Posted January 16, 2013 Вообще можно. Если никто не ответит, завтра вечером напишу по этому поводу. lyamon4ik 1 Quote Link to comment Share on other sites More sharing options...
lyamon4ik Posted January 16, 2013 Author Report Share Posted January 16, 2013 Спасибо огромное!!! Буду ждать! Quote Link to comment Share on other sites More sharing options...
Respected Posted January 17, 2013 Report Share Posted January 17, 2013 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 Ded2, lyamon4ik, benix and 1 other 4 Quote Link to comment Share on other sites More sharing options...
lyamon4ik Posted January 18, 2013 Author Report Share Posted January 18, 2013 Привет, Respected спасибо огромное что помог! у меня к тебе один вопрос, на форуме не отображается картинка на которую нужно нажать чтоб выдвинулась окно окно где вводить url, но если удалить параметр <div id='toggle_background'> то он показывает окно где в водить url, по какой причини он может не отображать? Quote Link to comment Share on other sites More sharing options...
Respected Posted January 18, 2013 Report Share Posted January 18, 2013 Всё таки забыл указать один код. Где нужна кнопка, добавить: <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 Quote Link to comment Share on other sites More sharing options...
lyamon4ik Posted January 18, 2013 Author Report Share Posted January 18, 2013 Теперь всё работает норм) только когда нажимаешь на кнопку то выдвигается менюшка где можно ввести url, но она также быстро сома убирается назад) В чём причина?) Quote Link to comment Share on other sites More sharing options...
lyamon4ik Posted January 19, 2013 Author Report Share Posted January 19, 2013 С этой проблемой разобрался, я нечаянно подключил 2 раза <script type='text/javascript' src="{style_images_url}/js/ipbforumskins.js"></script> =) а вот как сделать чтобы картинку которую поставили по url растягивалась на весь экран? которые стандартные на выбор давались я проста в настройках сайта поставил параметр "fixed" Quote Link to comment Share on other sites More sharing options...
Respected Posted January 19, 2013 Report Share Posted January 19, 2013 За кастомный бэкграунд отвечает css: body.bg_custom{ background-color: #fff; } lyamon4ik and benix 2 Quote Link to comment Share on other sites More sharing options...
benix Posted April 28, 2016 Report Share Posted April 28, 2016 В 19.01.2013 в 11:47, Respected сказал: За кастомный бэкграунд отвечает css: body.bg_custom{ background-color: #fff; } Спасибо большое за инструкцию! Можешь перезалить архив js.rar, пожалуйста? Quote Link to comment Share on other sites More sharing options...
benix Posted April 28, 2016 Report Share Posted April 28, 2016 И еще вопрос, можно ли добавить в качестве фона картинку персонализацию пользователя? Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.