How to create wordpress theme from scratch, Lesson -7-: stylize wordpress theme with CSS part 1
SS is what we are going to talk about today. Using CSS is very important for styling your theme. so you should have at least a simple knowledge about CSS, I will try to demonstrate the outlines but if you want to get a unique design for your theme you should learn CSS. You can start from here.
http://www.w3schools.com/css/default.asp
Till now we finished dealing with the main code of wordpress theme (except comment.php, I will talk about it after a few lessons) and I will start talking about how to make the design of your theme. Typically, the wordpress theme contains of the header part (where your header will be) content part (where your posts will be) and footer part (where your footer will be).
CSS page contains a group of DIV tags that enclose a certain elements inside this DIV tag and separate it from the others. ID and CLASS are commands used to give a “name” to a certain CSS format. you used them when you want to apply a certain formatting style at specified areas. The difference between them is an ID can be used once per page but a CLASS can be used throughout a page. We should use (DIV, ID, CLASS) in the theme pages like index.php, sidebar.php…ect.
In style.css file I will set a properties to these DIV tags by using “#” to represent ID and “.” to represent CLASS.
Now let’s begin…
Step*1: we already created a CSS file before in lesson -1-, open it and of course you should open (xampp control, your browser and style.css). You will find this code in your CSS file:
/* Theme Name: 1theme Description: my theme. Author: your name */
As I said before, this code to name your theme and to make it easy for you to recognize it in your dashboard.
Now type in style.css file the following code, and save.
body{
margin: 0;
font-family: Arial, Helvetica, Georgia, Sans-serif;
font-size: 12px;
text-align: left;
vertical-align: top;
background: #ffffff;
color: #000000;
}
this code means that for the body tag which is <body>, use these properties:
margin: 0; for setting the margin property to 0.
font-family: Arial, Helvetica, Georgia, Sans-serif; for choosing the kind of font we want to use for writing posts.
font-size: 12px; for determining the font size.
text-align: left; for determining the alignment of the text.
vertical-align: top; for setting the vertical align.
background: #ffffff; for setting the background color.
color: #000000; for setting the color of the font.
and for the last two steps, we will use only colors that written in hexadecimal format. If you don’t have an idea about that, visit these sites, they give you a simple way to choose the color you want and give you the color number in hexa. Also you can always use the color schema to blend colors in your site to get a proper design.
http://www.colorcombos.com/
or
http://www.colorschemer.com/schemes/
Step *2: Type the following codes under the the body{ } selector:
a:link, a:visited{
text-decoration: underline;
color: #336699;
}
this code is used for styling the links and visited links in your website. I set the (text-decoration) property to underline and give it a color.
Step *3:add this code under under the previous one, and save.
a:hover{
text-decoration: none;
}
this code is to make sure that the underline for links disappears when you pass the mouse over the link.
Ok …that’s it for this week lesson. Seeya Next week.
[...] This post was mentioned on Twitter by french_ designer, french_ designer. french_ designer said: How to create wordpress theme from scratch …!!! Lesson -7- http://goo.gl/fb/v08FO [...]
great information you write it very clean. I am very lucky to get this tips from you.
Thanks for making my morning a little bit better with this great article!!
happy for you…keep on visiting…
thanks to your ideas , i¡¯d adore to adhere to your weblog as usually as i can.possess a good day
Thanks for good information that comes out to
read.
Thanks for sharing this.
Nice blog!This article was extremely fascinating. This was a excellent piece of writing. Do go on as you are. Appreciate you for sharing.