Themes

Steamblr

Preview

Features

  • All post types
  • Custom colors
  • Custom images
  • Day pages
  • Disqus comments
  • Localization
  • Search
  • Tags

A dark theme designed to look and feel much like the website for Steam, a popular gaming service. Aesthetically pleasing and highly customizable!

Based on store.steampowered.com/news, assimilated into Tumblr by oxguy3. It's also published under the GPLv3 and available on GitHub: https://github.com/oxguy3/steamblr

CUSTOMIZE MENU OPTIONS

Booleans

Lock header logo height

  • default: 1
  • The header logo image's height will be forcibly set to 44px. This will prevent the logo from resizing the header or making it look weird, so onlydisable it if you know what you're doing.

Replace blue with green

  • default: 0
  • The title bars for the blocks in the sidebar will change from blue to green.

Show Archive link

  • default: 1
  • A link to your archive will be included in the navigation bar.

Show Home link

  • default: 1
  • A link to your home page will be included in the navigation bar.

Show RSS link

  • default: 1
  • A link to your RSS feed will be included in the navigation bar.

Show Random link

  • default: 1
  • A link to "/random" will be included in the navigation bar.

Show description block

  • default: 1
  • The blog description will be shown in a sidebar block.

Show search block

  • default: 1
  • A search bar will be shown in a sidebar block.

Show share links

  • default: 1
  • A handful of sharing icons will be shown below every post next to the date.

Show share to Digg

  • default: 1
  • A share icon for Digg will be included with the share links on every post ("Show share links" must be enabled for this to have any effect).

Show share to Facebook

  • default: 1
  • A share icon for Facebook will be included with the share links on every post ("Show share links" must be enabled for this to have any effect).

Show share to Google Plus

  • default: 1
  • A share icon for Google+ will be included with the share links on every post ("Show share links" must be enabled for this to have any effect).

Show share to Reddit

  • default: 1
  • A share icon for Reddit will be included with the share links on every post ("Show share links" must be enabled for this to have any effect).

Show share to Twitter

  • default: 1
  • A share icon for Twitter will be included with the share links on every post ("Show share links" must be enabled for this to have any effect).

Show tags

  • default: 1
  • Tags will be visible below every post.

Images

Header background

  • default: [none]
  • A repeated/tiled background for the header. If no image is set, the background will default to this.

Header logo

  • default: [none]
  • The logo to be shown in the header. If no image is set, the blog title will be shown instead. Ideally, the logo should be 176px by 44px.

Texts

Description block title

  • default: [none]
  • A title for the description block in the sidebar. If none is set, the block's titlebar will be hidden. ("Show description block" must be enabled for this to be visible)

Disqus Shortname

  • default: [none]
  • If you wish to have Disqus enabled on your blog, register your site at https://disqus.com/admin/signup/. Enter the shortname that you chose during the registration process in this field.

Extra block 1/2/3 body

  • default: [none]
  • To create an extra block in your sidebar, fill this in with any content you wish to add. Even though the box is very small, you can enter a lot of text or even HTML. If any of the these three fields are left blank, the corresponding block will not be visible at all (including the title).

Extra block 1/2/3 title

  • default: [none]
  • To add a title to any of the extra blocks in your sidebar, put your title in this field. If any of these three fields are left blank, the corresponding block will not have a titlebar. (The corresponding "Extra block 1/2/3 body" field must be set for these titles to be visible)

Footer note (v1.0.1+)

  • default: [none]
  • A note that, if set, will be added immediately after the copyright years in the footer.

ADDITIONAL TRICKS

The theme can be further customized by adding custom CSS or other special code.

Here are a few tricks specific to this theme that might be useful.

Chat label colors

There are several ways you can colorize the labels of chat posts. If you would like each unique name in a chat post to have a different color, use this code: (Replace each "COLORCODE" with a different valid CSS color value. You can use any of these formats.)

.post-chat ul.chat li.user_1 .label {color:COLORCODE;}

.post-chat ul.chat li.user_2 .label {color:COLORCODE;}

.post-chat ul.chat li.user_3 .label {color:COLORCODE;}

and so on...

Alternatively, if you would like a specific username to be a certain color every time it appears in any chat, use this code:

.post-chat ul.chat li[chatlabel="USERNAME:"] .label {color:COLORCODE;}

Alternatively, you can specify colors for every other row with this code:

.post-chat ul.chat li.even .label {color:COLORCODE;}

.post-chat ul.chat li.odd .label {color:COLORCODE;}

If you would like to alter any of the above codes so that they apply to the entire line instead of just the username part, remove ".label" from the code. If you would like to make any of the codes apply to just to the message instead of the username part, replace ".label" with ".chatline".

Tag formatting

To remove the pound sign from in front of tags, add this CSS code:

span.tag:before {content:"" !important;}

To add commas in between tags, use this CSS code:

span.tag:not(:last-child):after {content:",";}

Sidebar lists

To create a nice looking list of links in a sidebar block, edit this code to suit your needs, then enter it in one of the "Extra block 1/2/3 body" sections of the Appearance menu (you can remove the section titles or rearrange the lines in whatever order you want; they are just there if you want them):

<div class="block_sub_header_channels">SECTION TITLE</div>

<a class="linkbar" href="URL">LINK TITLE</a>

<a class="linkbar" href="URL">LINK TITLE</a>

<div class="block_sub_header_channels">SECTION TITLE</div>

<a class="linkbar" href="URL">LINK TITLE</a>