Shimmering Themes

Thanks for your question!  Don’t worry, you did nothing wrong.  I actually just updated the theme, and the Permalink page is working fine now, so EVERYONE GO RE-INSTALL THE MOSAIC THEME!!!

Thanks for your question!  I actually answered it here (except that person had asked about my “Mosaic” theme, but the instructions are still the same).  Feel free to use the instructions from that post, or just re-install the “New York” theme, as I have updated it accordingly.

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.  

I hope that this helped!

Thanks for your question!  I figured out what was causing your problem; I used a formatter for the code that inserted the ‘space’ symbol (%20) where there should have been a space in the code for the links.  So you can either delete the ‘%20′ symbols (just use Command+F or Control+F to find them) and replace them with actual spaces, or just re-install the theme, as I have fixed it so that the links will work.

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.)

Unfortunately, I don’t understand what you mean in the second part of your question; did you want to know how to put a background image in your theme?  Because I visited your blog, and you seem to have done it right.  Unless you meant that you wanted to put a background in your sidebar?  If that’s what you meant, then simply do it the same way that you did for the background you are using on the rest of your blog (except put the code under #sidebar rather than body.)  I’m sorry that that wasn’t more helpful; please feel free to message me again if I misunderstood you.

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).

I hope that this was helpful, and not too confusing!

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. 

Also, I just tried changing the title font using a font from Google Fonts (I think I used the word ‘font’ to much LOL) and it worked.  You didn’t specify where you’re getting your font from, so maybe it has something to do with that?  (I’ve only really used Google Fonts, although I assume other free web font sites work pretty much the same way.)  What I did was paste the link to the font (i.e. ) before .  Then, I pasted font-family:[font name here]; under #blogtitle a–not #blogtitle, as the blog title is a link.  You also need to make sure that you add a semi-colon before font-family:[font name here]; if you’re adding it right before the closing curly brackets, since I used a formatter for the “May” theme code that stripped all of the last semi-colons.

I hope that was helpful, but if you’re still having trouble, please let me know.

Thanks for your question!  The rules for using my themes can be found here.  They are also listed in the codes themselves, at the very beginning.  So to answer your other question, no, you do not have to credit me in your bio, unless you want to; all you have to do is not remove the credit that I have already included as part of each theme.  I hope you enjoy the “Mirror” theme! 

Thanks for your question!  I’m sorry that you don’t like the drop-down navigation box.  If you want to delete it, all you have to do is find this code and delete it; it’s between the “nav” tags:

NavigationHomeArchive{Text:Link 1 Name}{Text:Link 2 Name}{Text:Link 3 Name}AskSubmitTheme

When I tested it out, nothing else changed in my blog; all of the posts were still there, as was the infinite scroll, so if something’s still not right on your end, let me know.  

Also, I’m assuming that you still want a navigation menu of some sort, so just replace the code above with whatever you want to go between the “nav” tags, and then fix the CSS accordingly.  (If you don’t want a navigation menu at all, then just delete the opening and closing “nav” tags, since you no longer need them, and delete the CSS for #nav as well.)

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!

EDIT: OH WAIT I just saw what you meant!  I misunderstood you the first time!  As it turns out, all you have to do is replace the curly quotation marks with straight ones; go back to the original post and re-read it for more information!

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.).  

So that’s how I get the post information to be centered and to display on hover.  If you made it through all of this, then good job!   

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 again, Anonymous, for your question–I honestly would not have realized this simple (but clearly VERY IMPORTANT) detail without it! 

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.

Sorry for the long post, but I hope that it was helpful!