Страшненький скин, который мы с Вами сваяли в течение прошлых уроков нуждается в серьёзном охорашивании. И проще всего это сделать, используя файл style.css.
В самом простом случае нам с Вами придётся отредактировать стили следующих тэгов:
<body> – основной не форматированный текст
<h2> – тэг заголовка 2 уровня
<p> – тэг форматированного текста
<ul> – тэг ненумерованного списка
<a> – тэг ссылки.
Кроме того, в отдельные классы оформления вынесем:
.hdr – заголовок статьи
.postmetadata – сведения о рубрике и авторе записи
.foot – подвал (пятка) блога
.side – панель навигации
.calendar – календарь записей
.utils – дополнения к записи (счётчик комментариев, trackback-и и пр.)
Классы потребуют от нас дополнительного кода в страницах шаблона. Но обо всем по порядку(по алфавиту, то есть):
a{text-decoration: none}
body{font-family: Arial, Helvetica, sans-serif; font-size: 0.9em}
h2{padding: 0px; margin: 0px; font-size: 1.8em; text-align: center; vertical-align: middle}
p {margin: 10pt}
ul{margin: 5px; padding: 0px; list-style-type: none}
Со следующими шагами – сложнее. К примеру, стиль calendar потребует от нас добавить описание в файл sidebar.php:
<tr> <!—Блок графического календаря за месяц, с указанием дат записей блога —>
<td>
<li><h3>Календарь:</h3>
<div class=»calendar»><?php get_calendar(3); ?></div>
</td>
</tr>
и только тогда строка
.calendar{font-size: 0.9em; text-align: center; background-color: #FFFEF0}
в файле style.css даст требуемый эффект.
Изменив в том же sidebar.php ещё одну строку:
<table class=»side»>
<tr> <!—Блок информации об авторе блога… —>
<td>
<li><h3><?php _e(‘Автор:’); ?></h3>
<ul><li>Сюда пишете краткую информацию о себе… или о хозяине блога, если это не Вы</a></li></ul>
</td>
</tr>
и внеся в style.css
.side{background-color: #F0FFF7; list-style-type: none}
раскрасим фон и уберем точки в начале заголовков меню
Для активации
.foot{background: #F0F8FF; font-size: 0.7em}
в файле footer.php надо изменить содержимое так:
<td colspan=»2″ class=»foot»>
<center>
<?php bloginfo(‘name’); ?> работает на движке от
И в завершении первого подхода к CSS–файлу, внесем в index.php следующие изменения:
<?php while (have_posts()) : the_post();?> <!—Выводим содержимое статьи—>
<div>
<div>
<?php the_date(»,'<h4>’,'</h4>’); ?>
</div>
</div>
<table width=»99%» class=»hdr»><tr><td>
<h2 id=»post-<?php the_ID(); ?>»><a href=»<?php the_permalink() ?>» rel=»bookmark» title=»Статическая ссылка на <?php the_title(); ?>»><?php the_title(); ?></a></h2>
</td>
</tr></table>
<p class=»postmetadata»>Рубрика <?php the_category(‘, ‘) ?> автор — <?php the_author() ?> <?php edit_post_link(‘Править’,'<strong>(‘,’)</strong>’); ?></p>
<p><?php the_content(‘Читать далее…’);?></p><div class=»utils»><?php comments_popup_link(‘Комментировать »’, ‘1 Комментарий »’, ‘% Комментария »’); ?></div> <!—Счётчик комментариев—>
<p><?php comments_template(); ?></p> <!—Форма комментариев (отображается при чтении одной статьи)—>
Как видите, заголовок я поместил в таблицу. Во-первых, потому, что стили отображения CSS (display: )несколько искажаются в Опере. Во-вторых, потому, что теперь для добавления кнопок из плагинов можно просто указать “карман”, написав вместо </tr></table>
<td width=»40px»>/*Здесь – Ваши кнопки*/</td></tr></table>
и отображение не покорёжит в оконном режиме браузера.
Осталось в файле style.css написать:
.hdr{background: #F0F8FF; vertical-align: middle}
.postmetadata {font-weight: bold}
.utils{background-color: #F0F8FF; text-align: right}
и посмотреть на нововведения.
На сегодня – всё. Поэкспериментируйте со стилями сами.
А в будущем нас ожидает тонкая доводка css под различные браузеры и курс “похудения” для кода.
Удачи Вам.
