24
Січ
0

Урок №22 Стилизуем сайдбар

Четверг, 3 декабря 2009 - Создание тем

После стилизации сайдбара, мы выйдем на финишную прямую нашего курса. Уже? Да, но не волнуйтесь. Я продолжу публиковать не на шутку учебные материалы по WordPress. Ведь в действительности всегда есть что-то без сомнения новое, чему можно научиться. Да и сам курс можно расширить и улучшить, чем я и займусь.

Сегодня вам не понадобитсяничего кроме файла стилей - откройте style.css в вашем редакторе.

Шаг 1

Введите эти строки под .sidebar{} :

.sidebar ul{ list-style-type: none; margin: 0; padding: 0 10px 0 10px; }

Тем самым мы придали стиль тэгу базового ненумерованного списка

    сайдбара, и теперь все вложенные UL-списки будут оформлены тем же стилем. В данном случае, это: никакого буллета, нулевые внешние margin и 10-пиксельные padding.

    Например:

    Урок №22 Стилизуем сайдбар

    Стиль первого UL-списка будет присвоен списку второго порядка (вложенному списку). Если вы присваиваете границу первому списку, второй тоже будет иметь границу (border).

    Cохраните и обновите браузер. Теперь элементы списка уже не маркированы с помощью буллетов.

    Обратите внимание на то, как нужно добавлять padding сверху и снизу в шаге 2.

    Шаг 2

    Введите следующий код под .sidebar ul{} :

    .sidebar ul li{ padding: 10px 0 10px 0; }

    Вот что вышло с padding:

    Урок №22 Стилизуем сайдбар

    Урок №22 Стилизуем сайдбар

    Почему мы не добавили 10-pх padding  UL-списку в первый раз. Вам необходимо отделить один элемент списка от другого. Перед тем как мы добавили padding к .sidebar ul li{} , между полем поиска и календарем не было промежутка, также его не было между Календарем и Страницами . Так вот, эти 10-пиксельные паддинги сверху и снизу от .sidebar ul li{} нужны для разбивки блоков. Если бы UL-тэг имел паддинг для всех четырех сторон, вместо всего лишь потрясающе слева и справа (0 10px 0 10px), в итоге у вас бы вышел 20-рх паддинг сверху или 20-рх паддинг снизу, если бы вы старались разграничить элементы списка после применения паддинга к UL. Понимаете, о чем я говорю?

    Если нет, ничего страшного, просто добавьте паддинг для .sidebar ul{} сверху и снизу и сами всё увидите .

    Шаг 3

    Введите более менее данный код под .sidebar ul li{} :

    .sidebar ul li h2{ font-family: Georgia, Sans-serif; font-size: 14px; }

    Не забудьте, что стилизация подзаголовка под .post{} не имеет значения, потому что вы отметили подзаголовки только под .post{}. Без сомнения сейчас же, вы придаете стиль незатронутым подзаголовкам в сайдбаре. Вот результат:

    Урок №22 Стилизуем сайдбар

    Вот как выглядит мой список ссылок Страницы . Более наверное у вас всего одна ссылка, О себе (About). Я добавил несколько ссылок и вложенных уровней страниц в мою локальную версию WordPress, чтобы посмотреть, как будут выглядеть ссылки нижних уровней. Обратите внимание на в самом деле ненужный на самом деле дополнительный padding внизу, я подчеркнул его красным. Это иллюстрация механизма присваивания стилей. 10 пикселей приплюсовались и получилось 20.

    Из-за того что вы добавили паддинг к .sidebar ul li{} , элементы списка низших уровней получили тот же паддинг. Чтобы исправить это, смотрите шаг 4 .

    Шаг 4

    Добавьте эти строки под .sidebar ul li h2{} :

    .sidebar ul ul li{ padding: 0; }

    Удивительно упорядоченные UL-списки в .sidebar ul ul li{} определяют, что цель – элементы списка нижних уровней. Напомню, что когда все параметры равны 0, вам не нужно ставить суффикс рх.

    Вот результат:

    Урок №22 Стилизуем сайдбар

    Строки находятся надо признаться слишком близко друг от друга, так что давайте зададим строкам высоту в 24px.

    Добавьте line-height: 24px; к .sidebar ul ul li{} .

    Урок №22 Стилизуем сайдбар

    Урок №22 Стилизуем сайдбар

    Пока это не смотрится неимоверно очень хорошо, но вы только учитесь, и со временем все получится, если только захотите. Также, если хотите, позже я смогу рассказать как управлять стилями для такого уже непопулярного элемента как календарь.

    На сегодня все. Урок окончен :)

wp-config.ru

Випадкові записи

Залиште свій коментар