March 20th, 2008

[info]antiaol in [info]s2bloggish

[Paid] Tutorial: How to Turn S2_Bloggish Journal Titles and Subtitles Into Clickable Links

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 [info]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 :).

Tags: