#no js

Code

A simple box code with tabs. Haven't done one in a while or felt like finishing other in progress templates, so here's one for now.

Don't remove or alter the code credits from the CSS and HTML.

Hi there! Just a #prothemertip:

If you are currently designing a custom tumblr theme and you want to highlight the current page's link in your navigation menu, you don't need to develop or use any script or plug-in: there's a secret html variable called {CurrentState} –that of course doesn't appear on the official theme documentation as many others– which automatically adds the class 'current-page' on the html tag of the active page link. So you can add the class name into the tag such as:

{block:Pages}

<a class="{CurrentState}" href="{URL}">{Label}</a>

{/block:Pages}

The above block tag will add all the links to your blog's custom pages at once (except for the hidden ones). Then, you can customize the class 'a.current-page' (or simply '.current-page') on your custom CSS (embedded or linked) such as this:

a.current-page {color: {AccentColor}} /* Example */

Doing so will only add –and then stylize– the class on the active page's link; the rest of the nav links will remain normal –or styled as default. This is actually the solution used on Tumblr's official theme and that's actually where I knew it from.

However, the home link works differently. For the link highlighting to work similarly when the homepage or startpage is active, you can do so adding the class only between the HomePage block, as follows:

<a class="{block:HomePage}current-page{/block:HomePage}" href="/">Home</a>

Notice that the {CurrentState} variable will only work for static pages of your blog, not external links –even if they redirect to your blog itself, such as /tagged/, /yyyy/mm/dd, /random or other index pages, they'll be considered as external. You can use the variable {ExternalState} for these and customize the css class 'external-page' but they'll be stylized always and in all pages instead of only the active one unlike the previous hack.

Of course, if this solution doesn't fully satisfy your specific needs due to this last limitation, you can always turn back to old trustworthy JavaScript (vanilla or jQuery)... though I won't be very helpful there.

Code

Code   A simple to use code. Not as much room for editing it, but looks fine with little or a lot of text added in.

Code

Code

Code

Phone Messenger Style Profile

Images grow in size on hover and main character image pans on hover. Those hovers can be removed by removing the respective “:hover” code lines.

Images can be placed on the right side by just using an <img> tag. Images go on the left side if you place the image tag in heading2 like <h2><img></h2>.