#neo does html

[metaphoricalfugue]

hey bby can you maybe explain some of the coding you use for the content of your updates tab? Please? (such as fonts and placement and colours and shit) <3 <3

Aww yeah. Get ready for…

NEO DOES HTML…UPDATES TAB EDITION

[putting this under a read more because it got really long]

Fonts

Changing the font of text using html is a tricky thing, because a font text command will only work if the font you’re specifying is already loaded onto the computer you want to display the text on. So you might download some crazy awesome font to your computer and call to it in a command, and it’ll show up just fine for you, but for everyone else…not so much.

One way to get around this problem is to create an image with the text you want to display in it and then place the image wherever you want. 

Speaking of which, the way to insert an image into an updates tab (or anywhere in html, for that matter) is like so:

If you want the image centered, use:

However. The way you do call on a font is like this:

text text text

These are some standard fonts that will show up on almost every computer:

arial font

algerian font

bookman font

braggadocio font

courier font

desdemona font

garamond font

modern font

symbol font(Somewhat conspicuous.)

wingdings font(Even more conspicuous.)

PLACEMENT

Not entirely sure what you mean by “placement,” but I’m going to assume you mean placement of the tab itself.

Somewhere in your html you’ll have some code that looks like this:

#updatestab { //div reference so div can be called on laterfont-family:calibri; //specifies font family. font is defined earlier in code.font-size:10px; //font sizecolor: #000000; //font colorwidth:125px; //text box widthheight:auto; //text box heightpadding-top:3px; //margins inside boxborder:1px solid#b8b8b8; //color and thickness of border margin-left:20px; //positioning of text boxmargin-top:-50px; //positioning of text boxtext-align:center; //text is aligned in the centerposition:fixed; //makes it so the box doesn’t float around on different sized moniters}

To adjust the placement of the tab itself, change the values after margin-left and margin-top to whatever you want. It will probably take some fiddling around to find a position you like - I know that about half the time I spent on my old updates tab was shifting it over one pixel and then back and deciding which was better.

NOTE: If you have a standard updates tab where you hover over an image and a little box with some text in it appears, there should be two div ids - one for the text box and one for the picture. The one for the picture will look very similar, like so:

#updatestab img{width:70px;margin-top: -150px;margin-left: 50px;position:fixed;}

You can alter the position of the image, again, by changing the margin-top and margin-left values.

COLORS

Changing the color of text is, thankfully, really easy. First you need to find the html color code of the color you want. I use this site. Find the color you want and copy the string of numbers and letters in the box at the top. Then use the following code to change the text:

text text text text

For example:

this text should be bluish

Ta-da!

You can also put a little box of color around text (check out my updates tab for examples of this). To do so:

text text text text

The padding is basically how big the box is going to be. The 1px means that the border of the box will be at a 1 pixel distance from every side of the text. (Sorry, I know that was a bad explanation, but it’s difficult to describe…try changing that value to see what happens.)

I know that was a lot, but I hope it was helpful! 

[metaphoricalfugue]

hey I was wondering how did you get the snow and christmas lights on your blog? I really like them :)

Glad you do! 

SNOW

Copy the following code before

snowStorm.snowColor = ‘#11ccff’; // Snow ColorsnowStorm.flakesMaxActive = 150; // Amount of Snowflakes FallingsnowStorm.flakeBottom = null; // Snowflakes piling up on bottom of your screen?

LIGHTS

Under find body { and copy the following code between body { and }

background: url(‘http://img90.imageshack.us/img90/3152/lightsn.gif’) repeat-x top center;

Hope this helps!

[metaphoricalfugue]

Hey! thanks for voting in my poll and I was wondering how you got all your super long updates tabs and everything? the ones that just appear? if you could link me to a tutorial that would be awesome :D

No problem! I used this tutorial.

[metaphoricalfugue]

Forgive me if like a million people have already asked this, but how did you get the scrollbar on your bottom updates tab?

You're fine! I've actually never gotten this question before.

It's pretty simple. All you have to do is define a set height for your tab - so for my bottom one, it's 150px tall. And then you need to make sure your y-axis overflow is set to "scroll." So under or <style type=text/css> you should have something like this:

#updatestab {

font-family:calibri;

font-size:10px;

color: #b8b8b8;

width:130px;

height:150px;

padding-top:0px;

border:1px solid#b8b8b8;

bottom:80px;

left:4px;

text-align:center;

position:fixed;

overflow-y:scroll;

}

And you should be good to go!

[metaphoricalfugue]

Hey, this might sound strange but i have no other way to put it to get you to understand but you know how you just did your promo for lovelyoswalds person? Well, you had a graybar across their url on your post. How can you do that? I see people do it and its not the block quote thingy bt how do you do it please? :)

No problem! It's quite easy. All you do is type your text, hit the 'html' button on the post editor, and where you see <*p> [your text here] *p> replace it with <*pre> [your text here] *pre> (but without the asterisks). 

So:

Hello World!

becomes

Hello World!

Hope that was helpful!

[metaphoricalfugue]

Two updates tabs? No problem.

Okay, so in taking my survey, someone asked how I was able to get two updates tabs. Let's get this show on the road.

It's really just a matter of finding the code you want for one updates tab and then duplicating it (but make sure you position the second one differently). I took the code for the TARDIS one, added it to the html on my blog, then took the code for the eye one and added it to the html as well. I re-jiggered the placement so that the eye one was where I wanted it and not right over the TARDIS one.

If you're looking for updates tab codes, I'd recommend searching through the updates tab tag. 

[metaphoricalfugue]

how do you get 2 update tabs?:)

Click here for explanation of the TARDIS one

And here for the stag one.

[metaphoricalfugue]

How did you put that little gray box around the text in the description of the thing you just reblogged?

Okay. After you've typed your text, click "html."

You should see a window that looks like this.

Change

and

to

and

.

Then click "html" again to go back to the normal post editor. The text will look like a different font (but no gray box). THIS IS NORMAL.

Once you post the post, the gray box will show up.

And there you have it!