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:

Normal Stylesheet

No Headerbanner

No background images/ Content color set

No background images/ different color for sidebar and content

Additional links:

Making certain elements invisible

A Rotating Banner

Next up:

How to use and create backgrounds/ + downloads

Styling sidebar lists

Also, please remember to credit me in your userinfo, because this was hell of a lot of work.

Tags: livejournal style, simple bloggish

Current Mood: accomplished

Current Music: Bloc Party- Like Eating Glass

68 comments | Leave a comment

( Post a new comment )

scrapicons.livejournal.com on June 25th, 2006 05:32 pm (UTC)

This layout is very nice and all, but I actually came here looking for the smooth sailing one you did. I've checked all your layout tags, but I might've missed it. It's the one where you had the tags big and small and that. I was wondering where it was. If i find it before you comment back, i'll let you know ;)

(Reply) (Thread) (Link)

scrapicons.livejournal.com on June 25th, 2006 05:32 pm (UTC)

BTW, I LOVE THE HEADER!!!!

(Reply) (Parent) (Thread) (Link)

elli.livejournal.com on June 25th, 2006 05:46 pm (UTC)

Thank you very much!!!

(Reply) (Parent) (Link)

elli.livejournal.com on June 25th, 2006 05:45 pm (UTC)

:) no probs... it's here (http://elli.livejournal.com/234811.html). and it's flexi squares actually.

(Reply) (Parent) (Thread) (Link)

scrapicons.livejournal.com on June 25th, 2006 06:02 pm (UTC)

Haha.. I didn't see that coming! Flexi Squares!? Tags!? oh boy! Anyways, thanks so much!! Shall we friend each other? Friend my personal journal