Proboards Basic CSS tutorial

[Peter]

alright, before doing reading this Tutorial, you'll want to read this one
CSS basic layout Tutorial

and also, i've already written a tutorial on how to make scroll bars, right here
Scrollbar CSS Tutorial

so, now, on with the Tutorial
now, some of the main things are,
.catbg = the category bar
.titlebg = the forum title bar
.welcomebg = the welcome table yeah
.menubg = the menu bar, the place where "Home" "Calendar" and those buttons are
.windowbg1 = all odd numbered posts
.windowbg2 = all even numbered posts

you can see those all over the board

now, some of the special things that some people want to learn of are textarea, input, and select
textarea = the box you write in when posting
input = the little button your press to do something, like post, preview
select = drop down menu's

here is a little picture that shows those



now, to add a picture to the in there (you would want to read the CSS basic layout Tutorial to know how to do the other stuff)
all you do is

<style>
textarea
{
background-image: url(URL TO PICTURE);
}
</style>

now, to make it not repeat

<style>
textarea
{
background-image: url(URL TO PICTURE);
background-repeat: no-repeat;
}
</style>

and to center the picture

<style>
textarea
{
background-image: url(URL TO PICTURE);
background-position: center center;
}
</style>

to make a background picture stay in place when scrolling

<style>
textarea
{
background-image: url(URL TO PICTURE);
background-attachment: fixed;
}
</style>

now, how about a cursor, make sure, when adding cursors, that the address is .cur

so it would be

<style>
body
{
cursor: url(URL TO CURSOR);
}
</style>

you can put a cursor almost anywhere, so like you want a cursor for your textarea box, then it's be

<style>
textarea
{
cursor: url(URL TO CURSOR);
}
</style>

now, for links
to change link color

<style>
A:link
{
color: COLOR;
}
</style>

to change a color when your cursor goes over it

<style>
A:hover
{
color: COLOR;
}
</style>

and to change the color of a link after you clicked it

<style>
A:visited
{
color: COLOR;
}
</style>

well, thats all i can think of for now, check back for later, becuase if i think of something i'll edit it in ^_~

Tutorial By: Uchiha Sasuke