• Страница 1 из 1
  • 1
Форум » Веб-разработка » HTML + CSS — коды » Темно стильный вид материала форума uCoz
Темно стильный вид материала форума uCoz
Kosten
Понедельник, 21 Мая 2012 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44355
Награды: 70


О скрипте:
Зеленое раздвижное меню для сайта ucoz, красиво будит смотреться на зеленых сайтах, но и на светлых дизайн майтах красиво подойдет меню, меню заметное, внимание на сайте будит больше на меню.
Приступаем к установке:
Заливаем стиль в CSS
Код
/* Rip by zornet.ru */   
   .box {width:231px;padding:0px 5px;padding-bottom:9px;}   
   .box-l {background:url('http://zornet.ru/zornet_ru1/l-block.png');height:24px;padding-left:13px;text-align:left;color:#fff;text-shadow:0.1em 0.1em 0.01em #919191;font:normal 9pt Arial;padding-top:9px;}   
   .box-l-c {background:url('http://zornet.ru/zornet_ru1/l-block-c.png'); color:#fff; padding:4px 4px;}   
   .box-l-f {background:url('http://zornet.ru/zornet_ru1/l-block-f.png');height:7px;}   
   .box_200 {width:208px;padding:0px 1px;padding-bottom:1px;float:right;}   
   .box-r {background:url('http://zornet.ru/zornet_ru1/r-block.png'); height:27px; text-align:left; color:#555; text-shadow:0.1em 0.1em 0.01em #fff; font:normal 9pt Arial; padding-left:13px; padding-top:9px;}   
   .box-r-c {background:url('http://zornet.ru/zornet_ru1/r-block-c.png'); padding:0px 4px;}   
   .box-r-c-h {background:url('http://zornet.ru/zornet_ru1/r-block-c-h.png') no-repeat; color:#333; padding:4px 4px;}   
   .box-r-f {background:url('http://zornet.ru/zornet_ru1/r-block-f.png'); height:17px;}   
   .box-r-c .stats b {color:#2b9c00;text-shadow:0.1em 0.1em 0.01em #fff;}   
   .reset, .reset li { list-style: none;padding: 0; margin: 0; font-size:11px;}   
   .dcont { }   
   .icomenu { width: 235px; padding-bottom: 8px; }   
   .icomenu ul { margin: 24px 0 0 14px; }   
   .icomenu ul li a { clear: both; display: block; font-size: 1.2em; height: 26px; line-height: 26px; margin-bottom: 0.4em; }   
   .icomenu ul li img { float: left; margin-right: 4px; }   
   .bngreen { padding: 8px 0 0 0; width: 231px; background: url("http://zornet.ru/zornet_ru1/bngreen.png") no-repeat; }   
   .bngreen .bngreen { padding: 0 0 8px 0; background: url("http://zornet.ru/zornet_ru1/bngreen.png") no-repeat -231px 100%; }   
   .bngreen .bngarrow { float: right; margin-top: -31px; }   
   .bngreen .dcont { overflow: hidden; }   
   .bngreen ul { padding-bottom: 2px; background: url("http://rurip.ru/img/bngreenline.png") no-repeat 0 100%; }   
   .bngreen ul li { position: relative; }   
   .bngreen ul a, .bngreen ul span.sublink, .bngreen ul a b { display: block; cursor: pointer; }   
   .bngreen ul b { padding: 0 19px; background: url("http://zornet.ru/zornet_ru1/bngndot.png") no-repeat 7px -999px; }   
   .bngreen ul a, .bngreen ul span.sublink { font-size:12px; background: url("http://zornet.ru/zornet_ru1/bngreennav.png") no-repeat; color: #e1ffe8; width: 100%; padding: 5px 0 4px 0; overflow: hidden; }   
   .bngreen ul a:hover, .bngreen ul span.sublink:hover { color: #fff; background: url("http://zornet.ru/zornet_ru1/bngreennav.png") no-repeat 0 -100px; }   
   .bngreen ul span.opened:hover { color: #fff; background: url("http://zornet.ru/zornet_ru1/bngreennav.png") no-repeat; }   
   .bngreen ul span.opened b, .bngreen ul a:hover b, .bngreen ul span.sublink:hover b { background-position: 7px 50%; }   
   .bngreen ul .sublink img { width: 14px; height: 14px; position: absolute; margin-top: 1px; top: 5px; right: 15px; background: url("http://zornet.ru/zornet_ru1/open-close.png") no-repeat; }   
   .bngreen ul .closed img { background-position: 0 0; }   
   .bngreen ul .opened img { background-position: 0 -14px; }   
   .bngreen ul .submenu {font-size:11px; overflow: hidden; background: url("http://zornet.ru/zornet_ru1/bngreennav.png") no-repeat 0 -100px; }   
   .bngreen ul .submenu ul {font-size:11px; margin: 0; padding: 8px 19px; font-size: 0.9em; background: none; }   
   .bngreen ul .submenu ul li {font-size:11px; background: url("http://zornet.ru/zornet_ru1/submenu.png") repeat-x 0 100%; }   
   .bngreen ul .submenu ul li a {font-size:11px; color: #e9f5cc; width: 100%; height: auto; line-height: normal; padding: 3px 0; text-indent: 0; background: none; }   
   .bngreen ul .submenu ul li a:hover {font-size:11px; color: #fff; }   
   /* ------ */


В блок
Код
<div class="box">   
   <div class="bngreen"><div class="bngreen">    
    <div class="dcont">    
    <ul class="reset">    
    <li><a href="/"><b>Rip by zornet.ru</b></a></li>    
    <li><a href="/forum/"><b>Rip by zornet.ru</b></a></li>    
    <li><span class="sublink"><b>Rip by zornet.ru</b></span></li>    
    <li class="submenu">    
    <ul class="reset">    
    <li><a href="http://zornet.ru/pravila_sajta/0-8">Rip by zornet.ru</a></li>    
    <li><a href="http://zornet.ru/index/reklama/0-5">Rip by zornet.ru</a></li>    
    <li><a href="http://zornet.ru/index/nasha_komanda/0-13">Rip by zornet.ru </a></li>    
    <li><a href="http://zornet.ru/index/0-3">Rip by zornet.ru</a></li>    
    </ul>    
       
    <li><span class="sublink"><b>Rip by zornet.ru</b></span></li>    
    <li class="submenu">    
    <ul class="reset">    
    <li><a href="#">Rip by zornet.ru</a></li>    
    <li><a href="#">Rip by zornet.ru</a></li>    
    <li><a href="#">Rip by zornet.ru</a></li>    
    <li><a href="#">Rip by zornet.ru</a></li>    
    <li><a href="#">Rip by zornet.ru</a></li>    
    <li><a href="#">Rip by zornet.ru</a></li>   
    </ul>    
    </li>    
       
    <li><span class="sublink"><b>Rip by zornet.ru</b></span></li>    
    <li class="submenu">    
    <ul class="reset">    
    <li><a href="#">Rip by zornet.ru</a></li>    
    <li><a href="#">Rip by zornet.ru</a></li>    
    <li><a href="#">Rip by zornet.ru</a></li>    
    <li><a href="#">Rip by zornet.ru</a></li>   
    <li><a href="#">Rip by zornet.ru</a></li>    
    <li><a href="#">Rip by zornet.ru</a></li>   
    </ul>    
    </li>    
       
    <li><span class="sublink"><b>Rip by zornet.ru</b></span></li>    
    <li class="submenu">    
    <ul class="reset">    
    <li><a href="#">Rip by zornet.ru</a></li>    
    <li><a href="#">Rip by zornet.ru</a></li>    
    <li><a href="#">Rip by zornet.ru</a></li>    
    <li><a href="#">Rip by zornet.ru</a></li>    
    <li><a href="#">Rip by zornet.ru</a></li>    
    <li><a href="#">Rip by zornet.ru</a></li>   
    </ul>    
    </li>    
       
    <li><span class="sublink"><b>Rip by zornet.ru</b></span></li>    
    <li class="submenu">    
    <ul class="reset">    
    <li><a href="#">Rip by zornet.ru</a></li>    
    <li><a href="#">Rip by zornet.ru</a></li>    
    <li><a href="#">Rip by zornet.ru</a></li>    
    <li><a href="#">Rip by zornet.ru</a></li>    
    <li><a href="#">Rip by zornet.ru</a></li>    
    <li><a href="#">Rip by zornet.ru</a></li>   
    </ul>    
    </li>    
       
    <li><span class="sublink"><b>Rip by zornet.ru</b></span></li>    
    <li class="submenu">    
    <ul class="reset">    
    <li><a href="#">Rip by zornet.ru</a></li>    
    <li><a href="#">Rip by zornet.ru</a></li>    
    <li><a href="#">Rip by zornet.ru</a></li>    
    <li><a href="#">Rip by zornet.ru</a></li>    
    <li><a href="#">Rip by zornet.ru</a></li>    
    <li><a href="#">Rip by zornet.ru</a></li>   
    </ul>    
    </li>    
       
    <li><a href="/blog/"><b>Rip by zornet.ru</b></a></li>    
    <li><a href="/publ/"><b>Rip by zornet.ru</b></a></li>    
    <li><a href="/board/"><b>Rip by zornet.ru</b></a></li>    
    <li><a href="/dir/"><b>Rip by zornet.ru</b></a></li>    
    <li><a href="/gb/"><b><i>Rip by zornet.ru</i></b></a></li>    
    </ul>    
    </div>    
   </div></div>   
   <script type="text/javascript" src="http://zornet.ru/zornet_ru1/ddaccordion.js"></script>    
   <script type="text/javascript">    
   ddaccordion.init({   
    headerclass: "sublink",   
    contentclass: "submenu",   
    revealtype: "click",   
    mouseoverdelay: 200,   
    collapseprev: false,   
    defaultexpanded: [],   
    onemustopen: false,   
    animatedefault: false,   
    persiststate: true,   
    toggleclass: ["closed", "opened"],   
    togglehtml: ["suffix", "<img src='http://zornet.ru/zornet_ru1/spacer.gif' alt='' /> ", "<img src='http://rurip.ru/skripty/green_menu/spacer.gif' alt='' /> "],   
    animatespeed: "fast",   
    oninit:function(expandedindices){ },   
    onopenclose:function(header, index, state, isuseractivated){ }   
   })   
   span></script> </div>
Страна: (RU)
Сопрано
Вторник, 05 Января 2016 | Сообщение 2
Оффлайн
Vip
Сообщений:462
Награды: 4
Ставил одно время, так не чего, но на слишком темный фон его лучше не садить, не красиво будет.
Страна: (RU)
FeStemBer
Вторник, 05 Января 2016 | Сообщение 3
Оффлайн
Проверенные
Сообщений:355
Награды: 1
Просто серый а в этом случай не всегда для них нормальный сайт найдешь, но если только под такой цвет, но не красиво будет, все равно фон другой нужен.
Страна: (RU)
Марковичь
Вторник, 05 Января 2016 | Сообщение 4
Оффлайн
Vip
Сообщений:65
Награды: 0
Но вот можно посмотреть, не знаю, с какого сайта он, но все стили явно драли с него и ставили на светлвй дизайн. Это где логинстоит, и все остальные функций.
Страна: (RU)
Форум » Веб-разработка » HTML + CSS — коды » Темно стильный вид материала форума uCoz
  • Страница 1 из 1
  • 1
Поиск: