S2Bloggish

Clickable links for entry titles are a much-desired feature of Bloggish that isn't included in the default or styled CSS. Our only option to make Bloggish entry titles "clickable" is to override the "Page::print entry" function through a custom theme layer.

Essentially, what this hack does is add the "permalink" functionality that you see at the end of each post to the post title (and it's a pretty neat trick, in my opinion). It will work on Bloggish or Style Contest themes (since the Style Contest theme is actually built off of the default Bloggish CSS.)

To do this you'll need a paid account to add a custom theme layer to. Please see carriep63's tutorial on how to create your own custom theme layer if you don't already have one. Also see how to add your theme layer in the correct order so you won't lose your CSS overrides. If you've already created a custom theme layer make a copy of it (cutting and pasting it into Notepad works) and save it before making any changes. That way you can quickly restore your original theme layer if anything goes wrong.

Once you've ensured your custom theme layer is in place and working nicely, copy and paste the code in the text box below into your theme layer and click "Save & Compile" to see it in action. Now your Bloggish entry titles should seriously "click".

function Page::print_entry(Entry e) { "<div class='entry'" + ($e.dom_id ? " id='$e.dom_id'" : "") + ">\n"; var bool showtime = $*opt_showtime; var bool showdate = not $*opt_datehead; var bool showposter = false; var bool showuserpic = $*opt_userpic_main; if ($.view == "friends") { $showtime = true; $showposter = true; $showuserpic = $*opt_userpic_friends; } if ($.view == "day") { $showdate = false; } if ($.view == "entry" or $.view == "reply") { $showdate = true; } if ($.view == "entry") { $showuserpic = $*opt_userpic_entrypage; } if (not $e.poster->equals($e.journal)) { $showposter = true; } if (($showuserpic and defined $e.userpic) or $showposter) { "<div class='entry-userpic'>"; if ($showuserpic and defined $e.userpic) { "$e.userpic"; } if (($showuserpic and defined $e.userpic) and $showposter) { "<br />"; } if ($showposter) { print safe "<p class='poster'>"+lang_posted_by($e.poster, $e.journal, $this)+"</p>"; } "</div>"; } "<h3 class='entry-header'>"; if (defined $e.security_icon) { print "<span class='lj-entry-securityicon'>$e.security_icon</span> "; } """<a href="$e.permalink_url">$e.subject</a></h3>\n"""; "<div class='entry-content'>\n"; "<div class='entry-body'>\n"; $e->print_metadata(); $e->print_text(); "</div>\n"; var string sep = "<span class='separator'>|</span>"; "<p class='entry-footer'>"; if ($showdate or $showtime) { print lang_posted_date_and_time($e, $e.time, $showdate, $showtime)+" $sep "; } "<a class='permalink' href='$e.permalink_url'>$*text_permalink</a>"; if ($e.comments.show_postlink) { " $sep "; $e.comments->print_postlink(); } if ($e.comments.show_readlink) { " $sep "; $e.comments->print_readlink(); } $e->print_linkbar(); "</p>"; "</div>\n"; "</div>\n"; }

I took this code from a community that av8rmike either runs or helps out in but I can't find the page it's on (see comments). The code here is pretty much the same thing.

I'll be back soon...I'll post here from time to time with carriep63's permission since there are a few more hacks I'd like to share with S2 Bloggish users. Also, please note that I can't write S2 code or tell you how to alter the code I post here so it will behave any differently.

New post: How to turn your S2Bloggish journal title and subtitle into clickable links.

Last edited 3-19-08.

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.