« Static content - how to add it | Home | Upgrading your blog to the lateset version »
Fonts - How do I change them?
By Mike | February 2, 2007
This is the next in a series of posts answering the questions that were asked in the survey below. If you have not added yours feel free to do so now. Your question may be answered here.
====> Survey Question
In most themes your font size and styles are controlled by your css file. If you are in your theme editor it is usually called the stylesheet or if you are looking for the file through FTP it will be called style.css and will be found in your theme folder. In the case of this blog I use the Regulus theme and this blog is in the blog directory the path to style.css would be public_html/blog/wp-content/themes/regulus/style.css.
This will in no way be a complete tutorial on css but I will try to shed some light on what the various code does on this page in a piece by piece manner.
To learn more about all the things you can do there are various tutorials available online and a quick search of Google will give you quite a few places for much more involved information thatn I will go into here.
As with all editing of the theme for your blog make a back up copy before you start. This way if you make a mistake and I always seem to at least once in a while 
you will be able to return to the format you had.
* {
margin:0; padding: 0;
font:1em ‘Lucida Grande’, ‘Lucida Sans Unicode’, Verdana, Sans-Serif;
}/* ———————————
- GENERIC GUFF (APPLIES SITE WIDE) -
——————————— */
body {
font-size:0.625em;
_font-size:10px;
text-align:center;
background: url( images/bg_body.gif ) repeat-x top #eef;
}
The above is the start of the code for this theme. The first section designates the font type for the blog. The items after body tells how big the font will be on this blog, the default alignment and the background image that will be used.
There will be different sections that will change the look of different parts of the blog depending on what are the css file is controlling. On the theme that I am using all of the post attributes are listed under content. If I want to change the size of the font of the posts that is where I would do it if it is defined in this section. On this particular theme it is not so the font size will be controlled by the body section.
/* ————-
- MAIN CONTENT -
————- */#content {
width:460px;
float:left;
font-size:1.2em;
overflow:hidden;
border-left:12px solid #fff;
border-bottom:20px solid #fff
}.leftAlign #content {
float:right;
border-right:12px solid #fff;
border-bottom:20px solid #fff
}#content p, #content li {
color:#666;
}#content h2 {
font-size:1.6em;
margin:24px 0 4px 0;
}#content h2 em {
font-size:0.7em;
margin:0 0 0 1em;
color:#99c;
font-style:normal;
}#content h2 a {
color:#333;
border:none;
}#content h2 a:hover {
color:#68f;
}
The author of the css file has made notations to tell which parts are controlled where and that is usually the case.
The first section designates how big the content area will be 460 px wide and aligned left with a 12px white border to the left and a 20px white border at the bottom. This is an area you will rarely touch as it can throw your whole template structure out of alignment.
The next section sets the placement for when you use left align and adds in the margins for the right hand side of your post again at 12px so that your content has equal margins.
The next area defines the color for your text when it is in p tags or li tags.
Finally the rest of the code defines the attributes of the h2 tag when used in your post and title. First the size within the title then the size when used in your content area. The last 2 sections define the color of the h2 tag when used as a link. If you go to the top of the post and hover over the title you will see the color change to a blue (#68f) as the post title is linked to the single page for this post.
The css file will continue to define the various attributes of different tags within the content area. If it is not specified as to be different it will use the attributes listed at the body area. The actual place to change the font attributes of size and color on this theme is in the first blockquote area where the size is set at 10px but until you have checked the content area you won’t know for sure.
Related posts
|
My Own Secret Weapons >>> |
Topics: questions | We do follow trackback