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

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

17.11.2015350820Hanyy

Большинство сайтов используют изображение для заднего фона своего проекта. А что если дать возможность самому менять фон сайта из нескольких вариантов, которые ему можно предоставить? С этим скриптом пользователь на вашем сайте сможет поменять фон сайта, с запоминанием на 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... на свои. После этого можно считать нашу установку завершенной. Ваши пользователи теперь получат возможность изменять фон сайта, который им больше понравятся.




Сохраните в социальную сеть
Комментарии (20)
Deniss Lvov 17.11.2015 в 11:46Спам
О, спасибо
0
ггг рад был подредактировать
1
Sargis Kirakosyan 18.11.2015 в 20:09Спам
Здравствуйте. Я попытался использовать этот скрипт для изменения заднего цвета меню. Скрипт изменил цвет но при переходе на другую страницу цвет возвращается на старую. Я все установил правильно. Вы можете мне помочь?
0
Увы не я автор и со скриптами я не дружу. Обращайтесь на форум.
0
Денис Абдуллин 19.11.2015 в 16:50
Надо было скрипт проверять вообще-то.
0
Я проверял вообще то он рабочий. А то что из него уже делают модификацию для другой цели то тут я уже не помощник.
0
Помню, он на некоторых шаблонах не рабочий. Я вроде это указывал в статье, хотя точно не помню.
0
а как сделать если например за вывод отвечает не body а #page или .page? В файле /cok.js заменить $('body') на $('#page') или $('page')?
0
нет данная замена тоже не помогает. плохо если не понимаешь этот js
3
Иван 17.11.2015 в 17:58Спам
Кто установил покажите пример
1
не фига не работает
0
Сергей 28.11.2015 в 20:55Спам
я установил код на сайте, когда выбираю фон ничего не происходит
0
То же самое и у меня((
0
Ребят у меня работает! school1-test.ат.юа
0
Я установил на свой сайт Haker.club, когда нажимаю поменять фон, фон становится просто черным...
0
Хороший скрипт, все нормально работает, только надо cok.js поправить. В нем путь к картинкам прописан в папку /fon/ впрочем как и в css - background:url(/fon/ugolok.png).
1
Ильяс 06.08.2016 в 18:18Спам
ВСЕ ОТЛИЧНО РАБОТАЕТ!!! СПАСИБО ))) подскажите,как сделать,чтоб картинки выпадали не вертикально,а горизонтально (в лево)
0
Ильяс 06.08.2016 в 18:19Спам
как на скрине данного скрипта
0
Yury 09.10.2016 в 15:56Спам
Научите, пожалуйста, как сделать, чтобы выбиралась не картинка, а просто заданный через css фон. Например, серый или синий!
0
спасибо!
0
Чтобы оставить комментарий под этой публикацией,
зарегистрируйтесь или войдите.
Рейтинг лучших сервисов для самостоятельного создания сайта.
Лучшие конструкторы
Легко! Если пользоваться нашими советами.
Создать сайт