The meaning of .layout-x-column(s)
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!
.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!