Create My MusicONtrack.com Page
Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can be applied to any kind XML document, including SVG and XUL. MusicONtrack.com uses our advanced CSS to help build your personal member pages.
The default layout in your personal CSS box is:
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-image: url(../images/newBkgd.jpg);
background-repeat: repeat;
background-position:center;
font-family: Tahoma;
font-size: 11px;
color: #000000;
}
.bottomLinks {
font-family: Tahoma;
font-size: 10px;
color: #FFFFFF;
text-decoration:none;
}
.bottomLinks:hover {
font-family: Tahoma;
font-size: 10px;
color: #F4F4F4;
}
.Timestamp {
font-family: Tahoma;
font-size: 10px;
color: #000000;
}
.body {
font-family: Tahoma;
font-size: 12px;
color: #000000;
text-decoration:none;
}
.whiteTahoma10 {
font-family: Tahoma;
font-size: 10px;
color: #FFFFFF;
}
td {
font-family:Tahoma;
font-size:10px;
color:#000000;
}
.justify {
text-align:justify;
}
input, textarea, select {
border:1px #cccccc solid;
font-family:Tahoma;
font-size:11px;
}
.outerTable {
border:1px #ffffff solid;
background-color:#cccccc;
}
.innerTable {
border:1px solid #999999;
margin-top:9px;
margin-bottom:9px;
background-color:#FFFFFF;
}
.quoteText {
font-size:24px;
font-weight:bold;
letter-spacing:-0.07em;
color:#000000;
text-align:center;
}
.normalText{
}
.usernameText{
font-family:Tahoma;
font-size:14px;
font-weight:bold;
color:#FFFFFF;
height:19px;
padding-top:3px;
}
a:link {
color:#000099;
}
a:visited {
color:#000099;
}
a:active {
color:#0000CC;
}
a:hover {
color:#0000CC;
}
.imgBorder {
border:1px solid #999999;
}
.commentDividers {
border-bottom:2px #999999 dotted;
}
.usernameText{
font-size:14px;
font-weight:bold;
letter-spacing:-0.07em;
color:#FFFFFF;
filter:Glow(color=#999999,strength=3);
height:19px;
padding-top:3px;
}
a:link {
color:#000099;
}
a:visited {
color:#000099;
}
a:active {
color:#0000CC;
}
a:hover {
color:#0000CC;
}
.imgBorder {
border:1px solid #999999;
}
.commentDividers {
border-bottom:2px #999999 dotted;
}
How do I know what I want to change?
All of the words that lead each code represent what will be modified when changing the coding. EX: usernameText, will change your name located at the top of the page just above the quote, which is also quoteText in your CSS layout.
Changing your colors!
All of the categories that you see that begin with # followed by six letters and/or numbers are your colors and can be modified by changing the numbers and/or letters that already exist.
For example: #000000; would have the description black. but, by modifying the CSS code to #FF3300; would change the code from black to red. Now, notice when dealing with coding all the numbers/letters and colons have to be properly placed for the coding to work with no spaces. If your coding didn't work then go back and be sure that no additional letters or spaces were added.
Here are all of the CSS Code Colors!
Modifying my Text!
It is simple to increase or decrease the size of your font. In the CSS layout look for the code font-size:11px; and in order for you to modify the size simply change the number to a higher or lower number, That's It! Remember the code must not have spaces, ONLY change the number.
CSS font-size Code:
font-size:120%; ...percentage %
font-size:10px; ...pixel
font-size:x-large; ...word size
The CSS Font-Style is where you define if your font will be italic or not. The key terms are the following: italic, oblique, and normal
CSS font-style Code:
font-style:normal;
font-style:italic;
font-style:oblique;
Control the weight/thickness of your font and by using font weight may be the best way to go about it. You may want to only use font-weight in multiples of 100, 200, 300, . etc because any less and you probably will not see any difference. The values range from 100(thin)-900(thick). This can be applied or add into any category where there is text.
CSS font-weight Code:
font-weight:100;
font-weight:900;
font-weight:bold;
Changing my background color to an image!
Okay, now there are a few places that you can do this. These are:
• body{
• .outertable{
• .innertable{
Now, for the body{ which will change the background. Go to where you see the code layout under:
body{
background-color:#676241;
You will now have to change the code to:
body{
background-image:url(http://www.exampleimage.jpg);
You will have to copy and paste your own image address (ex: above) in after the background-image: followed by the ;. You can acquire almost any picture you see even from your own camera. Try this image:
url(http://www.graphics-galore.com/images/Abstracts,%20etc/Abstracts,%20etc-1/Beautiful%20Music.jpg);
The same method will go for the .outertable{ and the .innertable{
The CSS layout that is given to you is a basic layout. There are many more features and codes that can be added to your layout, but remember everything has to have the correct format in order for the CSS to work properly. If you add CSS or HTML to your CSS box and it does not function properly or even show up then something was either not added that should have been added or it was not placed properly within the CSS box.
Codes that can also be added into the CSS box:
Color Scrollbar CSS code:
body{
scrollbar-arrow-color:#ffffff;
scrollbar-base-color:#ffffff;
scrollbar-dark-shadow-color:#ffffff;
scrollbar-track-color:#ffffff;
scrollbar-face-color:#ffffff;
scrollbar-shadow-color:#ffffff;
scrollbar-highlight-color:#ffffff;
scrollbar-3d-light-color:#ffffff;
}
Enter this code (exactly how you see it) into the describe yourself field or any other field (not the CSS box) away from the other text:
<embed src="http://www.2gn.net/flashscroll/reddots.swf" flashvars="passTextIn=MusicONtrack.com ! ! !" bgcolor="black" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="375" height="60"></embed>
Adding Video!!!
In order to incorporate video into you're individual page you must have the Html code that goes along with it (embed code). Many times the SIZE is set to large to fit into the box so you may have to adjust the sizes to fit.
For Example the size may be:
*******width="425" height="350"><****************
*********************************************************
*********************************************************
***************width="425" height="350"><********
Change the sizes to:
*******width="190" height="150"><****************
*********************************************************
*********************************************************
***************width="190" height="150"><********
These same changes can be implemented into any banner, video, flash, or picture simply by adjusting the sizes given in the coding.
Stay Tuned! There are many more features on the way!!!
-MusicONtrack.com
|
