Shimmering Themes

Thanks for your question!  To change the favicon, all you have to do is add this into the HTML:

Then, replace {Favicon} with the URL for whatever image you want to use as the favicon.  You can make your own favicon on this website, or you can find pre-made ones online.  This Tumblr has a huge selection; this one is great as well.  

Thanks for your question!  If you want to make the logo image fade on hover, all you have to do is paste the following code anywhere between the “style” tags:

#logo a:hover{opacity:0.5;}

I made the opacity 0.5, but you can change it to whatever number you want, depending on how transparent you want the logo image to be when you hover over it. (Although I would recommend leaving it as is, since it matches the rest of the theme.)  

If you want, you can add transition duration (to change the speed at which the fading happens), like so:

#logo a:hover{opacity:0.5;-moz-transition-duration:0.8s;-o-transition-duration:0.8s;-webkit-transition-duration:0.8s;transition-duration:0.8s;}

Once again, feel free to change 0.8 to whatever you’d like, depending on how fast you want the transitions to happen.  (Although, once again, I would recommend leaving it as is, since it matches the rest of the theme.)

Thanks for your question and for your kind words!  To answer your first question: If you want to edit the font colors, all that you have to do is press Command+F if on a Mac or Control+F if on a PC, type this code into the “Search for” bar:  

color:#4a404a;

…and then replace it with whatever color you want!

So, for example, if you wanted to change your body font color to a pale pink shade, you would first delete color:#4a404a; from the code, and then type in color:#fff5f3; instead.  (If you don’t know the code for the color you want, this website has a fantastic color picker and shows the codes for whatever color you choose!)

As for the color of the bubbles, the instructions for changing it are basically the same; first, find this code under #posts:

background-color:rgba(217,217,217,0.5);

…and then replace it with whatever color you want!  

Notice that for the font color, I simply used the hex color code (the one with the pound sign and then the letters and numbers after it), but for the post background color, I used the rgba color model, because this allows me to control the opacity of the color simply by adjusting the last number in the brackets; now, they color is semi-transparent, but making the number higher or lower will make the color more or less opaque.  If you want to keep the color of the post background at all transparent, use rgba (Again, the website that I referred you to will show you the proper code for whatever color you choose).

Thanks for your question!  I’m so happy that you like it!

Changing the font doesn’t count as breaking the rules; you may alter my themes to fit your needs/blog aesthetic, as long as the credits remain untouched and you don’t use the themes as base codes. 

“CONSTELLATION” THEME

PREVIEW | CODE

Features:

350px-high and auto-width posts

One row

Horizontal (!) infinite scrolling

Sidebar

Hover over sidebar for description and menu

Three customizable links

Customizable colors

Like, Reblog, and Note Count on hover

Thanks for your question!  And you’re not bombarding me!  

Anyway, I’m not really sure why that’s happening….Did you copy and paste everything directly into the code?  If not, I’d suggest trying that, and if you did, then I’d suggest deleting whatever you added and then trying to re-add it again (basically the Tumblr version of “turn it off, then turn it back on again” LOL)–I know that sometimes, when I fix something, I make some tiny mistake that I don’t even notice, and then when do this, it’s gone.  So that’s what I’d suggest.

I’m sorry that this isn’t more helpful, since the code works fine for me and I’ve never had this problem before, but if anyone has, and has some advice for Anonymous, then please send it my way, and I’ll post it!

Thanks for your question!

So this is a bit complicated to do, so it’s understandable that you’re having trouble.  It took me ages to learn how to do this, and I wish I had had someone to tell me how.  But I finally was able to figure it out by pulling information from a variety of sources (and honestly I’m not sure how well I’ll be able to actually explain what everything does, but I’ll do my best!).  Also, I’m assuming that, because this is a bit harder to do, you already know basic HTML & CSS (if you don’t, I’d suggest learning how to do simpler things first, and then coming back to this).

By the end of this post, your post information will show up on hover in the center of posts like it does in many of my themes.  (See my “New York” theme and my “Clarity” theme for the best examples of this.)

This is going to be a long tutorial with a lot of information, so get ready!  

1. If you haven’t already, place a div tag inside the {block:Posts} tags.  Feel free to call it whatever you want/feel is the most helpful (the same goes for all of the divs we’ll use in this tutorial).  It should look something like this:

{block:Posts} 

 [Other stuff here] 

 {/block:Posts}

2. Next, insert the opening and closing {block:IndexPage} right after the opening “posts” div:

{block:Posts} 

{block:IndexPage}{/block:IndexPage}[Other stuff here]

{/block:Posts}

