Dottoro Theme Documentation

Tutorial to get your theme to work

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.

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;
}