UserPanel

Добро пожаловать на Форум веб-мастеров uCoz!

( Войти | Зарегистрироваться )

Главная форума Последние сообщения Пользователи Правила форума Расширенный поиск RSS лента

  • Страница 1 из 2
  • 1
  • 2
  • »
Форум веб-мастеров » Форум веб-мастеров » HTML & CSS » Смена бекграунда
Смена бекграунда
Дата: Четверг, 07.10.2010, 14.57.37 | Сообщение # 1
Без аватара
Уровень 1
Зарегистрирован: 07.10.2010
Пользователь №: 69
Сообщений: 11
Добрый день!
Проблемма такая: на сайте (в основном шаблоне) имеется такой кусок:
Code
<style type="text/css">
body {
  color: #ffffff;
   
  background: #000000 url(/fon/30.jpg) 50% 0 no-repeat fixed;
}
a {
  color: #CC0000
}
.moduletable h3, #horiz-menu, ul#rokslide-toolbar {
  color: #fff;
}
#horiz-menu a, h3.toggler {
  color: #1212eb;
}
.sections td, #showcase, #mainframe td#left, #mainframe td#right, #mainframe #user1, #mainframe #page, pre, fieldset {
  border: 1px solid #CCCCC;
}
#shadow-bottom .padding {
  border-top: 1px solid #CCCCC;
}
#mainframe td#left, #mainframe td#right {
  width: 175px;
}
</style>

где
Code
background: #000000 url(/fon/30.jpg) 50% 0 no-repeat fixed;

