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!
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.
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.
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.
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.
Find the following:
.caption {
text-transform: lowercase;
text-align: left;}
Change the bolded text to “none”
Look for the following:
<a href=”{Permalink}”>PERMALINK</a>
And replace with following:
<a href=”{Permalink}”>{NoteCountwithLabel}</a>
- go to your blog page (not your dashboard) — http://www.tumblr.com/blog/TUMBLRNAME
- click “customize appearance”
- 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.
- 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
Ah~ not sure if that was clear or not. If you have any questions, feel free to message me back.
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.
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”>
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.
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}» <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
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.
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
