S2Bloggish

Does anyone know how to change the color of the text in an entry title?

I would also like to know how to change the color of the text in the titles of the modules (i.e. Page Summary, Tags), if anyone knows that.

Thanks!

I've noticed that there is a great demand to make the Bloggish layout "wider" (or smaller). This can be accomplished very easily for all account types by using a small bit of CSS.

Take into account that if you are using a default bloggish style, the background image is created for the default layout width. You will have to do away with the background image or create your own background that is suited to the width you desire.

Basic Code:

/* ENTER WIDTH HERE */
#container{
width:1024px;
background:white;
}

/* THE REST */
#pagebody, #banner{
width:auto;
margin:0;
}
#alpha{
width:75% !important;
margin:0;
}
#beta{
width:25% !important;
margin:0;
}

» If you have your sidebar on the left side, you would flip-flop the codes so #beta is 75% and #alpha is 25%.

» If you are using the three column layout, you would set #alpha to 25%, #beta to 50% and add a new identifier: #gamma at 25%.



If you want to keep the "separated" look, there are a few different methods:

Method #1 Add borders that match the #container background. Use #alpha-inner if your sidebar is on the right. Use #beta-inner if it's on the left. Use #alpha-inner and #gamma-inner for 3 column style.

#alpha-inner{
border-right:15px solid white;
}
#pagebody{
border-top:15px solid white;
}
#container{
border:15px solid white;
}
#gamma-inner{
border-left:15px solid white;
}


Method #2 Move your background colors to the inner div's and use actual margins. (This is the "right" way...) Example colors based on the Powell Street theme.

/* GET RID OF ORIGINAL BACKGROUND */
#alpha, #beta, #banner{
background:none !important;
}

#alpha-inner{
background: #e7e7ec !important;
margin:15px;
}
#beta-inner{
background: #E7E2C6 !important;
margin:15px;
margin-left:0;
}
#banner-inner{
background:#527276 !important;
margin:15px;
margin-bottom:0;
}

/* NOT SURE WHY THIS IS NEEDED, BUT IT IS */
#banner{
padding-top:1px;
}


Method #3 This is the easiest way, but also the least reliable. Remove the margin:0; from the codes, and make the 75% smaller (something like 71% seems to work.) I don't really recommend using this method unless you can not understand the two previous methods.

#alpha{
width:71% !important;
}
#beta{
width:25% !important;
}

You can not *technically* add navigation links to a one column layout if you have a basic or plus account, but you can create the illusion, and that's the next best thing, right?

1. You will need the background image for the one column layout. Set your layout to "one column", and save the link to the background image (or save the image to your computer and re-upload it to an image host).

2. Set your layout to "Two column left sidebar".

3. Paste the following into your "Custom CSS" box.


body {
background-image: url(http://stat.livejournal.com/sixhtml/themes/lilia/theme-powell-street/body-bg-1.gif);
}

#container {
width: 600px !important;
}

#banner, #beta {
width: 570px !important;
}

#alpha, #alpha-inner, .module{
padding:0 !important;
width:570px !important;
background-image:none;
}

.module-photo,
.module-calendar,
.module-typelist,
.module-categories,
.module-pagesummary,
.module-syndicate,
.module-powered{
display:none;
}

.module-viewlinks li{
display:inline;
}
.module-viewlinks{
height:25px;
}