(semi-hiatus) ettudis/ browse/ history/ ask/ Contains theme-related question and answers, html and css tutorials, resources of all types.

Themes are located on the website (click the link labeled "content", it will drop down to link to "tumblr themes").

1 2 3 »
Hi! Is it possible to change some codes to add more pages for theme 10? — strawberryiceblended

Yes, it is absolutely possible! And well, since I have had pages questions before, here’s what you do (and this applies to most themes) so you don’t have to manually add the page URLs in… 

Paste the following before the <a href=”/archive”>archives</a> tags:

{block:HasPages}{block:Pages} <a href=”{URL}”>{Label}</a>{/block:Pages} {/block:HasPages}

And that way, whenever you add a page, just make sure you select “show link to page” and the pages will be listed. Hope that helps!

I was wondering how you put a header in for theme #1? I can't seem to put it in and make it work Dx — dreamingofmuffins

It’s a bit of a long process. You need to know a bit of HTML before you go about doing this. First, create a div layer to put your header. So in the CSS (after the <style> tag), put in something similar to this:

#header{
position: absolute;
left:230px;
top:10px;
width:700px;
height:200px;
margin:15px;
z-index:1000;

Okay, it’s fairly straightforward.

The position dictates if you want it either absolute (it scrolls upward when you scroll upward) or fixed (it stays in the same position even when you scroll up or down, like the sidebar).

The left dictates how many pixels from the left of the window the layer will be. The top dictates how many pixels from the top the layer will be. As for margin, please refer to this picture post. z-index dictates the layering of the div, the bigger the number, the layer will be placed on top of the other layers. 

Next, go to the HTML (after the <body> tag) and paste the following:

<div id=”header”><img src=”IMAGE_URL_HERE"></div>

Now, find the following codes and adjust the top position so that it is moved underneath the header layer. 

#sidebar {
width: 220px; 
font-size: 9px;
line-height: 10px;
left: 760px;
top: 50px;
position: fixed;
color: {color:sidebar text};
}

And then it’s done! Hopefully, that worked out for you! If you need any help, let me know.

How to reduce the opacity of the images in the theme 20? — Anonymous

The opacity of the images are already reduced? Unless you want to reduce them further! In that case, find the following:

#entry img{ max-width:390px!important; margin:5px; opacity: 0.7; filter:alpha(opacity=70); -moz-opacity: 0.7; -khtml-opacity: 0.7; }

Decrease the bolded numbers. 

Hello. I have a html question - how do I make the image in the blockquote smaller or cut off overflow? Your help would be very appreciated. Thanks. — un-et-deux-deactivated20120311

you can insert the following in the CSS (after <style> tag)

blockquote img {max-width:XXXpx;}

Replace XXX with a number of your choice (smaller than your post width, generally 500, 400 or 250). 

OR you can find the CSS tag for the post (I usually ID my post div layers “main” or “entry”) and insert the following in the CSS:

overflow:hidden;

But for this one, you need to make sure the CSS tag for the post actually has the width property in it. So example:

#main {
width:400px;
position:absolute;
left:200px;top:50px;
overflow:hidden;
}

Hopefully, that was clear. It would be easier if you told me in specific which theme so I can edit it for your or something. 

Hi! I'm currently using your Nornir theme (which I love!), and I just noticed that when I post/reblog photosets, the border around the entire set isn't completely even (like with photo posts, text, etc). Is there a way to fix this? :) Thank you! — asonde

Ah, minor detail I didn’t notice >.< Find the following in the code:

<div style="padding-left:5px;padding-top:5px;">{block:Photoset}{Photoset-400}{/block:Photoset}</div>

And replace with this:

<div align="center">{block:Photoset}{Photoset-400}{/block:Photoset}</div>

That should do the trick! (I’ve also fixed the codes so you can redownload it if you want.

Hello, I'm using theme 010 and some of my text posts are written in lower case letters. I'd like to remove this feature, but the thing is that only some of my posts are like this. Can you help me? — kuroib0x-deactivated20131213

Find the following:

.caption {

text-transform: lowercase;
text-align: left; 

}

Change the bolded text to “none”

I'm using theme 021, do you know how to change the "PERMALINK" link into the number of notes? Please answer, thank you ^^ — seoullight-deactivated20120510

Look for the following:

<a href=”{Permalink}”>PERMALINK</a>

And replace with following:

<a href=”{Permalink}”>{NoteCountwithLabel}</a>

How to make tag page ? — Anonymous

  1. go to your blog page (not your dashboard) — http://www.tumblr.com/blog/TUMBLRNAME
  2. click “customize appearance”
  3. scroll down to “pages” and click it, it should drop down and you should be able to see a label “add a page”, click that. 
  4. a page should pop up, enter links to your tags.

for example, the URL of your tags should look something like: http://YOURTUMBLRNAME.tumblr.com/tagged/TAGNAME

example: http://ettudis.tumblr.com/tagged/resource

Ah~ not sure if that was clear or not. If you have any questions, feel free to message me back. 

hi there, can you tell me how to change text font in theme nr 21? :) — parvats

Look for the following:

