Как изменить цвет горизонтального меню в Ja Purity

Тема в разделе "Изменение шаблона (кастомизация)", создана пользователем Azorrr, 20.07.2010.

  1. Offline

    Azorrr Недавно здесь

    Регистрация:
    20.07.2010
    Сообщения:
    4
    Симпатии:
    0
    Пол:
    Мужской
    Всем привет. Я полный нуб в CSS, сделал новую цветовую схему для шаблона Ja Purity по этому учебнику. Все просто и понятно, но он оказался не полный! То есть кое-где надо вводить свои стили, а они не написаны. Часть я допетрил и сам дописал, но две проблемы не могу побороть.
    1. Цвет шрифта в горизонтальном меню (на картинке пункты меню Упаковка, Корзина). В активном пункте меню все поменял, а эти не удается.
    2. Когда все пункты меню кончаются, справа остается просто пустая желтая полоса. Так у этой полосы левая граница в 1px осталась черная, тоже не знаю, как поменять цвет.

    [​IMG]

    Прилагаю весь style.css, не знаю, какой кусок кода нужен.

    Код (CODE):
    1. #ja-headerwrap {
    2.     background: #006699;
    3.     color: #C3DFED;
    4. }
    5.  
    6. .ja-headermask {
    7.     background: url(images/header-mask.png) no-repeat top right;
    8. }
    9.  
    10. #ja-header a {
    11.     color: #C3DFED;
    12. }
    13.  
    14. h1.logo-text a {
    15.     color: #C3DFED !important;
    16. }
    17.  
    18. p.site-slogan {
    19.     background: #1E7CAB;
    20. }
    21.  
    22. #ja-search {
    23.     background: url(images/icon-search.gif) no-repeat center left;
    24. }
    25.  
    26. #ja-search .inputbox {
    27.     border: 1px solid #005A87;
    28.     color: #C3DFED;
    29.     background: #1E7CAB;
    30. }
    31.  
    32. .sectiontableheader {
    33.     background: #1374A5;
    34. }
    35.  
    36. #ja-botslwrap {
    37.     background: #006699;
    38.     color: #C3DFED;
    39. }
    40.  
    41. .ja-box-right div.moduletable {
    42.     background: url(images/vdot2.gif) repeat-y left;
    43. }
    44.  
    45. .ja-box-center div.moduletable {
    46.     background: url(images/vdot2.gif) repeat-y left;
    47. }
    48.  
    49. #ja-botsl a {
    50.     color: #C3DFED;
    51. }
    52.  
    53. /*--------------------------- VISUAL ----------------------------*/
    54. /* -------- All levels -------- */
    55. #ja-mainnavwrap {
    56.     border-top: 1px solid #4394BD;
    57.     background: #1374A5;
    58. }
    59. #ja-mainnav ul, #ja-mainnav li {
    60.     background-image: none;
    61.     list-style: none;
    62. }
    63.  
    64. #ja-mainnav span.separator {
    65.     display:none;
    66. }
    67.  
    68. /* -------- Top level -------- */
    69. #ja-mainnav > ul {
    70.     background-color: #1374A5;
    71.     padding-left: 20px;
    72. }
    73.  
    74. #ja-mainnav > ul > li {
    75.     background-color: #1374A5;
    76.     border-left: 1px solid #4394BD;
    77.     border-right: 1px solid #005A87;
    78.     margin-right: 1px;
    79. }
    80.  
    81. #ja-mainnav > ul > li.active {
    82.     background: url(../../../images/arrow2.png) no-repeat bottom center #1374A5;
    83.     color: #C3DFED;
    84. }
    85.  
    86. #ja-mainnav > ul > li:hover,
    87. #ja-mainnav > ul > li:active,
    88. #ja-mainnav > ul > li:focus {
    89.     background: url(../../../images/arrow2.png) no-repeat bottom center #2A84B1;
    90.     color: #C3DFED;
    91. }
    92.  
    93. /* -------- sub-levels -------- */
    94. #ja-mainnav ul ul li {
    95.     border-left: 1px solid #4394BD;
    96.     border-right: 1px solid #005A87;
    97.     border-top: 1px solid #4394BD;
    98.     border-bottom: 1px solid #005A87;
    99.     margin-bottom: 1px;
    100. }
    101.  
    102. #ja-mainnav li ul { /* second-level lists */
    103.     background-color: #2A84B1;
    104. }
    105.  
    106. #ja-mainnav li a {
    107.     color: #C3DFED;
    108.     font-weight: bold;
    109.     text-decoration: none;
    110. }
    111.  
    112. #ja-mainnav ul ul  li:hover,
    113. #ja-mainnav ul ul  li:active,
    114. #ja-mainnav ul ul  li:focus {
    115.     background: #006699;
    116.     color: #C3DFED;
    117. }
     
    Последнее редактирование: 21.07.2010
  2.  
  3. woojin
    Offline

    woojin Местный Команда форума

    Регистрация:
    31.05.2009
    Сообщения:
    3 209
    Симпатии:
    335
    Пол:
    Мужской
    попробуй применить
    Код (CODE):
    1. A:link {
    2.     color: #036; /* Цвет непосещенных ссылок */
    3.    }
    4.    A:visited {
    5.     color: #606; /* Цвет посещенных ссылок */
    6.    }
    7.    A:hover {
    8.     color: #f00; /* Цвет ссылок при наведении на них курсора мыши */
    9.    }
    10.    A:active {
    11.     color: #ff0; /* Цвет активных ссылок */
    12.    }

    подробнее тут
     
  4. Offline

    Azorrr Недавно здесь

    Регистрация:
    20.07.2010
    Сообщения:
    4
    Симпатии:
    0
    Пол:
    Мужской
    Попробовал. В горизонтальном меню ничего не изменилось. Зато поменялись цвета ссылок в основной части страницы :)
     
  5. woojin
    Offline

    woojin Местный Команда форума

    Регистрация:
    31.05.2009
    Сообщения:
    3 209
    Симпатии:
    335
    Пол:
    Мужской
    это надо использовать совместно с
    #ja-header
    h1.logo-text
    т.е. просто дополнить, а если использовать в чистом виде как я дал, то тогда естественно изменятся все ссылки на странице

    чуть ниже по вашему CSS посмотрел /* -------- Top level -------- */ отсюда начинается описание верхнего уровня меню, то что у вас и показано на картинке

    а за это у вас отвечают эти теги
    #ja-mainnav > ul > li.active
    #ja-mainnav > ul > li:hover
    #ja-mainnav > ul > li:active
    #ja-mainnav > ul > li:focus


    к ним также применимы эти псевдоклассы - так что пробуйте
     
    Последнее редактирование: 21.07.2010
  6. Offline

    Azorrr Недавно здесь

    Регистрация:
    20.07.2010
    Сообщения:
    4
    Симпатии:
    0
    Пол:
    Мужской
    woojin, спасибо за советы!

    Проблемы я уже решил самостоятельно. Хотел поставить Firebag, но оказалось, в Google Chrome уже встроено нечто подобное! Очень удобно. Надо щелкнуть правой кнопкой на элементе и выбрать в контекстном меню "Просмотр кода элемента".

    Нужные мне элементы оказались прописаны в файле \ja_purity\css\ja-sosdmenu.css
    Скопировал их оттуда, вставил в style.css и исправил цвета, вот и все! Способ для тех, кто не разбирается в этих ul.menu li a :)
    Если кому интересно, вот эти стили:

    Код (CODE):
    1. #ja-mainnav ul.menu {
    2.     border-right: 1px solid #333333;
    3. }
    4.  
    5. #ja-mainnav ul.menu li a {
    6.         color: #CCCCCC;
    7. }
     

Поделиться этой страницей

Загрузка...