3. Inside of those tags, enter all of the information you want to show up over your posts (Like, Reblog, Note Count, etc.), and wrap them in a div tag, which will later serve as the “background” of this information.  Also, it’s a good idea to wrap each of the pieces of information in their own span tags, so that you can style them later.  This part is important; you want to use span tags since I’m assuming that you want the information elements to be side by side, not stacked on top of each other, which is what would happen if you used div tags.

{block:Posts} {block:IndexPage}

{LikeButton color=“grey” size=“14”}{ReblogButton color=“grey” size=“14”}{NoteCount}

{/block:IndexPage}[Other stuff here]

{/block:Posts}

4. Next, you have to add one final div inside of the one that you wrapped the information in.  This will serve as the “box” that holds all of the information in the center of the posts:

{block:Posts} {block:IndexPage}

{LikeButton color=“gray” size=“14”}{ReblogButton color=“grey” size=“14”}{NoteCount}

{/block:IndexPage}[Other stuff here]

{/block:Posts} 

…And that’s it for the HTML!  Now for the CSS, which is where the ~magic~ happens.  I’m not going to go into detail about how to style the “posts” tag, because I’m assuming you already know how you want your posts to look, and this tutorial is already über long LOL.  So for the sake of this tutorial, let’s just assume that your posts are 250px wide. 

5. So the first thing you want to do is to put some space in between the post information, so that it’s not all squished together.  For example:

.like {   display: inline-block;   padding-right: 5px;   padding-top: 2px;   padding-bottom: 2px;   padding-left: 5px;}.rb {   display: inline-block;   padding-top: 2px;   padding-bottom: 2px;   padding-left: 5px;   padding-right: 5px;}.noteslabel {   padding-left: 5px;   font-size: 16px;   color: #ccc;   display: inline-block;}

6. Now it’s time to style the “perm” tag: 

.perm {    position: absolute;    width: 100%;    height: 100%;    top: 0;    left: 0;    opacity: 0;    overflow: hidden;    background-color: rgba(255, 255, 255, 0.5);}

There are a few things to keep in mind:

The position MUST be absolute, or else it won’t work when you hover over the posts! 

The width and height should both be 100%, to match the width and height of your posts.

The “top” and “left” properties should be set to 0. 

The opacity MUST be 0; you don’t want the information to show up on top of a post when you’re not hovering over it!

Remember to hide the overflow; this is to prevent anything from spilling over the sides of your posts.

I used the rgba property to make it so that the “background” color is translucent white, but you can change the color and/or opacity if you want to. 

7. Style the “box” tag as well:

.box {   background-color: #4a404a;   text-align: center;   position: absolute;   width: 100%;   top: 50%;   transform: translate(0, -50%)   padding-top: 2px;   padding-bottom: 2px;}

This part is really important, and also the hardest; it is what makes the information horizontally and vertically centered.  Here are some pointers:

Setting the “text-align” property to “center” places the information horizontally in the center of the box.

Like the “perm” tag, the “box” tag should be absolutely positioned and should have a width of 100%.  (You can also give it a height, but I prefer to just change the padding, which you can play around with.)

The “top” value MUST be set to 50%–this is what aligns the box in the center of the posts!

You also MUST use the “translate” value (which itself has two values–one for the x-axis, and one for the y-axis) of the “transform” attribute to align the “box” element vertically.  The x-value is set to 0, so that the “box” element doesn’t go anywhere horizontally, while the y-value is set to 50%, so that it is displayed halfway down the posts’ height.

8.  Now for the final step–making the information appear on hover!  Simply add “:hover” right after the “posts” tag, and then the “perm” tag after that.  This tells Tumblr to show everything contained in the “perm” tag (including the “box” tag, which in turn contains the post information) when you hover over the posts. 

#posts:hover .perm {    opacity: 1;    -moz-transition-duration: 0.8s;    -o-transition-duration: 0.8s;    -webkit-transition-duration: 0.8s;    transition-duration: 0.8s}

In terms of styling, all you really need to do is set the opacity to 1. 

However, you can also add in some fancy transition effects if you want (Adjust the values to make the transition happen more quickly or more slowly, and make sure that they’re the same for each browser.  I honestly don’t know much about transitions, but you can read more about them here.).  

Thanks for your question!  I actually just figured out why this is happening literally a few seconds ago, and it turns out that it’s because {NoteCount} isn’t capitalized properly!  So just replace {Notecount}/{notecount} with {NoteCount}.

And THAT’S IT.  Can you believe that?!  I didn’t know that Tumblr is so picky!  

Keep in mind that these instructions are the same for ALL OF MY THEMES.  

On that note (EDIT: See what I accidentally did there?  LOL I’m so punny…okay I’ll leave now.), if you’re using a theme with more than one instance of {NoteCount}, then all you have to do, once you’re on the “Edit HTML” page, is:

1. Press Command+F on your keyboard (or Control+F if you’re using a PC).  

2. In the “Search for” bar, type in {NoteCount} (The capitalization doesn’t matter here.).

3. In the “Replace with” bar, type in {NoteCount} (The capitalization here DOES matter!).

4. Click on “All” next to the “Replace with” bar.

Now all of the instances of {NoteCount} have been replaced with the properly-capitalized version!

Thanks for your question!  And you’re welcome–I’m so happy that you like it!  To add the content source on the Permalink Page, all you have to do is copy and paste the following code between {block:PermalinkPage} and {/block:PermalinkPage} (make sure it’s the one at the very end, right before {/block:Posts}):

{block:ContentSource} {/block:ContentSource}

In between these blocks, you can either put {SourceTitle}, if you just want the name of the source to show up, or {SourceURL}, if you want the URL of the source to show up.

So it would either look like this:{block:ContentSource} {SourceTitle} {/block:ContentSource}

or like this:

{block:ContentSource} {SourceURL} {/block:ContentSource}

Personally, I recommend putting this information right below {/block:RebloggedFrom}, so it’ll show the place you reblogged the post from, and the source right below it.  

Also, you should note that if a post doesn’t have a source for whatever reason and there is no source information to display, then nothing will show up.  

Doing the above will only show the name or title of the source, so if that’s all you were looking for, then you can stop here.  BUT!  I HIGHLY recommend that you apply some styling to it, so that:

a) people know that the source is, you know, the source;

b) people can click on the source name/URL and actually have it link to that source; and 

c) it looks good and blends well with the rest of the theme.

So, in order to do all of that, you need to do the following (I’m going to use {SourceTitle} only from now on, because typing out examples for both the source name and source URL is tedious, plus regardless of which one you choose to use, the styling is the same.):

1. Before {SourceTitle}, simply type “Source: ” (without the quotation marks, BUT LEAVE THE SPACE!) like so:

{block:ContentSource}Source: {SourceTitle} {/block:ContentSource}

2. Next, you should wrap {SourceTitle} with “{SourceURL}”>, like so:

“{SourceURL}”>{SourceTitle}

This will enable people to click on the source title itself and be led to the place where the post originally came from.

3. Now, wrap that with  

“content-source”>

, so that your code looks like this:

{block:ContentSource}

“content-source”>Source: “{SourceURL}”>{SourceTitle}

{/block:ContentSource}

SECOND EDIT: YOU MUST USE STRAIGHT QUOTATION MARKS (“”) INSTEAD OF CURLY ONES (“”) IN ORDER FOR THIS TO WORK.  I have no idea why, it’s just one of Tumblr’s fun little glitches, I guess (?).  Anyway, I changed it for this post.  Also, you can’t really tell the difference between the two on my blog (I guess it’s the font?) but when you’re editing your code, you CAN tell, so double check!

(Note: If you want, you can change the name of the div to whatever you would like, as long as it hasn’t already been used in the code already.)  

Doing this will allow you to style how the source information looks.  

4. In order for it to blend well with the rest of the theme, I recommend copying and pasting the following CSS anywhere before the tag:

.content-source{text-align:center;} .content-source a{font-weight:bold;}

EDIT: You should also add some padding to the top, so that there’s some room between the source information and the post itself; I’d recommend about 20px:

.content-source{text-align:center; padding-top:20px;}

This way, the source information will be aligned in the center of the page, just like the “Via” information, and the source name link will be bolded, just like the other links in the “Mirror” Theme.  

…And now you’re done!  These instructions will also work for any of my other themes (although you’ll probably want to change the CSS so that it matches with the rest of the theme).

Also, if you want to learn more about how to add/subtract things from my themes (or any themes in general), then I highly recommend looking at this, Tumblr’s guide to documentation.

Thanks for your question!  Adding a background image to a theme is really easy; just copy and paste the following code under body:

background:url("");

Add the URL in between the quotation marks.  That’s it for adding the image into your theme, but I’ll also mention some other things that you may want to add to make it look better.

If you don’t want the image to repeat, then add this:

background-repeat:no-repeat;

If you want the background image to scroll with the page, then add this:

background-attachment: scroll;

…and if not, change scroll to fixed.

Lastly, you can change the size of the image; to make it cover the whole body, add this:

background-size:100% 100%;

“MAY” THEME

PREVIEW | CODE

Features:

400px posts

One column

Infinite scrolling

Bottom bar

Hover over bottom bar for description, menu, and “Back to Top” button

Three customizable links

Fully customizable colors and fonts

Like, Reblog, and Note Count on hover