elli - Bloggish Border Style

Previous | Memories | Tell Someone | Next

25 June 2006 @ 05:46 pm

Bloggish Border Style

This style has been customized for both free and paid accounts. It is solely based on CSS- Cascading Style Sheets. It does NOT require advanced layout customization. It is however possible for paid accounts to add those later.

Customization Step 1

You can customize the style by using the manage >> customize >> look and feel >>

Set your Layout to Bloggish and choose Themes (None) from the drop-down menues

Download this file. It is the Stylesheet.

You can make changes to the stylehsheet now, for starters, use a different Header. Once you create the image make sure it is 760px wide.

to change the header, look for the css tag #banner-inner.

#banner-inner {

background-image: url(http://www.yourspace.com/banner.jpg);
background-repeat: no-repeat;
background-position: center 9px;
height:240px;
margin:auto;
}

The only info besides the image url you shoudl change is height: 240px; You can make it taller or less tall.

To change the links color, look for the tags a:link, a:active, a:visited and a:hover.
There are many ways and possiblities to cusatomize those. We will just do color now. Chnage the color by using a different html color coding.

a:link {
color: #0099FF;
text-decoration:none;
}

Same goes for the color of the entry title. Look for tag .entry-header and h2

.entry-header{
border: 0;
font-family: 'Trebuchet MS', Verdana, Sans-Serif;
color:#0099FF; font-size: 2.0em; text-align:left;
margin-bottom:4px;
}

h2{
border: 0;
font-family: 'Trebuchet MS', Verdana, Sans-Serif;
color:#0099FF; font-size: 2.0em; text-align:left;
margin-bottom:4px;
}

Change the color in the same manner, to the color you like.

You can also change the look and the color of the sidebar on the left or right with the .module-list-item tags. .module-list-item means the whole list. .module-list-item a implies lists that are links.

.module-list-item a, .module-list-item a:visited {
color:#595959;
text-decoration:none;
font-weight:normal;
margin-top:-1px;
display:block;
padding:8px 0px 8px 30px;
border-bottom: 1px solid #efefef;
border-top: 1px solid #efefef;
background-repeat: no-repeat;
background-position: 0 15px;
}

.module-list-item a:hover {
color:#0099FF;
text-decoration:none;
font-weight:normal;
margin-top:-1px;
display:block;
padding:8px 0px 8px 30px;
background-color: #f9f9f9;
}

As before, there is a lot more customization possible there. Especially in the border and padding tags.

You can also change the font you use in several tags, so you can use different tpo for different things. Tags for example are body, .entry-header, .entry-content ,

.entry-content {
text-align: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:0.85em;
line-height: 1.6em;
color:#444;
}

text-align places the text left, right center or as block (justify).
font-family specifies which font.

Also remember to host the border images on your own server or photobucket account. Download them here.
and change the url to all three files in your stylesheet.

#banner{
border: 0;
/* no ie mac \*/ height: 1%; /* ie win 5.5, 6 win */
color: #333333;
margin:0;
padding:0;
text-align: left;

background-image: url(http://www.yourspace.com/border-top.jpg);
background-repeat: no-repeat;
background-position: center top;
}

#container{
width: 790px;
background-image: url(http://www.yourspace.com/entry-back.jpg);
background-repeat: repeat-y;background-position: center;
}

and

#pagebody{
background-image: url(http://www.yourspace.com/border-bottom.jpg);
background-repeat: no-repeat;
background-position: center bottom;
}

Now you copy and paste the whole stylesheet.
Go to manage >> customize >> custom options >>
Choose the Presentation Layout Type (Left-column, right-column, one column) and try the other methods of changing stuff there.

In manage >> customize >> custom options >> Paste the stylesheet into the custom Stylesheet textarea. you don't even need to externally host it, just add it there.

And voila. Layout!!!!!!!! (you can of course leave out the background border images and chnage the background to all white (fff) in which case you would be at the layout from last week. Almost ;)) Or you could use different borders.

Well enjoy. More customization another day. I just wonder if those explanations make sense.

ETA:

New and improved stylesheet up!!!

a few more stylesheets with variations: