as it seems like some people dun really noe how to put up the codings for the group page, well this is not really a turorial but more or less telling you how to do it hahax..!

first of all copy this into the group's content

Quote:
<style type="text/css">
html, body {
color: #[--colour of text--];/*main box colour*/
font: 8pt;
font-family: "[--font--]";
}

#topLeft {background: url(slice 1) no-repeat bottom right;}

#topCenter {background: url(slice 2) no-repeat bottom left;}

#top {background: url(slice 3) repeat-x scroll left bottom;}

#main {background: url(slice 7);}

#leftMenu {background: url(slice 4) no-repeat top right;}

#rightMenu {background: url(slice 7);}

#content {background: url(slice 5) no-repeat top left;}

h1,h2,h3,#leftMenu h1,#rightMenu h1,p,dt,span,a {font: 6pt;font-family: "[--colour of text--]";}

input.text, input.file, input.radio, select, textarea {font: 7pt;
font-family: "[--font--]";}

<!-- a:hover {text-transform:!important; text-decoration: normal !important; font-style:

normal !important; font-weight: bold !important; text-transform: uppercase !important;

border-color: #[--colour of border--];; border-style:[--border type--];

border-width:1px;background:} -->body{

}
TABLE,TD,P,I,BODY,XMP,DIV,U(...) {color: transparent;}
A:link {color:#[--colour of link--];}
A:link {font: 8pt;}
A:active {color:#[--colour of link--];}
A:active {font: 8pt;}
A:visited {color:#[--colour of visited link--];}
A:visited {font: 8pt;}
A:hover {color:#[--colour of link when scroll pass--];
text-decoration: none;
text-transform: lowercase;
border-color: #[--colour of border--];
border-style:[--type of border--];
border-width:1px;
filter.alpha(opacity=50); moz-opacity:.50; opacity:.50;
font-weight: bold;
}
A:hover {font: 5pt;}
#leftMenu li a:hover, #rightMenu li a:hover {
color:#[--colour of text--]; font: 5pt;
border-width: 0px;
text-decoration: none;
text-transform: lowercase;
font-weight: bold;
}/*link colours in left menu box*/
.outer {
border-color: #[--colour of border--];/outer border of box*/
}
.inner {
border-color: #[--colour of border--];/*inner border of box*/
background-color:#[--colour of bg--] ;/*colour of box*/
}

h1 {text-align: center;
font-family: "century gothic";
font-size: 9pt;
font-color: #[--colour of text--];}

h2 {font-family: "[--font--];
text-transform: lowercase;
font-size: 29%;
text-align: center;
font-colour: #[--colour of text--];}

h3 {font-color: #[--colour of text--];}

input
{background:#[--colour of bg--];
font-size:8pt;
font-family: [--font--];
color: #[--colour of text--];
border-style: [--border type--];
border-color: #[--colour of border--];/*quick box*/
}

.quote {
background: #[--colour of bg--];
border-color: #[--colour of border--];
border-style: [--border type--];
border-width:1px;
width: 520px;
}

.feature {
background: #[--colour of bg--];
border-color: #[--colour of border--];
border-style: [--border type--];
border-width:1px;
width: 450px;
float: center;
margin: 0px 40px 0 px 40px
}

.featureright {
background: #[--colour of bg--];
border-color: #[--colour of border--];
border-style: [--type of border--];
border-width:1px;
width: 450px;
float: right;
text-align: right;
}

.even { background: #[--colour of bg--]}
.odd { background: #[--colour of bg--]}
.postInfo { background:#[--colour of bg--]}
.postFooter { background: #[--colour of bg--]}
.postHeader { background: #[--colour of bg--]}
.postHeader { text-align: left}
.postHeader {font: 10pt;}

#leftMenu h1, #rightMenu h1 {
background: #[--colour of bg--]);
}

#leftMenu h1, #rightMenu h1 {
text-align: center;
color: #[--colour of text--];
border-top: .2em solid #[--colour of border--];
border-bottom: .2em [--colour of bg--] #[--colour of border--];/*top navigations~*/
}

#leftMenu dt, #rightMenu dt {
padding: 0 .2em;
color: #[--colour of text--];
}

div.inner {
background-color: #[--colour of background within box--] !important;
border: 1px [--border type--] ;
margin: 0px !important;
filter:alpha(opacity=80) !important;
-moz-opacity:0.80 !important;
opacity: 0.80 !important;
}

#menu a {
display: block;
color: #[--colour of text--];
text-decoration: none;
text-transform: lowercase;
font-weight: none;
}

#menu a:hover {
color: #[--colour of text--];
border-bottom: [--type of border--];
border-color: none;
border-style: none; border-width: 1px;
background:#[--colour of bg--];
font-weight: bold;
text-decoration: line-through;
text-transform: lowercase;
}

#treeNav span {
display: block;
font-size: 8px;
margin-left: 1em;
font-weight: none;
color: #[--colour of text--];
font-family: [--font--];
}

#leftMenu li a, #rightMenu li a {
display: block;
color: #[--colour of bg--];
text-decoration: none;
font-family: [--font type--];
font-size: 8pt;
padding: .1em 1em;
height: 100%;
overflow: hidden;
text-transform: lowercase;
}

#content a:hover
{text-decoration: none;
background: #[--colour of bg--];
border-color: #[--colour of border--];
border-style:[--border type--];
border-width:1px;
font-weight: bold;
text-transform: lowercase;
}

fieldset, hr {border-color: #[--colour of border--];}

input.text, input.file, input.radio, select, textarea, option, optgroup {
background: #[--colour of bg--];
color: #[--colour of text--];
border-color: #[--colour of border--];
font-size:8pt;
}

a:link img {filter:alpha(opacity=60);} a:visited img {filter:alpha(opacity=60);} a:hover img

{filter:none;}
border-color: #[--colour of border--];
border-style:[--type of border--];
border-width:1px;
}
</style>

after this, change whateva you want that i wrote '[--text--]', delete this part after you saw what i wrote, cause you codes will be in a mess if it is there, if your not sure you can ask me again..! ^^

after this your done! but you wish to but the scrool bar colour you can put this, but have to edit it as well..! ^^

Quote:

<style type= text/css >
body {scrollbar-face-color: #[--colour you want--];
scrollbar-highlight-color: #[--colour you want--];
scrollbar-3dlight-color: #[--colour you want--];
scrollbar-darkshadow-color: #[--colour you want--];
scrollbar-shadow-color: #[--colour you want--];
scrollbar-arrow-color: #[--colour you want--];
scrollbar-track-color: transparent [--or colour you want--];

</style>

if you wan to put cursors use this! ^^

Quote:

<style type= text/css ><STYLE TYPE= text/css >p {align=justify}
BODY{cursor: move[--or url of cursor--];}
a {cursor: move[--or url of cursor--];}
</STYLE>

if you want me to help you with the codes feel free to ask me..! ^^ i will help as much as i can..! hope you understand what i told you, hahax..!

thanks for viewing, comments are welcome..!

tutorial by:norine07
codes from: thingperson & pinkprincesslacus
help for edits: maplerose
edited by: norine07

THATS IT you stealer.. im telling you have stole our codes again norine i thought you learned your lesson before.. you copied exactly the same codes my sister and i EDIT..even our hover code we customized and our link codes..by gosh..you just left everything we did for us to find out again huh... your asking for it norine do you always want to piss me off or what.. admitt right now you stole our codes.

? i normally use this, other group have it too? i'll change whatever the part you customize, just tell me the part and i'll edit it now..!

lol a fight again?

ahh wonderful...who ever the codes belong to i think that many members here will find this very useful! wish i could have just looked here for the codes earlier lol...either way...big help!

I need the codes ^^ , thanks ^^

Quote by thingpersonTHATS IT you stealer.. im telling you have stole our codes again norine i thought you learned your lesson before.. you copied exactly the same codes my sister and i EDIT..even our hover code we customized and our link codes..by gosh..you just left everything we did for us to find out again huh... your asking for it norine do you always want to piss me off or what.. admitt right now you stole our codes.

Quote by norine07? i normally use this, other group have it too? i'll change whatever the part you customize, just tell me the part and i'll edit it now..!

uhh... norine...
i think you should come up with your own coding
or ask for permission before doing such things if you did take them from someone else
so that you can prevent such things from happening...

oh,thats troublesome.
But thanks for sharing.

Kowaii desu.....
Thanks for sharing norine!

hey norine!thanks for putting up this thread so the next time i want to do anymore grps i could use this !

hahax..! sure, just be sure to credit thingperson and pinkprincesslacus, if possible..!

what program did they use?

dunno?

Thanks for the tutorial, this helped alot!

I thought maybe i help some people help some lazy people since most of us will die of boredom when we read all the tutorials about CSS..

CSS Examples

A faster way for CSS dummies to actually learn CSS but not know the basics of it

Have a nice day

Pinned so everyone can stop searching for the group customization codes.

Thanks I'll use this

OMG THESE ARE OUR CODES! I demand you take these off and post in it how you stole it Norine right now! These are old codes I wrote when I was a noob to CSS, because it has mistakes in it now u dont not need. Such as

</style></div></div>

<style>

it has part that are wrong etc. and more that I wrote that is just a waste of codes! But im not going to tell you what it is... since your the pro figure it out you all.

So Duh YOU STOLE IT

NOW POST AT THE TOP OF THIS FORUM HOW U STOLE FROM PINKPRINCESSLACUS AND THINGPERSON, OR ERASE IT ALL NOW!

Screw this part WHICH IS A LIE!

Quote by Norine
if you want me to help you with the codes feel free to ask me..! ^^ i will help as much as i can..! hope you understand what i told you, hahax..!

thanks for viewing, comments are welcome..!

tutorial by:norine07

lacus-san i edited it already, sorry for confusion...

Quote by PinkPrincessLacusOMG THESE ARE OUR CODES! I demand you take these off and post in it how you stole it Norine right now! These are old codes I wrote when I was a noob to CSS, because it has mistakes in it now u dont not need. Such as

</style></div></div>

<style>

it has part that are wrong etc. and more that I wrote that is just a waste of codes! But im not going to tell you what it is... since your the pro figure it out you all.

So Duh YOU STOLE IT

NOW POST AT THE TOP OF THIS FORUM HOW U STOLE FROM PINKPRINCESSLACUS AND THINGPERSON, OR ERASE IT ALL NOW!

Screw this part WHICH IS A LIE!

Quote by Norine
if you want me to help you with the codes feel free to ask me..! ^^ i will help as much as i can..! hope you understand what i told you, hahax..!

thanks for viewing, comments are welcome..!

tutorial by:norine07

Unless I am mistaken, CSS codes are universal and free to use for anyone. I doubt you and thingperson invented the language. norine07 may have copied your way of coding but this could certainly not be called stealing.

LOL...i wish that i'm expert in CSS thingy ^^'

lol good that I have my own codes. Norine u posted a lot of useless codes too (from my point of view too many codes, other codes are missing)
and some of them will not work..exemple the quote code
I do not agree with the fact that some people use the work of others..I customize groups from a long time now
anyway it was your choice

hahax..! ^-^ hai~!

Just to let you know, where it says:

Quote: html, body {
background-color: #[--colour of bg--];
}

It'd be better to use

Quote: html, body {
background: #[--colour of bg--];
}

'cause then you won't get the strange black box thingy on the right side under the right menu (it comes from the MT default skin pattern, which your CSS is trying to, but isn't over-riding, that element). And then you don't even need the

Quote: body
{
background:#[--colour of bg--];
}

And yes, there's lots of useless and extra code there, that could be cleaned up and grouped together, like

Quote: h1 {text-align: center}
h1 {font-family: "century gothic"}
h1 {font-size: 9pt}
h1 {font-color: #[--colour of text--]}

can be grouped together with

Quote: h1 {text-align: center;
font-family: "century gothic";
font-size: 9pt;
font-color: #[--colour of text--];}

It makes is so much easier to read and maintain.

Also, you might want to clean up the weird spacing for the image parts. It's hard to tell which element belongs where with the random spaces all over the place:

Quote: #topLeft {
background: url(slice1) no-repeat bottom right; /*slice1*/
}

#top {
background: url(slice3) repeat-x bottom left;
}/*slice3*/

#topCenter {
background: url(slice2) no-repeat bottom left;
}/*slice2*/

#main {
background-image: url(slice7);
}/*slice7*/

#leftMenu {
background: url(slice4) no-repeat top right;
}/*slice4*/

#rightMenu {
background: url(slice6) repeat-x top;
}/*slice6*/

#content {
background: url(slice5) no-repeat top left;
}/*slice5*/