Изменение внешнего вида вкладок cflayout в CF9 - PullRequest
0 голосов
/ 12 июня 2011

Я пытаюсь переопределить внешний вид вкладок cflayout по умолчанию.

Поместив отредактированный фоновый спрайт в папку с изображениями на веб-сайте, я могу изменить внешний вид при наведении, но я не могу получить текст, который становится белым при наведении, ссылаясь на встроенный класс .x-tab-strip-over.

В действии здесь

    <style type="text/css">
    div.x-tab-panel-header, ul.x-tab-strip-top {
        background-image: none;
        background-color: transparent;
        padding-bottom: 0px;
    }
    div.x-tab-panel-header {
        border: 0px;
    }
    .x-tab-strip-active, .x-tab-strip-text {
        font-weight: normal !important;
        font-size: 14px !important;
        font-family: arial !important;
    }
    .x-tab-strip-over {
        color: white !important;
    }
    .x-tab-right, .x-tab-left, .x-tab-strip-inner {
        background-image: url(images/xd-tabs-sprite.gif) !important;
    }
</style>

<cflayout type="tab">
    <cflayoutarea title="Mouse">
        Mickey Mouse
    </cflayoutarea>
    <cflayoutarea title="Duck">
        Donald Duck
    </cflayoutarea>
</cflayout>

Любые подсказки оценены

Ответы [ 2 ]

3 голосов
/ 12 июня 2011

CF9 использует ExtJS 3.x, а Cf8 использует ExtJS 2.x

Как использовать:

  1. Нажмите Ext Theme Builder.
  2. Выберите шаблон (синий или серый) на верхней панели инструментов (я рекомендую - серый)
  3. Выберите базовый цвет, цвет заголовка, цвет фона, цвет границы, заголовок Шрифт, Шрифт, Прозрачность окна, Набор инструментов (по умолчанию, Vista, TargetProcess, Graphite) и ExtJS версия. Невыбранный цвет границы будет назначаться автоматически в соответствии с базовый цвет
  4. Нажмите Применить
  5. Введите название темы
  6. Нажмите Скачать тему. Это будет файл xtheme-Theme name.zip

http://extbuilder.dynalias.com/springapp/mainpage.htm

1 голос
/ 12 июня 2011

Использование:

.x-tab-panel-header .x-tab-strip-over span {
    color: white;
}
.x-tab-panel-header .x-tab-strip-over.x-tab-strip-active span {
    color: red;
}

Там много чего происходит, поэтому я просто тестировал, пока не нашел что-то, что сработало.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...