• Our friends from the Johto Times are hosting a favorite Pokémon poll - and we'd love for you to participate! Click here for information on how to vote for your favorites!
  • Welcome to PokéCommunity! Register now and join one of the best fan communities on the 'net to talk Pokémon and more! We are not affiliated with The Pokémon Company or Nintendo.
    Register

CSS Code

DestinyBender

Mana du vortes, aeria gloris.
    • 443
    Posts
    15
    Years
    Hiya, I'm looking for the CSS code for my sig, could someone please provide it for me and a small tutorial on how to use it?

    Thanks if you answer.

    /DestinyBender

    ​
     
    The CSS code in your sig?

    Do you mean that you want to use CSS in your sig? If so, it's quite an easy language to learn. It can run as a separate file or within HTML, but it's easier to do it in-HTML.

    For example.

    In my website, I use CSS to change the colours and/or background images of parts of my HTML. So, this is what my CSS looks like:

    Code: 
    /* CSS STARTS HERE */


!-This part changes the colours of my links.-!
A:link 
{ text-decoration: none; color: #003399; }
A:visited 
{ text-decoration: none; color: #003399; }
A:active
{ text-decoration: none; color: #003399; }
A:hover 
{ text-decoration: none; color: #6666FF; }


!-this changes the font and such of the 'body' of my HTML.-!
body
{ font-family: dreamspeak; verdana; sans serif; helvetica;
color: #333333;
font-size: 11px;
background-color: #1D7597;
background-image: url(' ');
text-align: justify;
margin-bottom: 5px; 
margin-right: 0px; 
margin-top: 5px;
}


!-this centers my layout for me.-!
#centerlayout {
margin-left: -370px;
margin-right: 0px; 
margin-top: 0px; 
margin-bottom: 0px; 
width: 779px;
left: 50%;
top: 0%;
position: absolute;
}


!-this controls my left menu, where I can edit the fonts and such for that.-!
#leftmenu
{ font-family: verdana; sans serif; helvetica;
color: #333333;
font-size: 10px;
background-color: #2AA8D9;
background-image: url(' ');
text-align: left;
border: 1px solid #000000;
border-bottom: 0px solid #000000;
border-top: 0px solid #000000;
width:125px;
}


!-this controls my right menu in the same way as my left.-!
#rightmenu
{ font-family: verdana; sans serif; helvetica;
color: #333333;
font-size: 10px;
background-color: #2AA8D9;
background-image: url(' ');
text-align: right;
border: 1px solid #000000;
border-bottom: 0px solid #000000;
border-top: 0px solid #000000;
width:120px;
}


!-this controls my content.-!
#content
{ font-family: verdana; sans serif; helvetica;
color: #333333;
font-size: 11px;
background-color: #98E2FE;
background-image: url(' ');
border: 0px solid #000000;
width: 529px;
}


!-and this controls the disclaimer of my site.-!
#disclaimer
{ font-family: verdana; sans serif; helvetica;
color: #333333;
font-size: 9px;
background-color: #1D7597;
background-image: url(' ');
border: 1px solid #000000;
text-align:center;
width:779px;
height:90px;
}


!-whilst this controls the banner.-!
#banner
{ font-family: verdana; sans serif; helvetica;
color: #333333;
font-size: 9px;
background-color: #FFFFFF;
background-image: url(' ');
border: 1px solid #000000;
text-align:center;
}

!-and this controls the properties of headers1.-!
h1
{ font-family: verdana; sans serif;
font-size: 12px;
font-weight: bold;
font-variant: small-caps;
align:center;
}

/* CSS ENDS HERE */

    With the HTML creating each of the areas for the CSS to edit, my site is changed font-wise and colour-wise. You have to know HTML to use CSS, however.

    With the CSS above, and my HTML included, my site turns out like this at the moment. Needless to say, it's only in the foundation stages.

    I hope you learned something, or are going to learn something, anyway.
     
    非常に高いレベル said:
    The above poster must've missed the "sig" part. -_-
    Anyways, CSS is pretty easy and you can find a tutorial on it at https://www.ppnstudio.net/node/273

    PC uses inline CSS only. Code in the format of ^'s post will not work. The code will work in the CSS BBCode, though.

    See the BBCode list for the code.
    Click to expand...

    I was giving an example through my website - I understand completely that they want it in a sig. The above bit is inline as well, by the way. .-.
     
    Ive learned how to CSS code in .. 2 days now. And I'm getting pretty good at it :D Its really not hard to learn.
     
    patch. said:
    'Pretty good'? You haven't even got it set so it doesn't stretch out of your sig. o_o
    Click to expand...
    UHh? I dont see it stretching out .. o_o How do I fix it ? Cuz on my PC I dont see it. Probably you guys do.
     
    Meh, I don't see any problem with it o_o

    Thanks guys, for all the info and help. :D
     
    You must log in or register to reply here.
    Back
    Top