body { font-family: lucida console, trebuchet ms, sans-serif;

Replace the font with a font of your choice. 

Hi there! I love your themes and all the cool resources you have to help us lost people out xDD I'm currently using theme 19, but i'm finding that the column is a bit to narrow and cuts some of my images off at the side. How do I widen the column? Also, would you happen to know how to make the header float so that it always stays at the top of your screen no matter how far down you scroll? Thanks! — tsven

Thank you <3 Okay, so, basically, use a search/find tool and replace ANYTHING that states “400” with “500”. If you run into problems, DO NOT hesitate to ask, seriously :D that’s the easiest way I can explain for you to do.

As for the header to “float”, many have asked that question and *sigh* it’s complicated business (as explained here ~ it’s the same problem)… 

But… seeing as there is a large demand for it (you’re not the first person that’s asked me…), I’ll go fiddle around and upload a code for it. The thing is that you will need to adjust the position of the header yourself (again, read this) because that’s the only way I can make the header fixed.  

How do I put a picture as the header in theme 19? — Anonymous

There are two ways, you can either upload an image as a background for the topbar, or you can insert an image in your description. 

Method A. Backgound Image for topbar…

Find the following in the codes:

#topcontainer{ background:{color:topbar background};

And replace with the following:

#topcontainer{ background:{color:topbar background} url(DIRECT_LINK_TO_IMAGE_FILE);

And you can adjust the height of the topbar by adding the height, it will look something to the following (adjust the numerical value to your own):

#topcontainer{ background:{color:topbar background} url(DIRECT_LINK_TO_IMAGE_FILE);
height: 500px;

Method B. Inserting image in topbar

Find the following in the codes:

<div id=”desc”>{block:Description}<p>{Description}</p>{/block:Description}</div>

And insert an image code after the above. So you will end up with something like this:

<div id=”desc”>{block:Description}<p>{Description}</p>{/block:Description}</div>

<img src=”DIRECT_LINK_TO_IMAGE_HERE”>

<div id=”menu” align=”center”>

Hello! I'm using your theme 021 Chorale theme, and I was wondering if I could somehow add the time when entries are posted? like in the perma-link section it would say "posted 18 minutes ago" and likewise? Also, is there a way to make album art appear on this theme? thank you in advance! I love your themes! ♥ — paris-royale

Everything you need to know is here. That’s how you would configure the date. However, where to put it is another question. You need to be more specific on that part so I can give you an exact code if you want it :D

As for the album art, find the following…

{block:Audio}
<div id=”audiotext”>{PlayCountWithLabel}</div>
<div id=”audio”>{AudioPlayerBlack}</div>
<div id=”audiotext”>{block:Caption}{Caption}{/block:Caption}</div>
{/block:Audio}

and replace with this:

{block:Audio}
<div id=”audiotext”>{PlayCountWithLabel}</div><table width=”300” border=”0” height=”50” cellspacing=”0” cellpadding=”0” style=”margin-left: 15px”><tr>
<td width=”50”>{block:AlbumArt}<img src=”{AlbumArtURL}” width=”50”>{/block:AlbumArt}</td>
<td width=”250” id=”audio”>{AudioPlayerBlack}</td></tr></table>
<div id=”audiotext”>{block:Caption}{Caption}{/block:Caption}</div>
{/block:Audio}

Remember to retype the quotations. 

Heyy, sorry to bother you, I'm currently using theme 18 and I'm wondering how I can put a reblog button for my posts. I tried looking through your tutorials but it didn't seem to work for me. ): — hachimitsu

Here is a tutorial on how to post a reblog link. It really depends on where you want to put the reblog button. For example, if you want to put it with the tags (on the index page) in theme 18, it would look like the following:

<div id=”perma”>{block:Date}&raquo; <a href=”{Permalink}”>{ShortMonth} {DayOfMonth},{Year}</a>{/block:Date}<br>
{NoteCountWithLabel}
{block:RebloggedFrom}<br>via <a href=”{ReblogParentURL}” title=”{ReblogParentTitle}”>{ReblogParentName}</a><br> origin <a href=”{ReblogRootURL}” title=”{ReblogRootTitle}”>{ReblogRootName}</a>{/block:RebloggedFrom}
{block:HasTags}<br>tagged {block:Tags}<a href=”{TagURL}”>{Tag}</a>, {/block:Tags}{/block:HasTags}</div><a href=”http://tmv.proto.jp/reblog.php?post_url={Permalink};”><img src=”http://assets.tumblr.com/images/iframe_reblog_alpha.png?4”/>

You can also replace the image with text :D

I'm not sure if this was asked already and I looked through the tutorial on how to do the fading effect for images, but is their a code to do the fading effect for photosets, too? I also wanted my sidebar image and icon to not be faded. I'm sorry, but this would help me alot if you could tell me, please and thank you. Oh I'm also using theme 21 btw. — glaciaca

ahhh, sorry. An anon person questioned this before and then I realized that I gave him/her the wrong answer… I thought that the fading effect (for images) would directly apply to the images in the posts but photosets are displayed using iframes so that the effect doesn’t apply to the photoset images. 

Here’s what you can do, you can insert the following into your code:

iframe { opacity: 0.9; filter:alpha(opacity=90); -moz-opacity: 0.9; -khtml-opacity: 0.9; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease;}

iframe:hover{ opacity: 1; filter:alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; }

Change the opacity to whatever you would like. And that should make the photosets fade. 

hello, i really need your help. ;_; i'm making a theme and i've finished but im trying to get rid of the numbers list besides the user's userpic and where it says '____ reblogged from _____' it's where the {PostNotes} section is. i hope this makes sense. — Anonymous

Everything you need to know is in this section. The theme doc is the bible for tumblr theme-makers :D I always check there is I’m not sure about something or I google it. Nevertheless, I’ll just paraphrase it for you:

What tumblr does is that it makes the notes section a list, so you need to specify in your CSS to not display it as a list. So here’s what you put in your CSS:

ol.notes { list-style-type: none;}

And that’s basically it. Easy right? Happy tumblr-theme making (I would love to see the final result!) <3