Expert Group of programming
Loading...

Default WordPress Generated CSS Cheat Sheet

Posted by : Heycode Tech | Posted in : Download, wordpress, WordPress Functions, WP CSS | Oct 31,2015 | 0 comments

WordPress is the most popular CMS in the world and it has provided the full control on our design. Now when we are creating an theme then we can write the CSS on file : style.css : and make the design as per own requirement.

default-css

WordPress generates the default CLASSES and ID's automatically , when we call the default module of WP like
i ) – widget
ii) – Menu
iii)- Attachment image
iv) – Set featured image
v ) – Page listing,post listing
etc

So when you are developing a theme then you need to write the css of these module also. Then your theme will developed as per WordPress standard rule.

Now here I ‘m describing about the default wordpress CSS as well as classes.

Copy this default CSS and past in own theme file :style.css : .
You can download this default css also : Download Default CSS

/* =WordPress Core
-------------------------------------------------------------- */
.alignnone {
    margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

.alignright {
    float:right;
    margin: 5px 0 20px 20px;
}

.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}

a img.alignnone {
    margin: 5px 20px 20px 0;
}

a img.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto
}

.wp-caption {
    background: #fff;
    border: 1px solid #f0f0f0;
    max-width: 96%; /* Image does not overflow the content area */
    padding: 5px 3px 10px;
    text-align: center;
}

.wp-caption.alignnone {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
    margin: 5px 0 20px 20px;
}

.wp-caption img {
    border: 0 none;
    height: auto;
    margin: 0;
    max-width: 98.5%;
    padding: 0;
    width: auto;
}

.wp-caption p.wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    margin: 0;
    padding: 0 4px 5px;
}

/* Text meant only for screen readers. */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-size: 0.875rem;
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000; /* Above WP toolbar. */
}

These CSS have provided by the WordPress . But I ‘m recommended some other CLASSES also which is very important for developing a standard theme as per WordPress standard rule .

Advice for other Important theme,Classes

I have strong knowledge of the WordPress and have experienced for theme development. So many times, I have suffered for breaking the design so I ‘m describing some classes and request the admin to take advice to own designer and confirm that these classes are present in our theme or not.

If these classes style i.e CSS is not present then request for designer to write these style i.e CSS on these classes also.

Here is the classes :

.gallery {}
.gallery a {}
.gallery img {}
.gallery-caption {}
.size-full {}
.size-large {}
.size-medium {}
.size-thumbnail {}

/* when category widget is called then default classes */
 li.categories {}  
 li.cat-item {}
 li.cat-item-{id} {}
 li.current-cat {}
 li.current-cat-parent {}
 ul.children {}
/*widget category end */

/* Page Listings */

.pagenav {}               
.page_item {}             
.page-item-{id} {}        
.current_page_item {}     
.current_page_parent {}   
.current_page_ancestor {} 

/* Comment Styles */
.commentlist .reply {}
.commentlist .reply a {}
.commentlist {}
.commentlist li {}
.commentlist li p {}
.commentlist li ul {}
#cancel-comment-reply {}
#cancel-comment-reply a {}
.commentlist .comment-meta {} 
.commentlist .comment-meta a {}
.commentlist .commentmetadata {}
.commentlist .commentmetadata a {}

I hope that when you are developing a new theme then you will write the CSS of these classes also.

Most default classes : Widget classes

It is very important class and you ought to write the style i.e CSS of these classes. Here I ‘m describing these classes .

/*  WordPress Widgets Classes */

.widget {}

/* Default style of widget */
.widget_links {}
.widget_links ul {}
.widget_links ul li {}
.widget_links ul li a {}


/* Specially for recent-comments widget */
.recentcomments {}
#recentcomments {}
#recentcomments li {}
#recentcomments li a {}
.widget_recent_comments {}

/* Specially for search widget */
#searchform {}
.widget_search {}
.screen-reader-text {}

/* Specially for text widget */
.textwidget {}
.widget_text {}
.textwidget p {}

/* Specially for meta widget */
.widget_meta {}
.widget_meta ul {}
.widget_meta ul li {}
.widget_meta ul li a {}

/* Specially for pages widget */
.widget_pages {}
.widget_pages ul {}
.widget_pages ul li {}
.widget_pages ul li a {}

/* Specially for recent-posts widget */
.widget_recent_entries {}
.widget_recent_entries ul {}
.widget_recent_entries ul li {}
.widget_recent_entries ul li a {}

/* Specially for archives widget */
.widget_archive {}
.widget_archive ul {}
.widget_archive ul li {} 
.widget_archive ul li a {}
.widget_archive select {}
.widget_archive option {}

/* Specially for tag-cloud widget */
.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 {}

/* Specially for calendar widget */
.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 {}

/* Specially for category widget */
.widget_categories {}
.widget_categories ul {}
.widget_categories ul li {} 
.widget_categories .level-0 {}
.widget_categories .level-1 {}
.widget_categories .level-2 {}
.widget_categories .level-3 {}
.widget_categories ul ul.children {}
.widget_categories a {}
.widget_categories select{}
.widget_categories select#cat {}
.widget_categories select.postform {}
.widget_categories option {}

widget is the most important feature of the WordPress and you need to write the style. Now WordPress have default widget and I understand that in the development time, you don’t need to use all but in future when you are going to use it then it breaks your design because at the development time, you don’t write the CSS of these default widget.

So recommended to you, please be insure of these CLASSES and must be check these styles.

So at last I want to say to all that I have done lot of research and write here and if still any problem then please share with me and I will added in that article .

Your comment will appreciate me so let’s start and do the comment.

Tags:

Author information - Heycode Tech

Every world can ask question and my website registered user give the suggestion.

See all posts by Author

Connect to author

About us

Heycodetech is a platform where you can ask any questions related to the programming like PHP,jQuery, MYSQL,HTML , CSS and moreHere is the Expert group of programming.