Creating Your Own CSS Style in a WordPress Theme
The layout of WordPress includes the use of themes and templates. Remember that themes that are made with CSS Styles are already incorporated. However, you may be interested in adding more styles to make things stand out on your blog, for instance its title. Perhaps you would like to apply a different style to a certain header or title; however, you do not have the style you want. These directions are very helpful in creating Static pages in WordPress.
Creating Your Own CSS Style
1. Login to your WordPress Admin Panel. 2. Click on Presentation > Theme Editor. 3. When the Theme Editor Page loads, find the style.css sheet. Normally the Theme Editor page loads onto the CSS Styles page. 4. Scroll to the bottom of the page. You can add your new CSS Style here.
You may change it to what ever you wish, however, for the example you will need to enter the following code to you CSS Style Sheet.
.mytitle { color: #ff5500; background-color: transparent; font-family: verdana; font-size: 14px; font-weight: bold;}
This is basic CSS, you may however, choose a color rather than being transparent or you can add a border under your title. With CSS, the possibilities are endless. You can also change the name if you like; however pick a name that is easy to remember. You can save your newly created CSS Style by going to the bottom of the WordPress page and click Update File.
Using Your New CSS Style
As mentioned before, new CSS Styles in WordPress are often used in Static Pages. A Static Page is used in WordPress to offer you individual .htm or .html pages. It is easier to use Static Pages to create your home page, since the WordPress is blogging software. You can also use it for creating such pages as, Contact Me, FAQ and About Me, as well as so many more web pages that are interesting. You will place everything that you want on the home page in that one page in your WordPress Admin, when you create your new home page.
If you already have a home page or any other type of page, Go to your WordPress Admin Panel click on Manage > Pages. This will pull up a list of the pages you have already created.Click Edit on one of your pages. We will use one of my home page codes to offer you an example of what we are talking about while explaining this.After you click on Edit and the page loads, you should then click on the HTML icon in the window where you enter your content. Check out my homepage to understand what I am trying to explain.
On my home page, I have four main styles. I have content, headers, titles and links. My first bit of code looks like this:
<p class=”hpheaders”>Reality TV News</p><p class=”hptitle”>Kevin Convais is voted off American Idol</p><p class=”boxtext”>Kevin Convais stood in the bottom three along with Bucky Covington and Lisa Tucker. Unfortunately, Kevin Convais was the one to leave on 3-22-06.</p><p class=”hpheaders”>Latest Reality TV Recaps</p><p><a href=”http://www.newsalley.com/unan1mous-recap-3-22-06.htm”>Unan1mous
You will see that I have three classes, boxtext, hptitle and hpheaders. If you are familiar with CSS, you recognize that the link class does not show and this is why I do not have four classes to go with my four main styles. You will need to decide where you want to place that style in the code, to use the style that you just created in WordPress. Here, you will fine the code with out the styles included.
<p>Reality TV News</p><p>Kevin Convais is voted off American Idol</p><p>Kevin Convais stood in the bottom three along with Bucky Covington and Lisa Tucker. Unfortunately, Kevin Convais was the one to leave on 3-22-06.</p><p>Latest Reality TV Recaps</p><p><a href=”http://www.newsalley.com/unan1mous-recap-3-22-06.htm”>Unan1mous
Without any styles in it, this is how the code will look. For instance, if we wanted to add a style to the title “Kevin Convais is voted off American Idol”.
We would use the line <p>Kevin Convais is voted off American Idol</p>
At the beginning of the line enter <p class=”mytitle”> Replacing mytitle with what ever you choose to name your CSS Style at the beginning of this guide. Your line should now look like this:
<p class=”mytitle”> Kevin Convais is voted off American Idol</p>
Click Update and Save. This is all you have to do to add your own style.
A few more tips.
When creating your own code in WordPress:
Be sure to put your brackets in the right place } {Remember to place your ; after each lineRemember your . before the title of your new style.Remember your : after each name
.mytitle { color: #ff5500; background-color: transparent; font-family: verdana; font-size: 14px; font-weight: bold;}
You will do well to keep these in mind so that you do not spend endless hours in WordPress only to find you have left out some small but very important coding. Using your own styles can come in handy when using WordPress as a CMS. If you do have any questions, please feel free to contact me by email. I enjoy WordPress, and have no problem answering any questions or trying to help others understand how to use it.
