S2Bloggish

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


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.