Contents
[ hide ]
Web Design Workshop 7 Sidebar
Editing the sidebar style will depend on the content and purpose of the bar. If the sidebar serves mainly to display ads, then the ads will bring color and attract attention. If your sidebar will display content, text and lists such as categories, pages, recent posts, then you need to style the sidebar to make it easily to read taking into account the Direction you want to give to your page.
Semiomantics XO Sidebar
Semiomantics XO RC proposes two pre-configured sidebars being either 180 pixels or 360 pixels wide. They can be displayed on either side of the main content.
In the style-sheet you find the style for the sidebars as well as for the widgets which can be placed there as from line 240 under #sidebar.
The Sidebar
Before styling the sidebar, please note that there are two sidebars available. The sidebars can be styled individually. In the Make Money demo theme with one only sidebar, we will use the space for content only. The site is only 800 pixels wide and we are building a two column layout using a 360 pixel wide sdebar on the right side.
#sidebar {
float: right;
margin: 0 10px;
padding: 5px 0 0;
}
Note the 10px margin on the right side: this is the margin between the right siedebar border and the right border of the main wrapper (or the page). To win a few pixels in your display, you could take out these 10 pixels and increase the width of the sidebar. This will look ok for as long as you keep a white background.
Sidebar with 10px margin right
Sidebar without margin right
The code looks as follows:
#sidebar {
float: right;
margin: 0 0;
padding: 5px 0 0;
}
For the eye it seems to look more dynamic if we leave a say 2 pixels marge there:
Sidebar with margin right 2 pixels
As i said above, this works well if you don’t use a background with hard contrast. If you give your Semiomantics XO a black label touch, then you should keep the margin:
The second Sidebar
The second sidebar has the same features and you can add whatever you would like to customize it.
Sidebar Fonts
Let’s style the fonts and line display in the sidebar:
.side {
line-height: 20px;
font-size: 18px;
margin-bottom: 0;
}
Nothing new here, we can modify line and font size.
Sidebar Widgets
More interesting is the styling of widgets as we will use widgets in the sidebar to display content and widgetized lists, such as recent posts or categories, archives or the blogroll.
.side-widget {
float: left;
margin: 0 0 10px;
padding: 0 10px 15px;
background: #eaeaea /*url(images/bg-hatch.gif)*/;
border: 0px solid #000000;
}
.side-widget ul {
padding: 0;
margin: 0;
list-style-type: none;
}
.side-widget ul li {
padding: 0;
margin: 0;
font-size: 13px;
}
.side-widget ul li {
padding-left: 15px;
margin: 2px 0;
}
.side-widget h2 {
font-family: Times;serif;
font-weight: bold;
font-size: 14px;
border-bottom: 0px solid #FFFFFF;
padding: 10px 0 5px;
margin-top: 0;
text-align: center;
text-transform: uppercase;
}
.side-widget .storycontent {
border-bottom: 0px solid #666666;
}
.side-widget .noline {
border-bottom: 0;
}
Widget Background
This line defines the background:
background: #eaeaea /*url(images/bg-hatch.gif)*/;
As you can see, the background color can be defined with a color code, here #eaeaea, which is a light gray, or it can be designed by using an image.
In your image folder there are some sample images as well as a Photoshop file for the background hatch which you can modify also using GIMP.
An example for using texture as background:
Widget Background Texture
To use an image for your background, just load your image to the image folder contained in your xo theme folder and, un-comment the above codeline and replace bg-hatch.gif with the name of your image.
A widget without a background image loads faster while a background image can add elegance, depth and a touch of class. For the rest it’s as usual, a matter of taste.
Widget Title Formatting
The code is quite self explanatory. The widget titles are edited here:
.side-widget h2 {
font-family: Times;serif;
font-weight: bold;
font-size: 14px;
border-bottom: 0px solid #FFFFFF;
padding: 10px 0 5px;
margin-top: 0;
text-align: center;
text-transform: uppercase;
}
The above code imposes Times in uppercase. The bottom border is set to 0 pixels; you could add there 1 pixel and a color to emphasize the title, however I preferred to just capitalize the title which is in h2 (don’t change the h2).
More about this Topic
| Author: Yorgo Nestoridis, Media Marketing & Publishing, Founder of YORGOO Publishing, YORGOO Press and Semiomantics.
If you enjoyed reading the above, please consider following future tips and strategies by RSS reader, Email delivery, or Kindle subscription. |
This page is wiki editable click here to edit this page.