Adding tags into the sidebar

1,566 views
Skip to first unread message

sneak

unread,
Apr 15, 2010, 9:48:28 PM4/15/10
to Scaffold Tumblr Theme
A number of people have asked about adding tags into the sidebar.
Tumblr doesn't have anything like 'tag clouds' for themes, though
there are some third-party plugins you can look at. But if you want to
manually add some specific tags (rather than making a 'Page' redirect
that would show up in the navigation) here are some instructions:

You will need to add each tag yourself into the theme HTML. This is
the code you will need to add (replace 'tagname' with the tag).

{block:IndexPage}
<ul class="tags">
<li><a href="http://yoursite.tumblr.com/tagged/tagname">Tag name</a></
li>
<li><a href="http://yoursite.tumblr.com/tagged/tagname">Tag name</a></
li>
<li><a href="http://yoursite.tumblr.com/tagged/tagname">Tag name</a></
li>
</ul>
{/block:IndexPage}

You would probably want to add this just before (or after) the
{block:Twitter} section in the theme HTML. You can add as many tags as
you want by just copying the <li>...</li> line.

You will also need to add the following CSS in the Advanced tab:

#sidebar .tags { overflow: hidden; margin: 1em 0; }
#sidebar .tags li {
float: left;
display: inline;
margin: 0 5px 5px 0;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans",
Verdana, Tahoma, sans-serif;
font-size: 1em; line-height: 1;
}
#sidebar .tags li a {
float: left;
display: inline;
padding: 5px 7px 6px;
background: #d6d6d6;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
color: #666;
text-decoration: none;
}
#sidebar .tags li a:hover {
-webkit-transition-property: background;
-webkit-transition-duration: 1s;
color: #fff;
border: none;
background: #666; /* ADD YOUR CUSTOM COLOUR HERE */
}

Note that last line -- you will need to manually update this to be the
custom colour you have set in your Appearance tab for icons. This is
the colour for when you hover over the tab link.

--
"Scaffold Tumblr Theme" Google Group.
To post, send email to scaffold-t...@googlegroups.com
To unsubscribe, send email to scaffold-tumblr-...@googlegroups.com
For more options, visit http://groups.google.com/group/scaffold-tumblr-theme?hl=en?hl=en
Reply all
Reply to author
Forward
0 new messages