Change your WordPress theme with CSS

CSS To Customize The Theme

Here are some snippets (code snippets) that you can add to your file (style.css) to improve or change the design of your WordPress blog.

Add Rounded Edges In Images
Round the edges of your images with some CSS3.

img { 
-webkit-border-radius: 25px; 
-moz-border-radius: 25px; 
border-radius: 25px; 
}

Email Links With Images
Adds an icon or image all links emails.

a[href^="mailto:"] {  
     background: url(images/email.png) no-repeat rightright top;  
     padding-right:10px;  
}

For Quotes From Pretty
Give a new look to your Blockquotes.

blockquote { 
 background:#f9f9f9; 
 border-left:10px solid #ccc; 
 margin:1.5em 10px; 
 padding:.5em 10px; 
 quotes:"201C""201D""2018""2019"; 
} 
blockquote:before { 
 color:#ccc; 
 content:open-quote; 
 font-size:4em; 
 line-height:.1em; 
 margin-right:.25em; 
 vertical-align:-.4em; 
} 
blockquote p { 
 display:inline; 
}

Change His Lists Bullets
Tired of disks or circles to your lists? Try this snippet.

ul {list-style: none}
ul li {
 background-image: url("link-to-your-image");
 background-repeat: none;
 background-position: 0 0.5em;
}

Change The Color Of Selected Text

::selection {
 background: #93CE52; /* Safari */
 color: #ffffff;
 }
::-moz-selection {
 background: #93CE52; /* Firefox */
 color: #ffffff;
 }

Delete The Borders Around The Smilies
Add this code if you see unsightly borders around your smileys.

img.wp-smiley{ border:none;}

Also increase the space between the text and the smileys using a simple margin.

img.wp-smiley{ 
border:none;
margin:0 3px;
}

Center Your Website
This wrapper will focus your website and align text to the left by default.

#wrapper{ 
 width:960px; 
 margin:0 auto; 
 text-align:left; 
}

Add A Drop Caps
Two ways to proceed to style the first letter of a paragraph. The first requires you to do a span "firstcaracter" the first letter:

.firstcharacter { float: left; color: #903; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: Georgia; }

The following method requires no action on your part, but obviously does not work in IE 6, 7 and 8:

p:first-child:first-letter { float: left; color: #903; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: Georgia; }

Add A Loading Effect In Images
Add a small animated GIF pictures to your class so that it is displayed during charging. Very useful for blogs that contain many pictures in their content.

img {
 background: url(loader.gif) no-repeat 50% 50%;
}

To add a shadow effect In Division
Put your tracks in value with this simple shadow effect.

.h2, .h3, .h4 {
 text-shadow: 2px 2px 4px #666;
}

Add Jumps Printing
The print jump separates the contents of the rest when a user prints the page. It can be used just before the comments area and a new page will be printed for the latter.

.page-break{
 page-break-before:always;
}

Prevent Back To The Line Of Links
Use this code to ensure that the links will not be displayed on two lines. This code ensures that your links will start on a new line if they are too long.

a { white-space: nowrap; }

The Alternate Color Review
WordPress assigns a class to each comment posted; this code will allow you to alternate the background color of a comment to another.

li.even {
 list-style: none;
 background: #FFFF;
}
li.odd {
 list-style: none;
 background: #F9F9F9;
}

Adjust Space Between Letters and Words
Change the space between letters and words by adding "letter-spacing" and word-spacing "in your class" "header" properties.

h3 {
color: #FF0000;
font-size: 24px;
letter-spacing: 0.3em;
word-spacing: 0.2em;
}

Use The Pull Quotes To Improve Experience
Make your articles easier to read and improve the user experience by making "float" to the right or left of your content, all important quotes.

.pullquote {
width: 300px;
float: right;
margin: 5px;
font-family: Georgia, "Times New Roman", Times, serif;
font: italic bold #ff0000 ; }

Improve Styling And The "&"
For "&" (ampersand) personalized and unique.

.amp {
font-family: Baskerville, 'Goudy Old Style', Palatino, 'Book Antiqua', serif;
font-style: italic;
font-weight: normal;
}

After adding the above class, & stylize your placing this span:

<span>&amp;</span>

Styling In The Code Articles & Pages
The <pre> <code> and are frequently used to display code. The following code will allow you to make it easier to read.

pre {
 padding: 0.1em 0.5em 0.3em 0.7em;
 border-left: 11px solid #ccc;
 margin: 1.7em 0 1.7em 0.3em;
 overflow: auto;
 width: 93%;
 line-height: 1.6em;
 white-space: pre-wrap; /* css-3 */
 white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
 white-space: -pre-wrap; /* Opera 4-6 */
 white-space: -o-pre-wrap; /* Opera 7 */
 word-wrap: break-word; /* Internet Explorer 5.5+ */
 }
/* target IE7 and IE6 */
*:first-child+html pre {
 padding-bottom: 2em;
 overflow-y: hidden;
 overflow: visible;
 overflow-x: auto; 
 }
* html pre, { 
 padding-bottom: 2em;
 overflow: visible;
 overflow-x: auto;
 }

That's already enough to make ;) Do not forget to save before any modification, addition, be aware that JetPack can change the appearance of your site using CSS, but without changing your theme using a file custom CSS.

I hope you find these tips useful code, feel free to share your tips and tricks of your CSS by leaving a comment.

See more wordpress tutorial

• ADD TOOLTIPS IN YOUR ARTICLES
• 8 PDF PLUGINS FOR WORDPRESS
• 10 WORDPRESS HACKS EASY TO IMPLEMENT
• DISABLE PUBLISHERS THEME & WORDPRESS PLUGIN
• WORDPRESS SEO PLUGIN - DISCOVER LIVEOPTIM

Share it Please

Tweet