Выбор фона для uCoz

Выбор фона для uCoz

02015-11-17442220Денис Абдуллин

Большинство сайтов используют изображение для заднего фона своего проекта. А что если дать возможность самому менять фон сайта из нескольких вариантов, которые ему можно предоставить? С этим скриптом пользователь на вашем сайте сможет поменять фон сайта, с запоминанием на cookie. Данный скрипт позволит пользователю поменять фон сайта на любой из предложенных, а браузер запомнит этот фон.

Установка

1. Создайте папку "background" в файловом менеджере и загрузите туда все файлы из папки background в архиве, который вы скачаете по ссылке ниже. В нем находятся изображения, которые будут предоставлены для выбора.

2. Вставьте этот код в то место, где хотите мы, будет отображать кнопку изменения фона (Лично я поставил в верхнюю часть сайта):

Код
<script src="/background/cookie.js"></script>  
<div class="ff_fon">  
<a href="#" class="drox"><img alt="fon" title="Сменить фон сайта" src="/background/ico_panel.png"></a>  
<div class="ff_cell_ff">  
<span class="ff_ugol_ff"></span>  
<div class="ff_content_en">  
<a href="#"><img id="jp1" src="/background/1.jpg" width="20px" /></a>  
<a href="#"><img id="jp2" src="/background/2.jpg" width="20px" /></a>  
<a href="#"><img id="jp3" src="/background/3.jpg" width="20px" /></a>  
<a href="#"><img id="jp4" src="/background/4.jpg" width="20px" /></a>  
<a href="#"><img id="jp5" src="/background/5.jpg" width="20px" /></a>  
<a href="#"><img id="jp6" src="/background/6.jpg" width="20px" /></a>  
<a href="#"><img id="jp7" src="/background/7.jpg" width="20px" /></a>  
<a href="#"><img id="jp8" src="/background/8.jpg" width="20px" /></a>  
<a href="#"><img id="jp9" src="/background/9.jpg" width="20px" /></a>  
</div>  
</div>  
</div>  
<script src="/background/cok.js"></script>

3. Основную часть установки мы завершили. Теперь давайте пропишем необходимые нам стили и вставим их в самый низ Таблицы стилей (CSS):

Код
.ff_fon {
float:right;
display:block;
position:relative;
}

.ff_fon .drox {
padding: 0px 7px;
}  

.ff_cell_ff, .ff_ugol_ff {
width:35px;
}  

.ff_cell_ff {
left:-999em;
z-index:998;
position:absolute;
margin: 0 -2px 0 auto;
}

.ff_content_en {
margin:0;
width:35px;
text-align:center;
overflow:hidden;
background:#333;
}  

.ff_content_en a:link, .ff_content_en a:visited {
float:left;
width:35px;
padding: 5px 0px 3px 0px;
border-bottom: 1px solid #888;
}

.ff_content_en a:hover {
background:#5f5f5f;
}

.no_bb:link, .no_bb:visited {
border-bottom:none!important;
}

.ff_fon:hover .ff_cell_ff{
top:27px;
right:0;
left:auto;
}

.ff_ugol_ff {
height:7px;
top: -7px;
position:absolute;
background:url(/fon/ugolok.png) no-repeat center bottom;
}

Чтобы изменить список предлагаемых фонов для пользователей, то замените изображения 1, 2, 3, 4... на свои. После этого можно считать нашу установку завершенной. Ваши пользователи теперь получат возможность изменять фон сайта, который им больше понравятся.


Создать сайт в uKit Нужен классный сайт для бизнеса?
Воспользуйтесь сервисом uKit. Никакого кода!
Комментарии (20)
Deniss Lvov 2015-11-17 в 11:46Спам
О, спасибо
0
Сергей Александрович 2015-11-17 в 13:53
ггг рад был подредактировать
1
Sargis Kirakosyan 2015-11-18 в 20:09Спам
Здравствуйте. Я попытался использовать этот скрипт для изменения заднего цвета меню. Скрипт изменил цвет но при переходе на другую страницу цвет возвращается на старую. Я все установил правильно. Вы можете мне помочь?
0
Сергей Александрович 2015-11-19 в 14:14
Увы не я автор и со скриптами я не дружу. Обращайтесь на форум.
0
Денис Абдуллин 2015-11-19 в 16:50
Надо было скрипт проверять вообще-то.
0
Сергей Александрович 2015-11-20 в 01:39
Я проверял вообще то он рабочий. А то что из него уже делают модификацию для другой цели то тут я уже не помощник.
0
Николай Скиданенко 2015-12-27 в 13:25Спам
Помню, он на некоторых шаблонах не рабочий. Я вроде это указывал в статье, хотя точно не помню.
0
Aлексей Дьяков 2015-11-17 в 15:51Спам
а как сделать если например за вывод отвечает не body а #page или .page? В файле /cok.js заменить $('body') на $('#page') или $('page')?
0
Aлексей Дьяков 2015-11-17 в 15:56Спам
нет данная замена тоже не помогает. плохо если не понимаешь этот js
3
Иван 2015-11-17 в 17:58Спам
Кто установил покажите пример
1
Насыров Денис 2015-11-23 в 19:19Спам
не фига не работает
0
Сергей 2015-11-28 в 20:55Спам
я установил код на сайте, когда выбираю фон ничего не происходит
0
Иван Залымов 2015-12-08 в 09:07Спам
То же самое и у меня((
0
Сергей Александрович 2015-12-13 в 11:28
Ребят у меня работает! school1-test.ат.юа
0
Иван Залымов 2015-12-16 в 09:23Спам
Я установил на свой сайт Haker.club, когда нажимаю поменять фон, фон становится просто черным...
0
Антон Александрович 2016-01-08 в 16:09Спам
Хороший скрипт, все нормально работает, только надо cok.js поправить. В нем путь к картинкам прописан в папку /fon/ впрочем как и в css - background:url(/fon/ugolok.png).
1
Ильяс 2016-08-06 в 18:18Спам
ВСЕ ОТЛИЧНО РАБОТАЕТ!!! СПАСИБО ))) подскажите,как сделать,чтоб картинки выпадали не вертикально,а горизонтально (в лево)
0
Ильяс 2016-08-06 в 18:19Спам
как на скрине данного скрипта
0
Yury 2016-10-09 в 15:56Спам
Научите, пожалуйста, как сделать, чтобы выбиралась не картинка, а просто заданный через css фон. Например, серый или синий!
0
Игорь Савичев 2016-10-31 в 18:18Спам
спасибо!
0
Чтобы оставить комментарий или отзыв под этой публикацией, войдите или зарегистрируйтесь.