|
Blog Manager > Designing your Blog
Now that you have made the Blog you may want to style it. The Default style for blogs are not very attractive, in fact there is no style attached, so the display will look quite basic. This document will show you how to make a style sheet that you can attache to any page that contains a Blog. This way the Blog will look attractive.
Creating a Blog Style Sheet
Create a blank notepad document from your Computers Notepad Program. Usually Start>Programs>Accessories>Notepad
Copy the following to the notepad and save it to your desktop as "BlogStyle.css" :
#BlogHeadingTitle{
font-family: Arial;
font-size: 16px;
color: #000000;
font-weight:bold;
}
#BlogHeadingDate{
font-family: Arial;
font-size: 11px;
color: #666666;
margin-bottom: 5px;
}
#BlogHeadingDesc{
font-family: Arial;
font-size: 12px;
color: #333333;
margin-bottom: 10px;
line-height: 120%
}
#BlogReplySpacer{
border-bottom: 1px dotted #CCCCCC;
margin-bottom: 10px
}
#BlogLeaveComment{
font-family: Arial;
font-size: 12px;
color: #000000;
}
#BlogPostBy{
font-family: Arial;
font-size: 11px;
color: #333333;
font-weight:bold;
margin-bottom: 5px;
margin-left: 10px;
padding-left: 10px;
padding-top: 3px;
padding-bottom: 3px;
border-left: 5px solid #0000FF;
border-bottom: 1px dotted #CCCCCC;
background-color: #EFEFEF
}
#BlogPostMessage{
font-family: Arial;
font-size: 11px;
color: #000000;
padding-left: 10px;
margin-bottom: 10px
}
To Apply this style sheet to the page that contains the Blog, do the following:

Click the Style Tab, Click Add Css. When the Style Sheet Selector appears, click the Upload icon. The system will allow you to upload the Style Sheet (BlogStyle.css) that you just created. Select the file from your computer and upload it. When you close the upload window, the list will reload and display the BlogStyle.css. Select it from the list and Click OK. This will now attach the Blog Style to the Page with the Blog in it.
You are now ready, and you can save and publish the page, to see what you have just done. Play around with the settings to see how they change the Blog display. There are also more Styles that i have not included. This will be covered in a more advanced tutorial.
Designing your Blog
Posted on: 08/03/2009
Leave a comment on this page here.
|