Hello, Welcome to the MT CSS tutorial by DeadlyEraser!

Here you will learn to further decorate your userpage! I will give you examples and scripts how to do this. This is not writen for people who have not made any changes to their userpage at all, this is for the people who are unsatisfied with the colors of their Links, Text and forms that minitokyo does not atomaticly change for them.

All of the CODEING quotes will have to be wraped in style tags, Wrapping looks like this:

Quote by Wrapping Example<style type="text/css">
THE TEXT WITHIN THE CODEING QUOTE
</style>

All Italics will have to be replaced, in all of the CODEING quotes (Yes even the one above). All bold will be removed.

When ever you see "Insert CSS styling here" you should refer to the text below, you do not have to enter all of the examples below:

background: (this can either be a name of a color or a hex code (i.e. black or #000000));
color: (this can either be a name of a color or a hex code (i.e. black or #000000));
font-weight: (this can either be "bold" or "normal");
border: (looks like this: "border: 1px one pixle solid Style of line (solid, dotted, dashed, inset and outset) #000000 as above; );

The reason I give you this and not just give you the code itself is because I want you to be creative, I want you to ake something that is 100% yours.

Pseudo-classes:
:hover (When your mouse is over the element)
:visited (When you have already clicked the link)
:active (When you are useing a link)
:focus (when you are useing an element, i.e. forms)

We will start of with the basic colors of the Links that does not change:

- From the top down! The first thing we will change is the Minitokyo Menu:

Quote by CODEING#menu li a
{Insert CSS styling here}
#menu li a:hover
{Insert CSS styling here}

- Now for the side menus (left and right):

Quote by CODEING#leftMenu li a, #rightMenu li a
{Insert CSS styling here}
#leftMenu li a:hover, #rightMenu li a:hover
{Insert CSS styling here}

- Now for the middle content:

Quote by CODEING#content a:hover
{border:none; border-bottom:1px dotted #BB0000;}
Note for this you want to just change the "border-botom" color (the hex code) to the color of your links when the mouse is over it

We will now change the basic colors of the text that does not change:

- This will color the part where it says your name in bold near the begining of the middle content:

Quote by CODEING
#treeNav span
{Insert CSS styling here}

- This will fix the color of the text in the side menus:

Quote by CODEING#leftMenu dt, #rightMenu dt
{Insert CSS styling here}
#leftMenu h1, #rightMenu h1
{Insert CSS styling here}

- This just cleans up some random MT-blue:

Quote by CODEING
th, ul, dt, hr, h1, th
{Insert CSS styling here}

We will now change the basic colors of the Forms (login and posting) that does not change:

- This one will change the color of the Inputs (what you type in):

Quote by CODEINGtextarea, input, input.text, input.long, input.file, input.mini, textarea, select, #leftMenu input.text
{Insert CSS styling here}
textarea:focus, input:focus, input.text:focus, input.long:focus, input.file:focus, input.mini:focus, textarea:focus, select:focus, #leftMenu input.text:focus
{Insert CSS styling here}

- This willl change the color of the border around the forms that tell you what it is:

Quote by CODEINGfieldset
{Insert CSS styling here}

More tutorials can be found here: Userpage Skin Designs and a CSS refrence here: W3C CSS

That basicly wrappes it up If you have more questions or comments about this post please message DeadlyEraser!

I was wondering how I could customize some of these seemingly uncustomizably elements, especially the text of the navigation bar. Thanks so much for the tutorial DeadlyEraser ^^

Hmm, I'm still having trouble with the MT-Blue horizontal lines showing up everywhere, and when I try to change it, it actually changes some of the header text colors instead o.O

thanks for shareing all this with us..
i have to admitt you have have the most complete page on MT..MT3 is still with flaws..and some parts
can`t be colored as everyone can see..
and now groups can be customize too..manipulateing the layout with the help of HTML codes added to the content..
^^

If they only allowed js... I would have a whole new tutorial but this is the best they allow me to do...

whoa, nice tutorial!
Really useful, I'll use it when i change my layout (coming soon!)
Thanks for sharing this with us

HhahHAHAHAhAHA! It says on your page "Accomplishment: Pwning all who challenges..."

buddy, your userpage is like dust gone with the wind compared to mine, hahAHAH! But i've gotta give you credits for making this thread, since they don't have it in the Help/Support area.

Must say I was confused at first, but eventually I figured it out.
Thanks for your help with the codes, now my page looks much much better.