[/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.
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.
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...
[/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.
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
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...
That was helpful. Thanks for sharing your knowledge... I guess that's enough for me to start playing with my userpage.
This is very useful. Thank you for taking your time to do this. Would you happen to know how to make your own header?
h2 is a container tag. h5, and h6 are free for you do apply styles on them if you're worried about the IE problem.
uHh.. thanks ^^
Thanks, alot ^^
It's very useful...