1. Главная
  2. Форумы
  3. Техподдержка Drupal
  4. Решение проблем

темизация табов [элементарно решено]

Главные вкладки

Аватар пользователя Лампочка Лампочка 15 апреля 2009 в 13:45

Как малой кровью сменить вид стандартных табов на табы с закругленными уголками сверху (типа как на этом сайте)? Я бы с удовольствием прописала это просто в CSS, но это этого у стандартных табов в Гарланде не хватает стилей.

Комментарии

Аватар пользователя Лампочка Лампочка 15 апреля 2009 в 17:12

Спасибо! А можно как-то в гарланде темизировать? Просто я уже половину стилей под свои нужды переделала. Жалко по новой все перелапачивать

Аватар пользователя Лампочка Лампочка 16 апреля 2009 в 21:30
<style>
        .tabs {
                margin: 0px;
                padding: 0px;
                list-style: none;
        }
        .tabs li {
                margin: 0px;
                padding: 0px 0px 0px 15px;
                list-style: none;
                float: left;
                width: 10%;            
                background: url(tab_bg_left.gif) left top no-repeat;
        }
        .tabs li a {
                padding: 0px 15px 0px 0px;
                background: url(tab_bg_right.gif) right top no-repeat;
        }
       
</style>
</head>

<body>
<ul class="tabs primary">
        <li class="active" >
        <a href="#" class="active">tab 1</a>
        </li>
        <li >
        <a href="#">tab 2</a>
        </li>
        <li >
        <a href="#">tab 3</a>
        </li>
        <li >
        <a href="#">tab 4</a>
        </li>
</ul>
</body>

Аватар пользователя Лампочка Лампочка 16 апреля 2009 в 21:33

Это тестовый вариант, при использовании надо дорабатывать, чтобы красиво выводилось.
tab_bg_left.gif - это широкая полоска фона в закругленным уголком слева. tab_bg_right.gif - просто правый уголок.
Для активного таба можно другие стили вставить
Когда быдет рабочий вариант - выложу, Если кому-то интересно Smile

Аватар пользователя Лампочка Лампочка 10 ноября 2015 в 11:46

Итак, как обещала, выкладываю реальный работающий пример. Действительно, для ИЕ6 надо было маленький хак написать, но все работает.

Табы были сделаны из основных и дополнительных ссылок третьего уровня, для них я сделала дополнительный регион, который располагается над контентной частью. В page.tpl.php этот регион выделяется дивом <div class="header2"></div>. Для вывода все это в блок использовала модуль menu block

Вот, как это выглядит в источнике:

<div class="header2">
  <div id="block-menu_block-2" class="clear-block block block-menu_block">
    <div class="menu-name-primary-links parent-mlid-1510 menu-level-2">
      <ul class="menu">
        <li class="leaf first menu-mlid-2664"><a href="#" title="ссылка 1">ссылка 1</a></li>
        <li class="leaf menu-mlid-2661"><a href="#" title="ссылка 2">ссылка 2</a></li>
        <li class="leaf menu-mlid-2660"><a href="#" title="ссылка 3">ссылка 3</a></li>
        <li class="leaf menu-mlid-2659"><a href="#" title="ссылка 4">ссылка 4</a></li>
        <li class="leaf menu-mlid-2682 has-children"><a href="#" title="ссылка 5">ссылка 5</a></li>
        <li class="leaf menu-mlid-2662"><a href="#" title="ссылка 6">ссылка 6</a></li>
        <li class="leaf last menu-mlid-2663"><a href="#" title="ссылка 7">ссылка 7</a></li>
      </ul>
    </div>
  </div>
</div>

Вот, что пишется в CSS

.header2 ul li {
        float: left;
        background: url(images/tabs_left_ltr.gif) left top no-repeat;
        line-height: 25px;
        height: 25px;
        padding: 0px 0px 0px 10px;
        font-size: 12px;
}

*html .header2 ul li {
        height: 10px;
}

.header2 ul li a:link, .header2 ul li a:visited {
        background: url(images/tabs_right_ltr.gif) right top no-repeat; /* LTR */
        color: #fff;
        padding: 0px 10px 0px 0px;
        text-decoration: none;
}

.header2 ul li a:hover {
        text-decoration: underline;
        color: #fff;
}

.header2 ul .active-trail {
        background: url(images/tabs_active_left_ltr.gif) left top no-repeat;
        color: #fff;
}

.header2 ul .active-trail a:link, .header2 ul .active-trail a:visited {
        background: url(images/tabs_active_right_ltr.gif) right top no-repeat;
        color: #fff;
}

.header2 ul li a:active, .header2 ul li .active  {
        color: #fff !important;
}

картинки прикреплены

Аватар пользователя Лампочка Лампочка 31 мая 2009 в 23:25

естественно, что еще для примари линкс сверху прописано list-style: none.

А цвет текста прописан в каждом классе, потому что выше у меня напсаны другие цвета для разных состояний ссылок меню.