это ссылка на фоновую картинку сайта.
нужно сделать так,
чтобы эту фоновую картинку пользователь мог выбирать из списка загруженных на сайт. Подскажите, что прописать - уже 3 день пытаюсь, не получается(((
 
Дата: Четверг, 07.10.2010, 15.37.48 | Сообщение # 2
Без аватара
Уровень 4
Зарегистрирован: 07.09.2010
Пользователь №: 17
Сообщений: 253
Между <head> и </head> ставишь:

Quote
<script type="text/javascript">
function getcookie(name){var aCookie = document.cookie.split(';');for(var i=0;i<aCookie.length;i++){while(aCookie[i][0]==' '){aCookie[i]=aCookie[i].substr(1);}var aCrumb=aCookie[i].split('=');if(name==aCrumb[0]){return unescape(aCrumb[1]);}}return null;}
function setcookie(name,value,expires,path,domain,secure){var today=new Date();var expires_date=new Date(today.getTime()+(expires*1000));document.cookie =name+'='+escape(value)+(expires ? ';expires='+expires_date.toUTCString():'')+(path ? ';path='+path:'')+(domain ? ';domain='+domain:'')+(secure ? ';secure':'')}
if(getcookie('csslink')==null){setcookie('csslink', 'css/style.css')}
var csslink = getcookie('csslink');
document.write('<link type="text/css" rel="StyleSheet" href="'+csslink+'" />')
</script>

Где выделено красным нужно написать путь к стандартному файлу стилей.

В html пишешь так:

Code
<div class="colors">  
  <a href="javascript://" onclick="setcookie('csslink', 'css/style.css');window.location.reload()" id="white"></a>  
  <a href="javascript://" onclick="setcookie('csslink', 'css/red.css');window.location.reload()" id="red"></a>  
  </div>
 
Дата: Четверг, 07.10.2010, 15.57.40 | Сообщение # 3
Без аватара
Уровень 1
Зарегистрирован: 07.10.2010
Пользователь №: 69
Сообщений: 11
Не получается((( вообще ничего не проиходит почему то
 
Дата: Четверг, 07.10.2010, 16.04.52 | Сообщение # 4
Без аватара
Уровень 4
Зарегистрирован: 07.09.2010
Пользователь №: 17
Сообщений: 253
AIR-Art,
Короче вот статья.
 
Дата: Четверг, 07.10.2010, 16.07.48 | Сообщение # 5
Без аватара
Уровень 1
Зарегистрирован: 07.10.2010
Пользователь №: 69
Сообщений: 11
Вроде делаю все как написано, но ничего не получается((( - дизайн остается ТОТ же и вообще ничего не происходит(
Вот это у нас основной стиль css
Code
@charset "utf-8";
/* Адаптация из Джомлы в Юкоз -  2010 */
/*  http:// */

@import url("rokmoomenu.css");
@import url("template_css.css");
@import url("header-black.css");

#rokslide { visibility: hidden;}
hr {clear: both;height: 0;border: 0;visibility: hidden;margin: 0;padding: 0;}
/* The toolbar for the content box */

ul#rokslide-toolbar {float: left;text-align: center;list-style: none;margin: -1px 0 0 0;padding: 0;clear: both;padding-left: 20px;}

#rokslide-toolbar li {float: left;height: 33px;line-height: 33px;display: block;cursor: pointer;list-style: none;padding: 0 15px;font-weight: bold;}
     
#frame {position: relative;overflow: hidden;z-index: 1;background: none;}
#frame div.button {position: absolute;width: 36px;height: 36px;cursor: pointer;overflow: hidden;top: 40%;}
#frame div.button#left {left: 10px;}
#frame div.button#right {right: 10px;}
#frame div.button#left:hover, #frame div.button#left.hover, #frame div.button#right:hover, #frame div.button#right.hover{background-position: 0 -36px;}

#scroller {margin: 0 auto;overflow: hidden;background: none;}

.tab-pane {margin: 0 20px;float: left;overflow: hidden;visibility: visible;}

а вот это шаблон основной страницы сайта:
Code
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>$SITE_NAME$ - $MODULE_NAME$</title>
<link rel="shortcut icon" href="/images.12" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="all">
@import url("/css/mainstyles.css");
</style>
<!--[if lte IE 6]>
   <link type="text/css" rel="StyleSheet" href="/_st/my.css" />
   <style type="text/css">
   img { behavior: url(/css/iepngfix.htc); }   
   </style>
   <![endif]-->
<style type="text/css">
body {
   color: #ffffff;
     
   background: #000000 url(/fon/30.jpg) 50% 0 no-repeat fixed;
}
a {
   color: #CC0000
}
.moduletable h3, #horiz-menu, ul#rokslide-toolbar {
   color: #fff;
}
#horiz-menu a, h3.toggler {
   color: #1212eb;
}
.sections td, #showcase, #mainframe td#left, #mainframe td#right, #mainframe #user1, #mainframe #page, pre, fieldset {
   border: 1px solid #CCCCC;
}
#shadow-bottom .padding {
   border-top: 1px solid #CCCCC;
}
#mainframe td#left, #mainframe td#right {
   width: 175px;
}
</style>
</head>
<body id="smoke">
<div class="wrapper">
     
   <div class="surround">
   <div id="shadow-top">
   <div class="padding"> </div>
   </div>
   <div id="shadow-middle">
   <div class="padding">
   <!-- Flash -->
   <table width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
   <td><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="829" height="300">
   <param name="movie" value="/loading/header.swf" />
   <param name="quality" value="high" />
   <param name="wmode" value="transparent" />
   <embed src="/loading/header.swf" width="829" height="300" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" wmode="transparent"></embed>
   </object></td>
   </tr>
   </table>

   <div id="main-content">
   <!-- Top menu -->
   <div id="horiz-menu"> $GLOBAL_MENU$ </div>
   <!-- /Top menu -->

   <!-- <middle> -->
   <table width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
   <td valign="top" id="middle"><!-- <body> -->
   $CONTENT$
   <!-- </body> --></td>
     
     
   <td class="spacer"><img src="/images/blank.png" alt="" /></td>
   <td valign="top" id="right" width="220">$GLOBAL_CLEFTER$</td>
   </tr>
   </table>
   <!-- </middle> -->
   </div>
   </div>
   </div>
   <div id="shadow"><a href="http://" title="Design by" class="nounder"><img src="/images/blank.gif" alt="" name="rocket" width="300" id="rocket" /></a> <br />

   <div align="center">$POWERED_BY$</div>
   </div>
   </div>
</div>
</body>
</html>

Вот как с этим всем быть - запутался основательно
Сообщение отредактировал AIR-Art - Четверг, 07.10.2010, 16.18.34
 
Дата: Четверг, 07.10.2010, 16.52.03 | Сообщение # 6
Без аватара
Уровень 4
Зарегистрирован: 07.09.2010
Пользователь №: 17
Сообщений: 253
Code
<style type="text/css">  
body {  
    color: #ffffff;  
       
    background: #000000 url(/fon/30.jpg) 50% 0 no-repeat fixed;  
}  
a {  
    color: #CC0000  
}  
.moduletable h3, #horiz-menu, ul#rokslide-toolbar {  
    color: #fff;  
}  
#horiz-menu a, h3.toggler {  
    color: #1212eb;  
}  
.sections td, #showcase, #mainframe td#left, #mainframe td#right, #mainframe #user1, #mainframe #page, pre, fieldset {  
    border: 1px solid #CCCCC;  
}  

#shadow-bottom .padding {  
    border-top: 1px solid #CCCCC;  
}  
#mainframe td#left, #mainframe td#right {  
    width: 175px;  
}  
</style>

Вот это вынеси в отдельный файл и поставь в скрипте ссылку на этот файл.

Потом создай еще один .css файл и впиши туда свой второй фон

Code
body {  
    color: #ffffff;  
       
    background: #000000 url(второй фон) 50% 0 no-repeat fixed;  
}

и потом напиши в html
<div class="colors">
<a href="javascript://" onclick="setcookie('csslink', 'то, что ты вынесешь в отдельный файл');window.location.reload()" id="white"></a>
<a href="javascript://" onclick="setcookie('csslink', 'второй файл с другим фоном');window.location.reload()" id="red"></a>
</div>

 
Дата: Четверг, 07.10.2010, 18.02.13 | Сообщение # 7
Без аватара
Уровень 1
Зарегистрирован: 07.10.2010
Пользователь №: 69
Сообщений: 11
значит кусок кода с css убрать получилось, но пришлось и mainstyles.ccs копировать в styles1/css - в противном случае не работало....
Стайл2 тоже создал, но
Quote (Just_)
и потом напиши в html <div class="colors"> <a href="javascript://" onclick="setcookie('csslink', 'то, что ты вынесешь в отдельный файл');window.location.reload()" id="white"></a> <a href="javascript://" onclick="setcookie('csslink', 'второй файл с другим фоном');window.location.reload()" id="red"></a> </div>

вот это кусок куда только не вставлял - его нигде не видно(

может это связано с тем что там класс колор стоит- мы же вроде css меняем....хотя я в этом не спец, поэтому и прошу помощи (зы в долгу не останусь!)
я вставлял в диз страницы вот так:

Code
<div class="color">   
<a href="javascript://" onclick="setcookie('csslink', '/styles1.css');window.location.reload()" id="2"></a>   
<a href="javascript://" onclick="setcookie('csslink', '/styles2.css");window.location.reload()" id="1"></a></div>
   

безрезультатно
Сообщение отредактировал AIR-Art - Четверг, 07.10.2010, 18.35.34
 
Дата: Четверг, 07.10.2010, 18.44.37 | Сообщение # 8
Без аватара
Уровень 4
Зарегистрирован: 07.09.2010
Пользователь №: 17
Сообщений: 253
Ладно. не получается и ладно. Вот сделал по другому. И кода намного меньше

Все просто:

Code
<a href="javascript://" onclick="document.body.style.backgroundColor = '#fff';">Белый</a>
<a href="javascript://" onclick="document.body.style.backgroundColor = '#ddd';">Сеый</a>
 
Дата: Четверг, 07.10.2010, 19.01.41 | Сообщение # 9
Без аватара
Уровень 4
Зарегистрирован: 07.09.2010
Пользователь №: 17
Сообщений: 253
Дай ссылку на css файл, шде лежит картнка фона. В то их там очень уж много
 
Дата: Четверг, 07.10.2010, 19.04.24 | Сообщение # 10
Без аватара
Уровень 1
Зарегистрирован: 07.10.2010
Пользователь №: 69
Сообщений: 11
http://testbg.my1.ru/css/styles1.css
http://testbg.my1.ru/css/styles2.css

Добавлено (07.10.2010, 19:04)
---------------------------------------------
забыл /css/ там дописать в адресе

Сообщение отредактировал AIR-Art - Четверг, 07.10.2010, 19.03.49
 
Дата: Четверг, 07.10.2010, 19.21.58 | Сообщение # 11
Без аватара
Уровень 4
Зарегистрирован: 07.09.2010
Пользователь №: 17
Сообщений: 253
Code
<a href="javascript://" onclick="document.body.style.backgroundImage = 'url(http://testbg.my1.ru/fon/30.jpg)';">Стандартная</a><br/>
<a href="javascript://" onclick="document.body.style.backgroundImage = 'url(http://www.bankoboev.ru/images/Mjg1MTU4/Bankoboev.Ru_razvlekatelno_ozdorovitelnyi_kompleks.jpg)';">Белый</a>
Сообщение отредактировал Just_ - Четверг, 07.10.2010, 19.22.13
 
Дата: Четверг, 07.10.2010, 19.28.21 | Сообщение # 12
Без аватара
Уровень 1
Зарегистрирован: 07.10.2010
Пользователь №: 69
Сообщений: 11
УРААААААААААААААААААААААААААА!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Осталось сделать чтобы запоминал выбор как то...это реально?

Добавлено (07.10.2010, 19:28)
---------------------------------------------
УРААААААААААААААААААААААААААА!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Осталось сделать чтобы запоминал выбор как то...это реально?

 
Дата: Четверг, 07.10.2010, 19.28.48 | Сообщение # 13
Без аватара
Уровень 4
Зарегистрирован: 07.09.2010
Пользователь №: 17
Сообщений: 253
Quote (AIR-Art)
Осталось сделать чтобы запоминал выбор как то...это реально?

Сделать то можно, но для этого совсем другой код нужен.
 
Дата: Четверг, 07.10.2010, 19.31.53 | Сообщение # 14
Без аватара
Уровень 1
Зарегистрирован: 07.10.2010
Пользователь №: 69
Сообщений: 11
на ссылке которую вы мне давали выше, есть что то подобное, это можно попробовать как то прикорячить к тому, что сделано?
 
Дата: Четверг, 07.10.2010, 19.42.15 | Сообщение # 15
Без аватара
Уровень 4
Зарегистрирован: 07.09.2010
Пользователь №: 17
Сообщений: 253
http://testshab.ucoz.com/mumu/
 
Форум веб-мастеров » Форум веб-мастеров » HTML & CSS » Смена бекграунда
  • Страница 1 из 2
  • 1
  • 2
  • »
Поиск: