Dottoro Theme Documentation

Tutorial to get your theme to work

PrologueFirst StepsFront PageCreating a custom front pageBlog, News and Portfolio post typesPost Type specific settingsGeneral settingsSingle post settingsCategory / Tag / Date archive page settingsPermalink settingsOptions on single post pagesGeneral page optionsImage optionsGallery settingsPage Templates and PagesPage SettingsPage TemplatesPages created from page templatesGeneral page settingsGallery settingsBlog page settingsNews page settingsPortfolio and Imagefolio page settingsContact page settingsArchives page settingsAuthors page settingsBoomarks page settingsSitemap page settingsSpecial pagesCategory and tag page settingsArchive and date page settingsSearch page settingsAuthor page settings404 page settingsHeader and MenuSubheadersSubheader specific shortcodesPredefined SubheadersCreating SubheadersAssigning subheaders to pagesFooterWidgets in the FooterCopyright and other notices in the FooterSidebarWidgets on the SidebarWidth and alignment of the sidebarWidget AreasWidgetsBreadcrumbShortcodesShortcodes In Alphabetical OrderShortcodes By CategoriesNested ShortcodesPost TemplatesOverlaysMedia and External MediaOverview of galleries, gallery listings and slideshowsGalleries and Gallery ListingsAbout Galleries In GeneralCreating And Managing Galleries[gallery_list] shortcodeSlideshows and Popup SlideshowsSlideshowsPopup SlideshowsSlideshow SettingsMost Often Used Slideshow OptionsAll Slideshow OptionsSlideshow Templates - Slideshow Specific ShortcodesStyling Guide For SlideshowsStyling Of Slideshow and Post TemplatesSlidesPopupsSelectorsWeb FontsGeneral Theme SettingsUser RolesExport / Import SettingsCreating theme designsLocalizationHeadingsChild ThemesCSS ClassesResponsive DesignCSS Extension JavaScript ToolkitJavaScript LibraryAction HooksFilter HooksCompatibility Issues
<

29. CSS Classes

Dottoro theme and WordPress together apply a lot of different CSS classes to different elements to make it easier to customize the look of your website. In the followings the most important and most commonly used classes are mentioned.

Note: It is strongly advised to use a child theme for customization.

29.1 Body CSS Classes Based On Page Types

These CSS classes allows you to customize the look of your pages based on their type.
The following CSS classes are added to the HTML body element:
Page Type CSS Classes
404 error404
Archives page_archives
Author author
Authors page_authors
Blog post_type_blog
page_blog
Blog category post_type_blog
category
Blog date post_type_blog
date
Blog post post_type_blog
single-post
single
Blog tag post_type_blog
tag
Bookmarks page_bookmarks
Contact page_contact
Imagefolio post_type_portfolio
page_imagefolio
News post_type_news
page_news
News category post_type_news
category
News date post_type_news
date
News post post_type_news
single-news
single
News tag post_type_news
tag
Portfolio post_type_portfolio
page_portfolio
Portfolio category post_type_portfolio
category
Portfolio date post_type_portfolio
date
Portfolio post post_type_portfolio
single-portfolio
single
Portfolio tag post_type_portfolio
tag
Search search
Sitemap page_sitemap
In addition, there is a Body CSS Class option for every page and post that allows you to add one or more custom CSS classes to the body.
How to use them?
For example, if you want to change the background color of the search page:
.search {
	background-color: red;
}
To change the background color of single post pages in all post types:
.single {
	background-color: red;
}
To change the background color of single news item pages:
.post_type_news.single {
	background-color: red;
}
or:
.single-news {
	background-color: red;
}
To change the background color of category pages in all post types:
.category {
	background-color: red;
}
To change the background color of news category pages:
.post_type_news.category {
	background-color: red;
}

29.2 CSS Classes For Post Lists

These CSS classes allow you to customize the look of blog, news and portfolio post lists separately; single-, two-, three- and four-column layouts separately and much more. They play an important role in responsive design.

Every list has two wrapper elements: an outer wrapper that sourrounds the inner wrapper that holds the list items.

The following CSS classes are added to the outer wrapper:
CSS class Description
post_list Identifies a blog post list.
news_list Identifies a news item list.
portfolio_list Identifies a portfolio item list.
mixed_postlist Identifies a list that can contain blog, news and portfolio posts, as well. Mixed lists are displayed on search, author and 404 pages.
The following CSS classes are added to the inner wrapper:
CSS class Description
grid_list Identifies a list that has a grid layout.
newspaper Identifies a list that has a 'newspaper' layout (the cell height is determined by its content).
list_1_col Identifies a single-column list.
list_2_col Identifies a 2-column list.
list_3_col Identifies a 3-column list.
list_4_col Identifies a 4-column list.
The following CSS classes are added to the list items:
CSS class Description
col1 Assigned to each item in a single-column list.
col2 Assigned to each item in a 2-column list.
col3 Assigned to each item in a 3-column list.
col4 Assigned to each item in a 4-column list.
col_idx_1 Assigned to each item in the first column of a list.
col_idx_2 Assigned to each item in the second column of a list.
col_idx_3 Assigned to each item in the third column of a list.
col_idx_4 Assigned to each item in the forth column of a list.
first_col Assigned to each item in the first column of a list. Same as col_idx_1.
last_col Assigned to each item in the last column of a list.
row_idx_n n = 1, 2, 3, ... Assigned to each item in the n-th rows of a list that has a grid layout.
idx_0mod2 Assigned to the 2-th, 4-th, 6-th, ... items in a list that has a grid layout. Indexes start from 1 and go left to right, then top to bottom regardless of the rendering order of the list.
idx_1mod2 Assigned to the 1-th, 3-th, 5-th, ... items in a list that has a grid layout. Indexes start from 1 and go left to right, then top to bottom regardless of the rendering order of the list.
idx_0mod3 Assigned to the 3-th, 6-th, 9-th, ... items in a list that has a grid layout. Indexes start from 1 and go left to right, then top to bottom regardless of the rendering order of the list.
idx_1mod3 Assigned to the 1-th, 4-th, 7-th, ... items in a list that has a grid layout. Indexes start from 1 and go left to right, then top to bottom regardless of the rendering order of the list.
idx_2mod3 Assigned to the 2-th, 5-th, 8-th, ... items in a list that has a grid layout. Indexes start from 1 and go left to right, then top to bottom regardless of the rendering order of the list.
idx_0mod4 Assigned to the 4-th, 8-th, 12-th, ... items in a list that has a grid layout. Indexes start from 1 and go left to right, then top to bottom regardless of the rendering order of the list.
idx_1mod4 Assigned to the 1-th, 5-th, 9-th, ... items in a list that has a grid layout. Indexes start from 1 and go left to right, then top to bottom regardless of the rendering order of the list.
idx_2mod4 Assigned to the 2-th, 6-th, 10-th, ... items in a list that has a grid layout. Indexes start from 1 and go left to right, then top to bottom regardless of the rendering order of the list.
idx_3mod4 Assigned to the 3-th, 7-th, 11-th, ... items in a list that has a grid layout. Indexes start from 1 and go left to right, then top to bottom regardless of the rendering order of the list.

29.3 CSS Classes For Single Posts

These CSS classes are: post_author, post_category, post_comments, post_date, post_meta, post_more, post_tags, post_title.

In addition, there is a Post CSS Class option for every post that allows you to customize the look of posts separately.

How to use them?
For example, if you want to change the look of the title of news items:

On single news item pages:

.single-news .post_title {
	color: red;
}

In news lists:

.news_list .post_title {
	color: red;
}

Changes in version 1.13
CSS classes for news and portfolio items have been renamed in Dottoro theme 1.13 to make them consistent with blog posts. Please rename them in the style.css file of your child theme to make them compatible with the latest theme version. These CSS classes are:
From To
news_author post_author
news_category post_category
news_comments post_comments
news_date post_date
news_meta post_meta
news_more post_more
news_tags post_tags
news_title post_title
folio_author post_author
folio_category post_category
folio_comments post_comments
folio_date post_date
folio_meta post_meta
folio_more post_more
folio_tags post_tags
folio_title post_title
So for example, if the style.css file of your child theme contains this rule:
.news_title {
	color: red;
}
change it to:
.single-news .post_title, .news_list .post_title {
	color: red;
}