n-wp.ru — блог о WordPress
Как выделить (оформить) отдельные пункты в посте особым цветом и картинками | n-wp.ru

Как выделить (оформить) отдельные пункты в посте особым цветом и картинками

Часто многие блогеры оформляют особым образом некоторые части своего поста. Особенно стараются выделять важные разделы, касаемые скачивания или демонстрации.

2009-05-25_123242

Подглядел идею, как можно красиво оформить такие плюшки силами CSS.

В файле CSS вашей темы WordPress нужно выделить такие места особым образом. Для этого дописываем в нем такой код:

Этот код поможет заключить все, что мы пометим при написании поста, как download, в рамочку с определенным цветом фона и картинкой перед словами (красивую стрелочку вниз видите?).

Чтобы пометить такой текст, нужно при написании поста выделить его, как цитируемый класс class=»download»в исходном коде текста:

Как вы уже поняли, таких плюшек можно в CSS понавтыкать сколько угодно, со своей картинкой (картинки предварительно заливаются на сайт), а потом просто грамотно пользоваться исходным кодом, дописывая в цитирование название класса.

tiaurus

Являюсь создателем n-wp.ru — блога о WordPress для новичков. Мне интересно многое, поэтому еще я сделал 123-box.ru — блог о программах для Windows, и tiaurus.info — блог о красоте.

6 комментариев

  • Самый обычный CSS )
    А вот бы это средствами GUI, чтоб в код не лезть… Но всем лень, ведь это «два щелчка»… Э-эх…

  • А как средствами GUI можно сделать часть поста? Я знаю только один пока что работающий вариент — ставить расширенный редактор, например, TinyMCE. Тогда с его помощью можно и картинки всталять, и фон менять.

  • Можно уменьшить одно телодвижение (добавлять часть поста как цитату с цсс) поработав раз с дополнительными полями. Очень гибконастраиваемая и удобная штука.

  • А где ещё можно посмотреть образцы оформления статей новостей текста и желательно с примерами кода ?

/* ]]> */