May 122015
 

Last Updated: June 18, 2016

KompoZer Right Sidebar Style shows you how to add div tags to the sidebar. Add color and style to the title and content on the sidebar.

Latest News: I have added another link to the menu.

In this lesson you will learn how to add more div tags and create a nice sidebar layout with color. This method is usually used to add some ads, more menus, special information, latest post, latest replies and more.

KompoZer Right Sidebar Style Steps

Step 1 ) In the following example I will add 3 div tags to the rightsidebar. This allows you to create different boxes for you to add menus, ads, information and more.

Using kompoZer CSS editor add the following id #titlestyle, #rmenubox1, #rmenubox2 and #rmenubox3. In this example I have also created a rmenu class. The rmenu class gives you more control over the right side div tags. Remember that currently the rigtht side bar is control by the id=”rightsidebar”.

You also have to add <div></div> tags using the same method learned in the following URL Div Tag Container, or click on the Source tab as showing in the image below and copy and paste the following HTML code. Copy and paste is quicker than following the method from the URL above.

Important: Make sure that you type the HTML code in the right area of the webpage as pointed out in the image below.

HTML Code To Type:

<div class=“rmenu”>
<div id=“rmenubox1”>
<div id=“titlestyle”> Title 1 </div>
</div>
<div id=“rmenubox2”>
<div id=“titlestyle”> Title 2 </div>
</div>
<div id=“rmenubox3”>
<div id=“titlestyle”> Title 3 </div>
</div>
</div>

Step 1-1 ) The following image shows you where to copy and paste the HTML code.
    kompozer-right-sidebar-style-html-code
Step 1-2 ) In the following image you can see the div tags with the following Title 1, Title 2 and Title 3. At the moment it is looking plain and simple with no color or style.
kompozer-right-sidebar-style-div-tags
Step 2 ) I will add 3 different colors. One color for each div tag so that you can see how easy it is to add color style to your menus or boxes on the sidebar.
Tip: You can change the titlestyle id and create 3 individual titles i.e. titlestyle1, titlestyle2 etc and have different colors for each title depending on the content of that box.
Copy and paste the following code to each corresponding id. Or type the code using the method learned in the following URL Left Menu CSS Style. (Remember you can change the colors to suit your own style, you can even change the color of your titles.)

#titlestyle {
background-color: #000066;
text-align: center;
color: white;
}
#rmenubox1 {
border: 1px solid black;
padding: 5px;
background-color: #4e6799;
color: white;
}
#rmenubox2 {
border: 1px solid black;
padding: 5px;
color: black;
background-color: #ffccff;
}
#rmenubox3 {
border: 1px solid black;
padding: 5px;
background-color: #ffffcc;
color: black;
}

Tip: Always make sure you save all changes in kompoZer and make sure you create a copy of your html file before you start editing just in case you corrupt the code.

Step 3 )  The following image shows you the right side bar boxes colored style.

kompozer-right-sidebar-style-div-tags-colors

Step 4 ) The following image shows you the final results viewed from a browser. You can see how it is starting to look more like a template.

kompozer-right-sidebar-style-div-tags-final-results

Click on the following URL Left Menu Mouse Over Effect to continue.

Go Back To KompoZer Tutorial List:

Manuel Ballesta RuizManuel Ballesta Ruiz is a web developer, Blogger and WordPress Enthusiast.

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(required)

(required)