Moushe.ru

Блог обо всём

Панель навигации в Twenty Ten



Сегодня на моём блоге появился новый комментарий с просьбой обьяснить – как перекрасить панель навигации в теме WordPress – TwentyTen, это  хороший повод написать свежий пост. Улыбка

1

Откроем Style.css и ищем этот код:

/* =Menu
————————————————————— */

#access {
background: #000; (чёрный фон панели навигации)
display: block;
float: left;
margin: 0 auto;
width: 940px;
}
#access .menu-header,
div.menu {
font-size: 13px;
margin-left: 12px;
width: 928px;
}
#access .menu-header ul,
div.menu ul {
list-style: none;
margin: 0;
}
#access .menu-header li,
div.menu li {
float: left;
position: relative;
}
#access a {
color: #aaa; ( серый цвет ссылок)
display: block;
line-height: 38px;
padding: 0 10px;
text-decoration: none;
}
#access ul ul {
box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
display: none;
position: absolute;
top: 38px;
left: 0;
float: left;
width: 180px;
z-index: 99999;
}
#access ul ul li {
min-width: 180px;
}
#access ul ul ul {
left: 100%;
top: 0;
}
#access ul ul a {
background: #333; (фон выпадающего списка)
line-height: 1em;
padding: 10px;
width: 160px;
height: auto;
}
#access li:hover > a,
#access ul ul :hover > a {
background: #333; (фон выделенного элемента)
color: #fff; (цвет выделенного элемента – цвет выделенной ссылки)
}
#access ul li:hover > ul {
display: block;
}
#access ul li.current_page_item > a,
#access ul li.current-menu-ancestor > a,
#access ul li.current-menu-item > a,
#access ul li.current-menu-parent > a {
color: #fff; (активная ссылка)
}
* html #access ul li.current_page_item a,
* html #access ul li.current-menu-ancestor a,
* html #access ul li.current-menu-item a,
* html #access ul li.current-menu-parent a,
* html #access ul li a:hover {
color: #333;
}

в скобках комментарии о том какой цвет за отображение чего отвечает.

Удачных вам экспериментов. Улыбка

16 Комментариев

  1. О, отлично, коллега! я правда не выдержал после того комментария, и после моего поста сам стал ковырять код и методом тыка узнал что меняется, но буду пользоваться твоим постом как шпаргалкой в будущем)) еще раз — спасибо за труд!

  2. вот бы узнать еще где таблицу цветов в #ХХХ формате. вот код цвета формата #ХХХХХХ можно получить например в фотошопе

  3. Владислав Храмцов
    vkontakte.ru Владислав Храмцов

    16.08.2011 at 21:28

    Привет, это просто например #333 это тоже самое что #333333 — только покороче — если за первой цифрой идёт пропуск (пробел) 3 то он дублирует значение первой цифры

    Примеры:
    #fff — #ffffff — белый
    #000 — #000000 — чёрный
    #666 — #666666 — тёмно-серый
    и тд.

    ссылочка на картинку: —
    http://www.cheat-sheets.org/saved-copy/colourchart.png

  4. Владислав Храмцов
    vkontakte.ru Владислав Храмцов

    16.08.2011 at 21:59

    Кстати у тебя сайт в синих тонах (задний фон), попробуй синюю полоску сделать и белую рамку выделения, должно здорово смотреться, а фиолетовые буквы лучше сделать чёрными. Фиолетовый цвет глаза напрягает. 🙂 А ты картинку в шапку будешь вставлять? Без картинки в шапке сайт как-то пустовато/ непривычно выглядит 🙂

  5. попробую с полосками и цветами) а шапка — так у меня же есть шапка! там картинка, все как обычно. я бы в шапку вообще бы вставил флешку, ту что сразу в посте приветсвия. не в курсе кода? как это сделать?

  6. Владислав Храмцов
    vkontakte.ru Владислав Храмцов

    16.08.2011 at 23:59

    Забавно — при загрузке страницы в Opera и обновлении страницы картинка пропадает и остаётся белый прямоугольник, а в ie сверху на картинке некрасивый красный крестик в левом углу. Чтобы вставить флеш шапку нужно править header.php и заменить почти весь код, сложная задачка 🙂

    ps — попробуй вместо png картинки вставить jpg, если у тебя в Opere такая же проблема будет.

  7. закачал jpg. а где меняется цвет рамки выбранного меню (если он вообще есть)? в статье чтото не вижу

  8. Владислав Храмцов
    vkontakte.ru Владислав Храмцов

    17.08.2011 at 20:56

    Фон выделенного меню — рамка вокруг ссылки, картинка в шапке теперь нормально видна, правильным путём идёте товарищ ;), советую поставить плагин Contact form 7 — и обратная связь будет как на моём блоге, а то неудобно твоё мыло выделять вставлять в почтовую программу — слишком долго, а так на мыло люди сразу написать могут. 🙂

  9. да! посмотрю)) спасибо! я кстати вставил флешку! получилось круто и изменений в коде совсем оказалось мало. но теперь не могу убрать полоску между меню и флешкой (чтобы меню было слитно). флешка вставляется только после картинки, т.е. полоска над флешкой это 2 полоски вехней и нижней обводки от прежней картинки, толщина которой сейчас 0. поэтому ее как бы нет

  10. а еще плохо то что флешка каждый раз обновляется при переходе в меню(

  11. Владислав Храмцов
    vkontakte.ru Владислав Храмцов

    25.08.2011 at 21:25

    /* This is the custom header image */
    #branding img {
    border-top: 4px solid #000;
    border-bottom: 1px solid #000;
    clear: both;
    display: block;
    }

    4px — это полоска над картинкой, поставь 0px и полоска исчезнет

  12. привет! не не поможет к сожалению. border-top и
    border-bottom получились обе вместе и висят над флешкой.:( ( как я уже писал что полоска над флешкой это 2 полоски вехней и нижней обводки от прежней картинки, толщина которой сейчас 0)

  13. тоесть флешку получилось всунуть После картинки с полосками. как всунуть код

    заместо картинки между бордерами я так и не понял.
    вставляется ниже или выше этого дела, а по середине полосок Php код вроде, я в нем вообще не силен

  14. Владислав Храмцов
    vkontakte.ru Владислав Храмцов

    25.08.2011 at 22:48

    php код вместо картинки шапки вешает миниатюру записи, его можно вырезать. Чтобы было проще
    скинь мне на почту файл header.php в который ты вставил код а я тебе попробую помочь, так проще будет 🙂

  15. подскажите а как отредактировать саму панель навигации?не фон? а сами страницы с их названиями?

Добавить комментарий

Your email address will not be published.

*

CAPTCHA image
*

© 2016 Moushe.ru При копировании материалов, ссылка на нас обязательна!

Вверх ↑



Яндекс.Метрика