Смена фона сайта с запоминанием на cookie для uCoz
Увы, шаблон недоступен для скачивания или покупки, в связи с обращением правообладателя!
По всем вопросам обращайтесь к Администратору.
По всем вопросам обращайтесь к Администратору.
Это не самая функциональная модификация, пользователь может выбирать фон лишь из списка предустановленных вариантов (но этот список вы конечно можете составить свой), то есть он не может взять любую картинку которая ему нравиться и поставить ее в качестве фона. Хотя есть и другие, более функциональные подобные скрипты, но о них потом.
Установка
1. Заливаем папку "fon" и все её содержимое в корень сайта.
2. Вставить в то место, где будет кнопка выбора фона:
Код
<script src="/fon/cookie.js"></script>
<div class="ff_fon">
<a href="#" class="drox"><img alt="fon" title="Сменить фон сайта" src="/fon/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="/fon/1.jpg" width="20px" /></a>
<a href="#"><img id="jp2" src="/fon/2.jpg" width="20px" /></a>
<a href="#"><img id="jp3" src="/fon/3.jpg" width="20px" /></a>
<a href="#"><img id="jp4" src="/fon/4.jpg" width="20px" /></a>
<a href="#"><img id="jp5" src="/fon/5.jpg" width="20px" /></a>
<a href="#"><img id="jp6" src="/fon/6.jpg" width="20px" /></a>
<a href="#"><img id="jp7" src="/fon/7.jpg" width="20px" /></a>
<a href="#"><img id="jp8" src="/fon/8.jpg" width="20px" /></a>
<a href="#"><img id="jp9" src="/fon/9.jpg" width="20px" /></a>
</div>
</div>
</div>
<script src="/fon/cok.js"></script>
<div class="ff_fon">
<a href="#" class="drox"><img alt="fon" title="Сменить фон сайта" src="/fon/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="/fon/1.jpg" width="20px" /></a>
<a href="#"><img id="jp2" src="/fon/2.jpg" width="20px" /></a>
<a href="#"><img id="jp3" src="/fon/3.jpg" width="20px" /></a>
<a href="#"><img id="jp4" src="/fon/4.jpg" width="20px" /></a>
<a href="#"><img id="jp5" src="/fon/5.jpg" width="20px" /></a>
<a href="#"><img id="jp6" src="/fon/6.jpg" width="20px" /></a>
<a href="#"><img id="jp7" src="/fon/7.jpg" width="20px" /></a>
<a href="#"><img id="jp8" src="/fon/8.jpg" width="20px" /></a>
<a href="#"><img id="jp9" src="/fon/9.jpg" width="20px" /></a>
</div>
</div>
</div>
<script src="/fon/cok.js"></script>
3. Это кидаете в стили:
Код
.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;}
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;}
Фсе.
Теги:
0 Комментариев