 |
 |
 |
|
|
|
|
CSS tutorial..
~~~~~~~~~~~~~~~~~~~CSS Tutorial~~~~~~~~~~~~~~~~~
Okay,I'm gonna give you a template..
But first,a slight map to the things you should do:
When you see a PX(stands for pixal),replace the 0 with a number (any number).
Replace #XXX With either a Hex (E.g #FFFFFF) or replace #XXX with a simple color name (E.g Lightblue)
Replace "Image URL" with a Direct URL from the image you want on a photo sharer site (E.g http://i261.photobucket.com/albums/ii49/firskychan1/sea.jpg
Replace the blank areas in back of a semi colon ( ; ) with a corresponding word/phrase:
background-position: Center center,center left,center right,left center,left left,left right,right center,right left,right right.
background-attachment: Scroll (stays in that place),fixed (It will follow you when your scrolling down and up.)
background-repeat: repeat (will have multiple images of the same image),no-repeat (will only have one of that image)
And now for a small tutorial on the parts of a profile:
Body: Placing anything in this will affect the WHOLE page.
html: Not sure really,but mess with this carefully..
Header_left .spacer: That's the area where it would say "GaiaCentral" or "NewFreeAnime" if you used a profile generator.
Columns: The area directly behind the boxes,although if you
mess with the background-repeat and the width,it can serve as a
second background image,play around with it and you can do some
cool stuff.
Panel: The bottom part of the boxes,like the area where the
main text goes on them.
Panel h2: The top part of the boxes,it's also known as the panel header.
A:..A small name I know..It's the URL font,colors.etc.
A.hover: This is a really cool thing..This changes how a
URL looks when you put your curser over it like if you go on
my profile,you'll notice that the URL's get underlined when you
put the curser on them..That's called "hover". But this is another
really cool feature,play around with it and see what happens.
comments_panel .style1 dt: This is the "Comments" section,
just try plating around with it and see what happens..
~~~~~~~~~~~~~~~~Special Profile Editors~~~~~~~~~~~~~~
Oh and here's some random goods,try placing them after section
names,some of them are really sweet..:
{filter: glow(color=#XXX, strength=0); } Gives that section a glow.
{filter: gray;} Grayscales that section,grayscaling is fancy talk for making it black and white.
~~~~~~~~~~~~~~~~~~Tips~~~~~~~~~~~~~~~~~~~~~~
Fonts:Well if your looking for a good font,GIMP is very handy,any and all
fonts found there will work in your profile,although you may have to
mess around with the font weight and font size,but it's really good.
Saving:Do not save your profile if it is not working,make sure your profile
is in working order by pressing "Update" instead of "save",this will
ensure that you don't mess your profile up.
Using underline and overline in Panel h2 text: Well this is slightly tricky,
but I'll give you the process,first go to the "Panel" profile section and
change the "Text Decoration" to "underline",next go to the "Panel h2"
and change the "Text Decoration" to "overline",if you followed that,
the words in the Panel h2 section should be both overlined and under-
lined,and if you play around with the color,you can make it look really
cool,like maybe darkred underline and gray overline,just play around
with it and you can get some really cool stuff..
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Okay,and now for the template,good luck with that..
~~~~~~~~~~~~~~~~~~CSS Template~~~~~~~~~~~~~~~~ body {
background-image:none;
}
html {
background-color: #XXX;
background-image: url(Image URL)
background-position: none;
background-attachment: none;
background-repeat: none;
margin-left: none;
margin-right: none;
scrollbar-arrow-color: #XXX;
scrollbar-track-color: #XXX;
scrollbar-face-color: #XXX;
scrollbar-highlight-color: #XXX;
scrollbar-3dlight-color: #XXX;
scrollbar-darkshadow-color: #XXX;
scrollbar-shadow-color: #XXX;}
}
/*-----------------------------------------------------------*/
#header_left .spacer {
display: none;
background-image: url(Image URL)
background-repeat: none;
background-position: none;
width: 0;
height: 0px;
float: none;
}
li {
background-color: #XXX;
font-family: Font name;
font-size: 0px;
font-weight: none;
text-align: none;
text-decoration: none;
color: #XXX;
}
/*-----------------------------------------------------------*/
#columns {
background-color: #XXX;
background-image: url(Image URL)
background-position: none;
background-attachment: none;
background-repeat: none;
width: 0px;
float: none;
top: 0px;
margin-left: none;
padding-left: -0px;
margin-right: none;
position: none;
}
/*-----------------------------------------------------------*/
.panel {
background-color: #XXX;
background-image: url(Image URL)
background-position: none;
background-attachment: none;
background-repeat: none;
border-color: #XXX;
border-width: 0px;
border-style: none;
font-family: Font name;
font-size: 0px;
font-weight: none;
text-align: none;
text-decoration: none;
color: none;
margin: 0px;
padding: 0px;
opacity: 0.0;
filter: alpha(opacity=0)
zoom:1; /* stupid IE */
}
.panel h2 {
background-color: #XXX;
background-image: url(Image URL)
background-position: none;
background-attachment: none;
background-repeat: none;
border-color: #XXX;
border-width: 0px;
border-style: none;
font-family: Font name;
font-size: 0px;
font-weight: none;
text-align: none;
text-decoration: none;
color: #XXX;
opacity: 0.0;
filter: alpha(opacity=0)
text-align: none;
text-transform: none;
zoom:1; /* stupid IE */
}
a {
font-family: Font name;
font-size: 0px;
font-weight: none;
color: #XXX;
text-transform: none;
}
a:hover {
font-family: Font name;
font-size: 0px;
font-weight: none;
color: #XXX;
text-decoration: none;
text-transform: none;
}
/*-----------------------------------------------------------*/
.comments_panel .style1 dt {
clear: none;
border-bottom: 0px;
height: 0px;
line-height: 0px;
padding: 0px;
padding-bottom: 0px;
text-align: none;
} #profile
/*-----------------------------------------------------------*/
|
|
|
|
 |
|
 |
|
|
|
