S2Bloggish

Hello. I have a question. On my layout for this journal, I'd really like to get rid of that duck in the title and replace it with something else. Anyone know how to do this?

Thanks!

This code is almost identical to the tutorial found at the livejournal expressive community. That is because I blatantly stole it and adapted it slightly to work for Bloggish by changing the classes and one measly line of code.

As usual, you may change the stuff in green.

[Edit] Just when I thought I went and did something clever, I found out it's unecessary. Looks like the original code was written for Bloggish, too. Here it is.

How to use this code

In order for this code to display your tags properly, you will need to rename them using your delimiter (default is :). For example, I've used:

movies:anchorman
movies:the notebook
movies:stranger than fiction.
music:cas haley
music:andrew stein
music:jasonmraz:tv
music:open mic night
music:the white stripes

Tweaking with CSS

I personally like my inner links to have a different list style to differentiate them a bit more, so I used the following CSS for that:


.module-categories ul ul li{
list-style-type:circle;
margin: 3px 0 1px 15px;
padding-left:0;
background:none;
}


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

I really struggled with this tutorial. I was never any good at writing S2 code, I'm just good at adapting it for my own purposes! Anyway, I finally came up with a way to display a tag cloud in your sidebar, thanks in part to the tutorial in livejournal's smooth sailing community. You can have many variations of this, so I will list them here as well.

Basic Code Tags as a list with varying font sizes (keeps the bullet image).



Modifications

» Display the tags inline (keeps the bullet images)
Add the following code to your custom CSS:

.module-categories li{
float:left;
}


» Display inline without bullets
Add the following code to your custom CSS:

.module-categories li{
float:left;
background:none;
margin:0;
}


» Display as list in a scrollbox
Add the following to your custom CSS:

.module-categories ul{
height:150px;
overflow:auto;
}

In response to a post in another community. This tutorial will show you how to move the "Posted at" line to the top of the entry. This tutorial deals with the function Page::print_entry. If you already have this function, then all you have to do is delete the current date code (shown in red) and replace it where indicated with the code in green. If you do not have that function in your theme layer, then just copy and paste the following code into your theme layer.

( Read more... )

This tutorial will show you how to replace your comment links with images. There are actually five different areas we will be working on.

1. The permalink
2. The "Post comment" link
3. The "Read comments" link
4. The entry linkbar (aka "the rest").
5. The separator |

( Read more... )

Using the following code in a theme layer will float your mood icon over to the left of the mood and music (see example). If you do not want a mood icon at all, remove everything in red.

Use the following code in a theme layer and rearrange the lines of code in the order you want your modules. If there are modules you don't want, just delete that line of code. The titles are in green. You may change these to whatever you like, or delete them to keep the default titles.

set sidebar_primary =  [
     [ "userprofile", "Userpic Title", "0", "1" ],
     [ "viewlinks", "Viewlinks Title" ],
     [ "customtext" ],
     [ "calendar" ],
     [ "links", "Links Title" ],
     [ "tags", "Tags Title" ],
     [ "pagesummary", "Summary Title" ],
     [ "syndicate", "Syndicate Title" ],
     [ "poweredby", "Poweredby Title" ],
];


If you are using the Three Column layout, you will want to break up these modules between the two sidebars. Here you can define a primary and a secondary sidebar. You can pick and choose which modules go in which sidebar.


1st Sidebar
set sidebar_primary =  [
     [ "userprofile", "Userpic Title", "0", "1" ],
     [ "viewlinks", "Viewlinks Title" ],
     [ "customtext" ],
     [ "calendar" ],
     [ "links", "Links Title" ],
];



2nd Sidebar
set sidebar_secondary=  [
     [ "tags", "Tags Title" ],
     [ "pagesummary", "Summary Title" ],
     [ "syndicate", "Syndicate Title" ],
     [ "poweredby", "Poweredby Title" ],
];

Insert the following code into a theme layer in order to add modules to your sidebar. You may change the parts in green to suit your needs.




In order for these codes to actually show up, you have to have a customtext box defined in your layer. If you don't already have the "rearranging sidebar modules" code in your layer, you will need to insert that as well.

Someone in another community asked about a random quote generator for the Bloggish style. Again, I didn't write the code, merely pieced it together for the Bloggish style.

Insert this code into a theme layer to have random quotes in a module. Change the red parts to suit your needs.
( random quote module )

An interesting oversight (?) in the layer prevents you from using the "normal" method to change the mood/music/location labels in Bloggish. kunzite1 posted the solution in s2bloggish. I am reposting it here before it gets buried.


-------------------------------------------

Use this code in your layer. Replace the words in green with your own.

set text_meta_mood = "Schmood";
set text_meta_music = "Schmusic";
set text_meta_location = "Schmocal";

function Entry::print_metadata() {
    if (size $.metadata) {
        """<div class="metadata">\n""";
        foreach var string m ($.metadata) {
            "<div><strong>"; print lang_metadata_title($m); "</strong>: ";
            if ($m == "mood") {
                " $.mood_icon ";
            }
            print $.metadata{$m}; "</div>\n";
        }
        "</div>\n";
    }
}

For some unkown reason, the navigation links are absent on the one column Bloggish layout. Here is a code you can use in a paid user layer to replace them.


#### This is just CSS. Change the green parts. ####
set custom_css = "
#banner-links li{display:inline; background:none;}
#banner-links ul{background:#527276;padding:2px 0;margin:0 15px;}
#banner{margin:0px auto !important;}
";



#### Add the code to the banner. ####
function print_banner(Page p) {
    container_open("banner");
      "<h1 id='banner-header'>$p.global_title</h1>";
      "<h2 id='banner-description'>$p.global_subtitle</h2>";
    container_close();
      

"<div id='banner-links'>";
    var string[] links = [];
    foreach var string k ($p.views_order) {
        $links[size $links] = """<a href="$p.view_url{$k}">"""+lang_viewname($k)+"""</a>""";
    }

    print_module_list($links);

"</div>";
}

This is in response to a post in another community. You can change your mood, music and location words into images if you want to.



In the example pic, I've also moved the mood icon over to the left. That is reflected in the code as well.

function Entry::print_metadata() {
    if (size $.metadata) {
        """<div class="metadata">""";
                            
####### mood icon here.  delete if you don't want this.######

"""<div style="float:left; padding-right:10px;">""";
if(($.mood_icon)) {
print "$.mood_icon";
                }
"</div>";

#############################################################


        foreach var string m ($.metadata) {
            var string val  = $.metadata{$m};
            var string moodimg = "<img src='http://pics.livejournal.com/carriep63/pic/0009f257'>";
            var string musicimg = "<img src='http://pics.livejournal.com/carriep63/pic/0009gxyz'>";
            var string locimg = "<img src='http://pics.livejournal.com/carriep63/pic/0009e5dd'>";

    if ($m == "mood") {
             print """<div>${moodimg} $val</div>""";
            }

    if ($m == "music") {
             print """<div>${musicimg} $val</div>""";
            }

    if ($m == "location") {
             print """<div>${locimg} $val</div>""";
            }

        }
            """<div style="clear:both;"></div></div>""";
    }

}

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