Шпаргалка по стандартным стилям CSS для начинающих. Часть 2

Опубликовано: ADv Дата 07.10.2013 в рубрике Своя тема 1 комментарий

Продолжение статьи Шпаргалка по стандартным стилям CSS для начинающих. Часть 1

Стандартные стили визуального (WISIWYG) редактора

Визуальный редактор — одна из наиболее популярных и наиболее используемых фич WordPress. Именно поэтому хорошей идеей будет иметь список стилей, которые пользователь может добавить в свой блог, типа изображений или цитаты. Следующие CSS покажут вам, какие классы WordPress автоматически добавляет к этим элементам:

.entry-content img {}
.alignleft, img.alignleft {}
.alignright, img.alignright {}
.aligncenter, img.aligncenter {}
.alignnone, img.alignnone {}

.wp-caption {}
.wp-caption img {}
.wp-caption p.wp-caption-text {}

.wp-smiley {}

blockquote.left {}
blockquote.right {}

.gallery dl {}
.gallery dt {}
.gallery dd {}
.gallery dl a {}
.gallery dl img {}
.gallery-caption {}

.size-full {}
.size-large {}
.size-medium {}
.size-thumbnail {}

Вы видите, что тут несколько классов, которые относятся только лишь к изображениям. Если, например, пользователь решит вставить изображение, выравненное по левому краю, то WordPress добавит ему класс “alignleft”.

Стандартные стили виджетов WordPress

Виджеты — еще одна популярная фича WordPress. Как разработчик, вы должны контролировать, какие виджеты будут присутствовать в теме, поэтому вы должны знать какие конкретно стили нужно добавить.

.widget {}

#searchform {}
.widget_search {}
.screen-reader-text {}

.widget_meta {}
.widget_meta ul {}
.widget_meta ul li {}
.widget_meta ul li a {}

.widget_links {}
.widget_links ul {}
.widget_links ul li {}
.widget_links ul li a {}

.widget_archive {}
.widget_archive ul {}
.widget_archive ul li {} 
.widget_archive ul li a {}
.widget_archive select {}
.widget_archive option {}

.widget_pages {}
.widget_pages ul {}
.widget_pages ul li {}
.widget_pages ul li a {}

.widget_links {}
.widget_links li:after {}
.widget_links li:before {}
.widget_tag_cloud {}
.widget_tag_cloud a {}
.widget_tag_cloud a:after {}
.widget_tag_cloud a:before {}

.widget_calendar {}
#calendar_wrap {}
#calendar_wrap th {}
#calendar_wrap td {}
#wp-calendar tr td {}
#wp-calendar caption {}
#wp-calendar a {}
#wp-calendar #today {}
#wp-calendar #prev {}
#wp-calendar #next {}
#wp-calendar #next a {}
#wp-calendar #prev a {}

.widget_categories {}
.widget_categories ul {}
.widget_categories ul li {} 
.widget_categories ul ul.children {}
.widget_categories a {}
.widget_categories select{}
.widget_categories select#cat {}
.widget_categories select.postform {}
.widget_categories option {}
.widget_categories .level-0 {}
.widget_categories .level-1 {}
.widget_categories .level-2 {}
.widget_categories .level-3 {}

.recentcomments {}
#recentcomments {}
#recentcomments li {}
#recentcomments li a {}
.widget_recent_comments {}

.widget_recent_entries {}
.widget_recent_entries ul {}
.widget_recent_entries ul li {}
.widget_recent_entries ul li a {}

.textwidget {}
.widget_text {}
.textwidget p {}

В процессе стилизации виджетов вы столкнетесь с тем, что придется прописывать одинаковые стили снова и снова. По этой причине будет хорошей идеей скомбинировать классы в таблице стилей через запятую. Например, вы можете скомбинировать .widget_pages ul и .widget_archive ul вот таким способом: