Урок 257 як прикрасити сайт за допомогою css до будь-якого свята

Новий рік до нас мчить, скоро все станеться ... Ось і будемо готуватися до приходу свята і прикрасимо свій блог тематичний елементами.

Отримані навички дозволять надати індивідуальності сайту під будь-яке свято. До того ж, запропоновані «прикрашення» не сильно напружувати відвідувачів.

Прикрашати ми будемо без застосування плагінів, а скористаємося невеликою вставкою коду і правкою файлу стилів сайту (style.css, css.css або інша назва).

Перш, ніж проводити будь-які роботи з кодом файлів шаблону, зробіть резервну копію редагованого файлу. Для самого ж редагування рекомендується скористатися безкоштовною програмою Notepad ++.

1. Змінюємо маркований список

У переважній більшості блогів подібний маркований список має знак квадрата навпроти елемента, або чорний коло. Подивіться на свій сайт і переконайтеся в цьому.

На wpnew.ru маркований список відображається таким чином:

Давайте замінимо дані знаки картинкою. У нашому випадку можна поставити різдвяний дзвіночок, або ялинку.

Отже. Знайшли в якому рядку файлу стилю у нас стоїть атрибут list-style (в правому нижньому віконці Firebug пише номер рядка). Тепер замінюємо його параметри на блокуючі:

Після блокування потрібно прописати шлях до нашої картинки. Для цього потрібно в файлі стилів додати новий рядок з наступними параметрами:

Тут показано на прикладі верстки шаблону wpnew.ru. Початок .hentry-content ul ми взяли з попереднього пункту і додали li. який дає зрозуміти браузеру, що далі потрібно відображати картинку для кожного пункту в маркірованих списках.

У параметрі background ми вказали шлях до картинки (в даному випадку вона лежить в папці шаблону images). Інші параметри скопіюйте. Цифра 7 показує вертикальний відступ картинки. Цифра 0 - горизонтальний відступ. Міняйте їх, поки не знайдете потрібно вам значення (Firebug в допомогу)

Так само не забудемо про padding, який означає тут відступ тексту від картинки. Запам'ятовуйте як описуються відступи в пікселях:

Якщо цифри однакові, то можна написати як в прикладі padding: 14px ;.

2. Міняємо стиль курсора на довільний

Тепер замінимо стандартну «руку» курсору, яка з'являється при наведенні на посилання, на будь-який інший малюнок (ялинку, цукерку, Діда Мороза ...). Відвідувачам сайту сподобається подібна штука.

Так само необхідно обчислити назву класу для тіла стати, а точніше для посилання. На wpnew.ru відкриваємо FireBug, підводимо його на будь-яке посилання в статті і дивимося праворуч клас - він буде .hentry-content a (безпосередньо клас hentry-content, буква a - тег посилання, для якої ми і будемо робити).

У файлі стилів прямо під шуканої рядком прописано .hentry-content a: hover. В даному випадку hover позначає, що такі параметри будуть працювати, якщо курсор наведений на посилання. Це саме те, що ми шукаємо. Додаємо до цього рядка з hover до вже існуючих параметрах:

3. Геть Людини-загадку

Далі необхідно зробити невелику вставку коду в файл functions.php, який знайдете у себе в папці шаблону сайту. Відкриваємо його, перегортаємо в самий кінець і, перед закриває символом?> Вставляємо наступне:

Післямова

На сьогодні закінчили. Пробуйте, тільки не забувайте робити резервні копії файлів на всякий випадок.

З повагою, Петро Александров