S2Bloggish

... but I'm driving myself crazy with this. I can't seem to align my journal (mod_squad)to the center to fit properly in the background. I added a 100px wide background image to the container attribute and set my pagebody to 900px. It fits fine when it comes to width, but it keeps aligning to the left. I can't seem to get it to align center within the container.

Any ideas?

Hi! I've found this comm very useful in the past, but this time I can't find what I need.

I want to erase my username from the banner. I can change the size, the alignment, the font . . . but I can't figure out how to remove it entirely.

Please help?



- I'm paid, BTW.

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;
}

There are specific steps to take if you are using a CSS template or stylesheet together with a theme layer in the Bloggish style. If the steps are taken out of order, the results can be less than pleasing. Here are three different ways to use CSS in conjunction with a theme layer (I personally use #2):


Method #1: Using a theme layer with the wizard

1. Create your theme layer. If the template instructions state to set your theme to "None", you must include this code in your layer:
set base_theme = "none";

2. In the wizard, choose Your Style under "theme". Do this even if the instructions say to choose "none". Most template instructions are geared toward the wizard only!

3. Enter your CSS in the Custom CSS box (tab four).




Method #2: Adding CSS to the theme layer (instead of using the wizard).

1. Create your theme layer. If the template instructions state to set your theme to "None", you must include this code in your layer:
set base_theme = "none";

2. Use the following code to add your CSS.
set custom_css = "
Your CSS here
";




Method #3: Using an external stylesheet with the theme layer.

1. Paste your CSS into a text editor and save the file as somefilename.css.

2. Upload stylesheet to a file host.

3. Create your theme layer. If the template instructions state to set your theme to "None", you must include this code in your layer:
set base_theme = "none";

4. Use the following code in the theme layer to link to your stylesheet:
set linked_stylesheet = "http://somefilename.css";


There are other ways to add custom CSS to your theme layer such as using print_custom_head or rewriting your print_stylesheet function, but they are not recommended with the Bloggish style. Read more about those methods in this tutorial.

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;
}

Have you seen the following classes and wondered what they were used for in an S2 Bloggish layout?

.layout-one-column
.layout-two-column-left
.layout-two-column-right
.layout-three-column

The good news is you probably don't even need to know what these are for unless you are designing layouts for other people to use. The only reason you would need them is if you were designing a theme that is compatible with all four of the Bloggish layout types. If you are making a style for yourself and you have chosen your favorite layout type for Bloggish, then you can skip this tutorial altogether.

For the sake of this tutorial, let's pretend we are making a theme for all four layout types of Bloggish. I am assuming you already know what #alpha, #beta, and #gamma are used for. If not, you must catch up with us now by reading about those.

All I want to do with this theme is take this shiny image and put it above our entries:



I prefer to have my sidebar on the right and the entries on the left. Since the entries are the first column on the left, they will then be the #alpha column. Therefore, I added my image as a background to the #alpha-inner column by using the following code:

#alpha-inner{
padding-top:80px;
background: url(http://pics.livejournal.com/carriep63/pic/0009ady7) no-repeat center 20px !important;
}

I would have used it with #alpha instead of #alpha-inner, but I chose to keep the original background of the diagonal lines.

Here is what we have. Perfect.
The only problem is, if someone else wants to use our stylesheet they have to use the "Two column, sidebar on the right" layout type, too. If they want their sidebar on the left, then the sidebar will become #alpha and this is what we get. So, if we have the "Two column, sidebar on the left" layout type, then the background image would be added to the #beta-inner column, not the #alpha-inner column. This is where our classes come in. You can specify where to add the image depending on which layout type the user has decided on. So, if we are using 2 column right or one column layout types, then we will add it to the #alpha column. If we are using 2column left or three column layout types, we will add it to the #beta column.

.layout-two-column-right #alpha-inner,
.layout-two-column-left #beta-inner,
.layout-three-column #beta-inner,
.layout-one-column #alpha-inner
{
padding-top:80px;
background: url(http://pics.livejournal.com/carriep63/pic/0009ady7) no-repeat center 20px !important;
}


That code will add the image to the correct column depending on which layout type is being used. You can technically make a different layout for each layout type all in the same stylesheet if you wanted to!

Bloggish is (in my opinion) the most versatile and customizable S2 layout there is. One of the reasons it's so customizable is because there are four different types of layout.

1. One Column


2. Two column, sidebar on the left


3. Two column, sidebar on the right


4. Three column

This is where the #alpha, #beta, and #gamma id's come into play. The first column starting at the left will always be #alpha, the second column will always be #beta, and the third column (if you have one) will be #gamma. It doesn't matter what is inside the first column, whether it's a sidebar or your entries. It will always be #alpha. Here are all four layout types with #alpha set to have a blue background:



So... When using CSS to customize your S2 Bloggish layout, #alpha, #beta, and #gamma will mean different things depending on the layout type you've chosen.

Customizing for different layout types