~~~just an FYI that this tutorial is often complicated and awkward to understand and i am in dire need of making it easier to use. i will remove this when i have fixed it~~~
BELOW IS A FANTASTIC TUTORIAL ABOUT UPDATES TABS AND TEXT AND FONTS
ALRIGHT CHILDREN GATHER ROUND (btw thank you so much for complimenting me it means a hell of a lot)
this is what my updates tab used to look like:
AND YA'LL ARE GONNA LEARN HOW TO MAKE IT LOOK PRETTY
okay so i'm going to address this in order and i am not using any capital letters or good grammar because no
1. BORDER
okay so in the html of the updates tab that i use (tutorial at the bottom) there is this section
for most people i think "dashed" says "solid" okay okay
so you change that to either "dashed" or "dotted" like so
and it will change the border of your updates box.
if you want a double border like my current one, change the border part to say border:3px double#b8b8b8
2. FONTS
okay bitches this is my least favorite part eewwwwww
so first off you have to download a font that you want. i use shadows into light for my +watching etc.
you NEED to make sure that you open the zip file and safe the ttf or otf file. a zip file WILL NOT UPLOAD. only otf/ttf.
by this i mean you just have to open the zip file. after you've done that you just make sure the contents of the file get saved to your computer (there should be at least one otf or ttf file inside) and when you are uploading them to tumblr you choose one of the ttf files inside of the zip instead of choosing the zip itself.
then you go to THIS LINK and upload the font you downloaded. it gives you a link at the bottom of the page like so
you need to copy that link.
now you go into your html on your page, and you go under all that "metaname" type stuff right? above <style type="text/css"> you need to type this exact template
except you MUST REPLACE: "sail" with the name of the font you want to upload, and you must replace the "http://static...." link with the link you copied earlier.
ONCE YOU HAVE DONE THAT you have the font downloaded onto your theme. okay.
now you go to the text that you want to be the new font and you put it like so: <font face="font name that you typed in the template from before">text here</font>
UNLESS IT IS A LINK if it is a link then you have to put the <font face=""> before your link html (<a href="">) and the </font> after the </a>
then you should have the text be your new font. yay!
EDIT: I RECENTLY FOUND THE MOST AMAZING FUCKING THING YOU EVER SAW IF YOU GO HERE IT HAS A SHIT TON (77) ALREADY UPLOADED FONT CODES AND I THOUGHT YOU GUYS WOULD APPRECIATE THAT
3. TEXT COLOR/SIZE CHANGING
so this is easier than it sounds. all you have to do is put <font color="#??????">text here</font>
to get the #?????? part, i go to a website that offers html colors, such as this one or this one. (the first one is my preference but it doesnt matter). you replace the #?????? with the one that you copy off either of those websites.
if you want to change the size of the text, you can put <font size="a number anywhere from 1 to whatever">text here</font>
the bigger the number, the bigger the text. another easy way to make font bigger/smaller is to put either <big>text</big> or <small>text</small>
4. THE DIVIDERS
okay so you didn't actually ask about this but i feel the need to tell you how to make them because i love them and they are so very pretty wow
so i owe knowing how to do this to savannah, (i will explain my evil trick at the end of this tutorial). all you have to do is put a <br> and paste this (the br may not be necessary in some cases but is recommended):
<img src="image url here" height="17" width="110">
and replace "image url here" with your own link and newly typed quotation marks. then you can mess with the size of the image (the height and width numbers) if you think it looks squished or stretched or whatever.
i use this one in my theme, but some other really great ones are found in this google search or here. if you scroll through them in that second link, they are really pretty and usually fit the format i gave you earlier. you click on the link that comes after "direct" to get the url you need to paste in the "image url here" spot (the one it directly sends you to i like a lot).
EDIT: this masterpost of dividers is the bee's knees okay
i am almost positive that that is everything. if there is anything else you want to know, ask me about it!
BONUS INFORMATION
to have your font underlined, put <u>text here</u>
to have strikethrough put <strike>text</strike>
to have something show up when you hover over a link, add a title="" into your link html. it will look like this: <a href="link here" title="the stuff you want to have show up when you hover">text</a>
to have scrolling text like in my "psst my sidebar randomizes", put <marquee>text</marquee> but that makes it go really fast so if you put <marquee scrollamount=2>text</marquee> it goes the speed that mine does
this has nothing to do with updates tabs but if you want your blog title to scroll the way mine does than you can put this code in your html right before all your metaname tags
<script type="text/javascript"> var rev = "fwd"; function titlebar(val) { var msg = "change the text here to what you want to scroll"; var res = " "; var speed = 100; var pos = val;3 msg = "change this to the exact same text as in the var msg place"; var le = msg.length; if(rev == "fwd"){ if(pos < le){ pos = pos+1; scroll = msg.substr(0,pos); document.title = scroll; timer = window.setTimeout("titlebar("+pos+")",speed);} else{ rev = "bwd"; timer = window.setTimeout("titlebar("+pos+")",speed);}} else{ if(pos > 0){ pos = pos-1; var ale = le-pos; scrol = msg.substr(ale,le); document.title = scrol; timer = window.setTimeout("titlebar("+pos+")",speed);} else{ rev = "fwd"; timer = window.setTimeout("titlebar("+pos+")",speed); }}} titlebar(0); </script>
so yeah besides that, contact me if you want any help. feel free to like/reblog if this helped you (it would mean a lot)
peace out bitches,
Clara
IMPORTANT NOTE: I do NOT encourage the use of Page Source viewing to steal codes from other bloggers. I previously included how to view the page source in this tutorial, but i have now removed it because I feel that people are simply using it to steal. My goal when showing you how to do this was to allow you to learn, as I did. Stealing code from others is not the same as learning and attempting to understand code by example. Please, do not abuse this resource. I, as well as many others, have disabled right clicking on my blog due to this violation of my page source. Please, act responsibly.
