[/b]Some people been asking how to do customizing of their userpages other than changing the background image. So, I made up this tutorial. Its not too detailed on matters, but offers a little explaination on how to do some basic editing to it.
[b]Introduction
First of all, I'm gonna begin telling you that it be wise to check up on some of the CSS tutorials around the web
and have some basic knowlegde on HTML. You may want to load whatever colour codes and custom backgrounds first before
attempting to change the CSS settings. Since colour settings changes on your options effect the CSS file. Any terms that
you don't understand in the tutorial, feel free to post your questions so I'll update the tutorial
accordingly. Lets continue further..
Editing the current CSS options
Since you do not have full access to the main CSS file itself, all editing are done at your "Customize Userpage:
Content" instead. Add these lines to the TOP of your textarea field.
Quote:
<style type="text/css">
<!--.r {
text-align: right;
}
h2 {
font-size: 11pt;
font-weight: bold;
text-align: center;
margin: 2px;
color: #8899AA;
}
a {
font-family: Verdana;
color: #B0B8CB;
text-decoration: none;
}}
-->
</style>
Just subtitute the above with a copy and paste from the CSS file. Remember, custom tags requires that fullstop at the start. Thats the reason for the copy and pasting, so life would be easier :).
Viewing the CSS file
Lets check on the CSS responsible for your userpage shall we? Load up your userpage, and view source. Right click ->
View source. Find for a line similiar to this one. It be one of the first few lines of the source file.
<link rel="stylesheet" type="text/css" href="http://www.minitokyo.net/css/?blue"
/>
This is the default line if you have not change your colour settings previously. Else it'll end with something like
".../?custom=84599" />"
Copy that URL and paste it over on your browser and you'll be greeted with " What's so interesting about
this CSS file? xP". Good point. What's so intereting? Plenty :). Now I'm going to break the tutorial
according to each sub-header in the CSS file. So just ctrl+f to the one you're interested in.
As I said above, copying is done here.
Keys and Dictionary
I'll be using certain scripting terms. Post up if you're unsure about a term and I'll have it added in
this section.
* - This is what we call a wildcard. I use it to subtitute text. Since most sub-tags are pretty useless, i use it for
refering those. (i.e. "p.*" means "p.whatever")
Container Tag - Quite self explinanory. Its just a holding tag for people to edit it easily.
Nonbound Classes
This is where all your aligning of your layout mainly occurs. You'll prolly interested in text alignment tags and
nothing else. Best way to screw your userpage is by changing the values here. So, if you're a terrorist attacking
someone's userpage, read on...
.c - Aligns text to the center of the table cell. This is the center tag. Reason why <p align="center"> doesn't work is because of this little thing. So, use <p class="c"> instead.
.l - Aligns text to the left. Default text alignment is left, making this a useless. See .c tag for usage.
.r - Aligns text to the right. See .c tag for usage.
.half - Table multipulation. Not used in default layout.
.wide - Table multipulation. Sets the size of the navbar.
.max - Table multipulation. Set the size taken up by the main content tables.
.red - Whats this for? Beats me... Kinda useless IMO.
(I find the rest of the tags not useful unless you're planning to screw up your userpage)
Root Elements
This is where the text control is. Seen those userpages with custom font sizes? This is where they changed it at.
Remember when I said to read up on CSS tutorials? It helps here. Also another note, change the colour tags from
"Customize Userpage: Layout, Colours" if you're not used to CSS. Saves a little headache in the long
run.
h1 - Main title tag For content. The text that blends with the background in the default theme.
h2 - Container. Best for custom titles since the default is set to align center.
h3 - Sub-title tag for content. The smaller title text at the corner of each cell.
h4 - Title tag for navbars. You know, the text that covers your nick, 'Submissions', 'Threads', 'Favorites', etc.
Inline Elements
a - Tag for all hyperlinks on the page.
a:hover - Tag for all hyperlinks to follow when a mouseover is performed.
img - Tag that controls how images are decorated.
img.* - Not used.
span - Not used.
Block elements
This section controls all the main text functions in the content.
p - Covers everything <div> doesn't. You'll pretty much change this and div together with the same values.
p.comment - Used mainly for quotes.
p.poll - Currently, polls are not activated for userpages. Not used as for now.
div - Covers practically every single text
div.* - Yet to be defined. You can pretty much skip this.
Misc Elements
The minor stuffs goes here.
hr - Horizontal line breaker that seperates post and sig.
ul - Not used. Looks like a container tag for y'all to go crazy at.
Table Elements
STAY THE HADES AWAY FROM THIS!! Chances are that if you're gonna change this part, you wouldn't need this
tutorial (wonder why anyone would too).
Form Elements
Controls all forms, input buttons, radio checkboxes and etc. Since the only form elements in your userpage is the search
bar, guestbook entry and the sumbit buttons, change this to your discretion.
Values used in Tags
You may want to learn what each line is for even if you're too lazy to check on CSS tutorial (3rd time I'm
saying this. *hint hint* go read some :P). This covers the functions in default theme.
cursor: - Changes the cursor on mouseover. Not supported in non-IE browsers.
font-family: - As it says. The font type. Best to leave this alone as it covers pretty much all the standard windows
fonts.
font-size: - Font size.
font-weight: - Sets bold or normal text. Values are 'normal' and 'bold'.
text-align: - Text alignment. Values are 'left', 'center' and 'right'
color: - Text colour. Get a colour chart from google for reference.
letter-spacing: - Spacing in between letters.
top: - Adds that cool hovering text effect for h3 title tag.
Some things that are not covered in the default theme but worth mentioning.
font-style: - Sets font italics. Values are 'normal' and 'italics'
text-decoration: - Sets font style. Values are 'Blink', 'line-through', 'None',
'Overline', and 'Underline'
Scrollbar Colours
Here are the values for the scrollbar colours. I'll leave it up to you to mess around with it. Remember, this only
will show on IE.
scrollbar-face-color : #000000;
scrollbar-highlight-color : #000000;
scrollbar-3dlight-color : #000000;
scrollbar-shadow-color : #000000;
scrollbar-darkshadow-color : #000000;
scrollbar-track-color : #000000;
scrollbar-arrow-color : #000000;
Disadvantages of Changing the CSS File
-IE is too stupid to read another CSS file in a page to override the default one (so I heard).
-Scrollbars options do not work on mozilla browsers, only IE.
-Blink is a mozilla only feature.
-Most people will hate you for changing the font sizes and screwing up their screen since they use 1024x768 resolution
(me too).
-Sometimes, some setting shows different on different browsers. Best to view it in all to make sure its
alright.
If you ever screw up your userpage...
No worries. A simple solution to it. Just delete everything in your "Customize Userpage: Content" and click
done. So kindly do not PM me about how things work. I'm not a CSS guru. Just someone with too much time on his
hands to write this up...
