Новое в Expressive: вкусности для верстальщиков

May 26, 2012 23:36

В html-код стиля Expressive добавлены несколько дополнительных классов. Мне их там очень не хватало : )
Итак, что за классы:

.asset-entry-date - блок в шапке, содержащий дату поста (раньше был просто .asset-meta, теперь там два класса)
.asset-entry-links - блок со ссылками под постом (раньше тоже был просто .asset-meta)

Эти два класса позволят писать стили для даты или блока комментариев так, чтобы стили этих блоков не затрагивали друг друга. Кто пытался что-то делать с датой поста - меня поймет

В шапке добавились классы для пунктов меню:

.item-recent - Свежие записи
.item-archive - Архив
.item-friends - Друзья
.item-userinfo - Профиль

Обратите внимание, что это - классы пунктов списка, которые внутри себя содержат ссылки.
Для манипуляций со шрифтом/цветом текста после класса добавляйте тег ссылки A, например .item-recent A.

В списке ссылок под постом теперь тоже добавились классы, которые позволяют отличать одну ссылку от другой - как в Minimalism : ) Классы добавлены пунктами списка (LI).

.item-read - читать комментарии
.item-reply - ответить
.item-edit_entry - редактировать запись
.item-edit_tags - редактировать метки
.item-mem_add - добавить в избранное
.item-share - поделиться
.item-watch_comments - подписаться на комментарии
.item-flag - пожаловаться на запись
.item-link - ссылка на пост

Что с этим можно сделать?
Например, убрать все ссылки под постом, кроме ссылок на комменты:



Примерный код:

.post-asset LI.item-edit_entry, .post-asset LI.item-edit_tags, .post-asset LI.item-mem_add, .post-asset LI.item-share, .post-asset LI.item-watch_comments, .post-asset LI.item-flag, .post-asset LI.item-link { display: none !important; }

Или покрасить каждую ссылку в свой цвет:



Примерный код:

.asset-entry-links LI.item { display: inline-block !important; margin: 3px; border-radius: 5px; } .post-asset .asset-entry-links LI A { display: block; text-decoration: none !important; color: #FFF !important; } .post-asset LI.item-read { background: darkviolet; } .post-asset LI.item-reply { background: crimson; } .post-asset LI.item-edit_entry { background: coral; } .post-asset LI.item-edit_tags { background: gold; } .post-asset LI.item-mem_add { background: yellowgreen; } .post-asset LI.item-share { background: skyblue; } .post-asset LI.item-watch_comments { background: steelblue; } .post-asset LI.item-link { background: darkblue; }

Играйтесь : )

useful: уроки по оформлению ЖЖ, useful: новое в ЖЖ

Previous post Next post
Up