Contents
[ hide ]
Web Design Workshop 9 Left Content
Let’s look at our main content area where our posts and page content will be on display. There are quite a number of items to take care of here as the Semiomantics XO RC script is providing for interesting features which can be shown to visitors. On the live Workshop we will do some live demos on Monday, September 14, 2009.
The Content Style – default style-sheet
You find the content style code under Left Content Elements starting (about) at line 338 in your stile-sheet (zero-style):
#leftcontent {
float: left;
margin: 0 10px;
padding: 0;
}
#leftcontent h5 {
font-family:Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
color: #666666;
margin-bottom: 5px;
font-size: 14px;
}
#leftcontent h1 {
margin: 0;
padding: 0;
font-size: 24px;
line-height: 26px;
}
#leftcontent h1.catheader {
margin-top: 3px;
color: #666666;
font-weight: normal;
}
#leftcontent .post h1,
#leftcontent .ind-post h1,
#leftcontent .twopost h1,
#leftcontent .threepost h1 {
margin-top: 5px;
font-size: 36px;
font-family: Georgia, Times, serif;
font-weight: normal;
line-height: 38px;
color: #222;
}
#leftcontent .twopost h1 {
font-size: 26px;
line-height: 28px;
}
#leftcontent .threepost h1 {
font-size: 20px;
line-height: 22px;
}
#leftcontent .postmetadata {
clear: both;
line-height: 14px;
}
#leftcontent .post .entry {
font-size: 15px;
line-height: 18px;
}
#leftcontent .date {
margin-bottom: 5px;
font-style: italic;
color: #888;
}
#leftcontent .meta {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #444;
}
#leftcontent .catdesc {
background: #f7f7f7;
border: 0px double #FFFFFF;
padding: 0 10px;
color: #666;
font-size: 13px;
line-height: 15px;
margin-bottom: 10px;
}
The Desired Result
Let’s have a step-by-step look at the code and adapt it to our needs and preferences in accordance with our project charter.
We will look at the fonts, the display, the different headings, title and subtitle, blockquotes, code, colors, links and more in the next few posts.
The demo site needs to style it’s content to look as follows:
Content Fonts
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.