There are two elements of good CSS missing from the Bloggish template: one is the ability to have clickable links for entry titles. We remedied that last week by adding special code to our custom theme layer.
This week we're going to correct Bloggish's other missing element: the lack of clickable journal titles and subtitles.
If you missed it, please check out my last post to s2_bloggish - it has instructions for those of you just getting started with creating and editing custom theme layers, which is what we're going to do now.
When you're ready, get things "clicking" by pasting the following code into your custom theme layer and clicking Save & Compile. This code will turn just the journal title into a clickable link:
If you would like to turn both the journal title and the subtitle into two separate, clickable links, paste the following code into your theme layer:
Clicking on either of these links will now redirect readers to your home page, so if your journal is located at http://exampleusername.insanejournal.com, clicking these links will return them to that page. You can see (and click on!) a working example at my journal.
The natural question arising out of our newfound ability to linkify the title and subtitle is, "Can I change these links to point to another page on my journal, or even to another journal or website?" The answer is "yes". Replace the Global Title or Subtitle, as seen in the following code...
<h2 id="banner-description"><a href="$p.base_url"> $p.global_subtitle</a> </h2>
...With any URL you like. In the example I'm using on my journal, it's a link to the new journal that I write about AOL in. So your string for my subtitle would look like this...
<h2 id="banner-description"> <a href="http://antiaol.insanejournal.com"> $p.global_subtitle</a></h2>
Updated 3-21-08. No one told me the answer to the question I originally posed about changing the URL with this code - it just seemed silly that we couldn't, so I put the URL where you see it now and compiled...and got it right on my first try :).
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".
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.
Last edited 3-19-08.