You can join our group at google groups and yahoo groups then you will get everyday updated proxy list and news letter of MySpace Solution, New Images and more in your email Inbox for free.
Click Here For Google Groups.
Click Here For Yahoo Groups.
What Is CSS Layout ???
CSS or Cascading Style Sheets. With CSS, you can design gorgeous and
highly effective Web sites. CSS offers power and flexibility to Web site
developers and designers. This tutorial shows you how to use CSS to make your MySpace come alive.
Here is a Sample CSS Layout. Download This File and open it on Notepad.
Now look at the sheet you will find some tags like div.content { DATA........} This thing calls CSS style. Start with first Style:
div.content { background-color: transparent;
border: 0px solid;
border-color: 000000;
background-repeat: no-repeat;
background-position: center top;
}
This Style div.content stands for general style of all content in MySpace Page like About Me table Details table Activities table and comments table etc, And every change of this code will change your general myspace layout Style. Look at the picture of myspace Content box.
Now look at the div.content style there you will find some codes Like flowing
background-color: transparent;
border: 0px solid;
border-color: #000000;
background-repeat: no-repeat;
background-position: center top;
Look at the first line background-color: transparent; Green part of this line called attribute and red part is value of this attribute this code makes myspace content box transparent if you like some other colors then you can replace that color code with transparent. [Color Codes]
Next attribute border it's create a border on myspace content box here is value of this attribute 0px solid 0px is border width and solid is border style, By replacing those value you will get a new style. Here is some CSS Attributes and values.
Next attribute is border-color it's change your border color "#000000" is color code. by replacing value of color code your myspace content box border color code will change.
Next attribute is background-repeat it repeat background by replacing this value you will get a new style. Here is some CSS Attributes and values.
Next attribute is background-position it change background position. by replacing this value you will get a new style. Here is some CSS Attributes and values.
Here is a image of myspace after putting this style I apply a background image to make visible transparent.
div#header, div#googlebar { background: transparent }
This style make Google bar and Myspace Header transparent you can replace it with color to change your style . [Color Codes]
If you are thinking what is Google bar, Google bar is a element on myspace page download this picture, In this picture I mark all style element in myspace page.
download Myspace Layout map
download Myspace Layout map 2
Next Style is
#topnav{background:#000;}
This Style change navigation bar color in to black to change this color replace a color code with "#000" [Color Codes]
Next Style is
#topnav ul { border-right: 1px #fff solid; }
This style make a border in right navigation bar look at here is tree values for border-right attribute are 1px this stands for border width, #fff is a color code its stands for border color and solid stand for border style. You can replace this values and make a new style Here is [Color Codes] and some CSS Attributes and values.
Next Style is
body{
background-image:url('http://i39.tinypic.com/282m7ps.jpg');
background-attachment: fixed;
background-position:left top;}
Body stand for total myspace layout.
background-image This attribute set a background image its value is url('http://i39.tinypic.com/282m7ps.jpg'); url stands for value type and value of this attribute is "http://i39.tinypic.com/282m7ps.jpg" change this url with your image URL.
background-attachment: fixed;
background-position:left top;}
Background-attachment attach background and background-position set background position no need to change those values.
Next Style is
div.module{
background-color:#000000;
border:1px solid #000000;}
div.module stand for topmost table in myspace layout, more details in Myspace Layout map.
First attribute is background-color and it's value is #000000 You can change it with your color code. [Color Codes]
Next attribute border it's create a border on that table here is value of this attribute 1px solid and #000000 0px is border width and solid is border style, and #000000 is color code By replacing those value you will get a new style. Here is some CSS Attributes and values. and [Color Codes]
Next style is
h2{
background-color:#000000;
text-align:left;
font-weight:bold;
color:#FF085A;
font-family:georgia times;
font-size:20px;
letter-spacing: -1pt;
line-height:10px;
}
h2 is header of topmost table where your name displayed, more details in Myspace Layout map.
background-color for background color [Color Codes].
text-align makes text position in this table CSS Attributes and values.
font-weight change font weight CSS Attributes and values.
color for font color [Color Codes].
font-family for font type, CSS Attributes and values.
font-size for font size, CSS Attributes and values.
letter-spacing for make a space between two letter, CSS Attributes and values.
line-height for line height, CSS Attributes and values.
Next style is
h3.moduleHead{ background-color: #FF085A; text-align: right; font-weight: normal; color: #ffffff; font-family: arial; font-size: 16px; line-height: 8px; border: 0px solid #FF5AA5; }
h3.modulehead stands for your activity heading, more details in Myspace Layout map.
background-color for background color [Color Codes].
text-align makes text position in this table CSS Attributes and values.
font-weight change font weight CSS Attributes and values.
color for font color [Color Codes].
font-family for font type, CSS Attributes and values.
font-size for font size, CSS Attributes and values.
line-height for line height, CSS Attributes and values.
border to make border on this table. CSS Attributes and values.
Next Style is
h4{
background-color: #000000;
text-align: right;
font-weight: normal;
color: #FFFFFF;
font-family: arial;
font-size: 10px;
line-height: 10px;
border: 0px solid #FFC500;
}
H4 stands for About Me text "Who I'd like to meet:" text bar.
background-color for background color [Color Codes].
text-align makes text position in this table CSS Attributes and values.
font-weight change font weight CSS Attributes and values.
color for font color [Color Codes].
font-family for font type, CSS Attributes and values.
font-size for font size, CSS Attributes and values.
line-height for line height, CSS Attributes and values.
border to make border on this table. CSS Attributes and values.
Next Style is
div.moduleBody{
font-weight: normal;
color: #FFFFFF;
font-family: arial;
font-size: 11px;
background-image: url('');
background-attachment: fixed;
background-position: left top;
background-color: #000000;
border-left: 0px solid #A1A1A1;
border-right: 0px solid #A1A1A1;
border-top: 0px solid #A1A1A1;
border-bottom: 0px solid #F25A8D;
}
div.moduleBody stands for About Me Box.
font-weight change font weight CSS Attributes and values.
color for font color [Color Codes].
font-family for font type, CSS Attributes and values.
font-size for font size, CSS Attributes and values.
background-image stands for background image url stands for value type Here is no value of this attribute you can put your image url between ' ' this.
background-attachment no need to change it.
background-position No need to change it.
background-color for background color [Color Codes].
border-left for left border, CSS Attributes and values.
border-right for right border CSS Attributes and values.
border-top for top border, CSS Attributes and values.
border-bottom for bottom border, CSS Attributes and values.
Next style is
ul.moduleList{}
ul.moduleList stands for your comments List I am not put any value in this you can modify this by putting some attributes and workable value such as background-color: #000000;
Don't forget to put ':' between attribute and value and at the last put this ';' .
Ex.ul.moduleList{
background-color: #000000;
}
Next Style is
div.moduleBody a, a:link, a:active, a:visited {
font-family: arial;
font-size: 11px;
letter-spacing: 0pt;
color: #FFFFFF;
text-transform: lowercase;
font-weight: normal;
}
div.modulebody stands for details box.
font-family for font type, CSS Attributes and values.
font-size for font size, CSS Attributes and values.
letter-spacing for make a space between two letter, CSS Attributes and values.
color for font color [Color Codes].
text-transform changes text case uppercase to lowercase and lowercase to uppercase.
font-weight change font weight CSS Attributes and values.
Next Style is
div.moduleBody a:hover, a:hover {
font-family: arial;
font-size: 11px;
letter-spacing: 0pt;
color: #FFFFFF;
text-transform: lowercase;
font-weight: normal;
}
This Style for details box too.
font-family for font type, CSS Attributes and values.
font-size for font size, CSS Attributes and values.
letter-spacing for make a space between two letter, CSS Attributes and values.
color for font color [Color Codes].
text-transform changes text case uppercase to lowercase and lowercase to uppercase.
font-weight change font weight CSS Attributes and values.
Next and last Style is
div.wrap{
width:960px;
}
div.wrap for your total profile
width:960px; for your profile width in px.
Now you can modify your profile in your style. also you can add or remove some style.
How to add a style??
First note a myspace page element ID from Myspace Layout map, or Download Myspace Layout Map or find some at last of the page or see Additional Details. Look I am not put a code for IMG.photo If you want to customize this page element simply write down this,
Img.photo{ }
And put some attributes and workable value such as background-color: #000000;
Don't forget to put ':' between attribute and value and at the last put this ';' .
Ex. IMG.photo{
border: 6px solid red;
}
Also you can make your own style like .Mystyle {
Attribute:Values;
}
then you can call that style in to your html section like <div class="Mystyle">
Your Data Here
</div>
or
<p class="Mystyle">
Your Data Here
</p>
or
<table class="Mystyle">
<tr>
<td>Teble Data Here</td>
</tr>
</table>
And More.
Also you can put CSS code instantly using style attribute like flowing:
<div style="css attribute1:value; css attribute2:value;">
Your Data Here
</div>
EX. <div style="height: 50px; width: 900px">
Your Data Hear
</div>
You can combined both two things like:
<div class="Mystyle" style="height: 50px; width: 900px" >
Your Data Here
</div>
Read Exploring CSS and our tutorials for more idea.
Also some styles are give a general effect In myspace layout like
STRONG stands for Details table's elements like Status, Zodiac Sign.
Li For Right and left navigation bar User profile Info table and more.
H4 For About Me text bar and Who I'd like to meet text bar.
H3.moduleHead for all table header.
DIV.moduleBodyEnd For all Table end.
sample picture after putting this general style code:
LI{
background-color: black;
}
If you make something new or if you have some problem or question then you can share that with our group members, But Do Not spam or Put ADS then you will suspended.
Click Here For Google Groups.
Click Here For Yahoo Groups.
Image after putting sample code.
Myspace Layout Maps
Additional Details
I make a list of popular Myspace page Element ID.
1. DIV.content
2. .r
3. DIV#header
4. DIV#googlebar
5. #topnav
6. #topnav UL
7. #topnav UL LI
8. BODY
9. DIV.content
10. DIV.module
11. H2
12. H3.moduleHead
13. H4
14. DIV.moduleBody
15. UL.moduleList
16. DIV.moduleBody A
17. A:link
18. A:active
19. A:visited
20. DIV.moduleBody A:hover
21. A:hover
22. DIV.wrap
23. P
24. A
25. A:hover
26. A:visited
27. A:hover
28. DIV.contentMid
29. SPAN.count
30. DIV.module
31. .noborder
32. H1
33. H3
34. DIV.musicPlayerModule
35. DIV.videoPlayerModule
36. DIV.videoSliderModule
37. DIV.blogsModule
38. DIV.blurbsModule
39. DIV.toolbar UL LI
40. DIV.toolbar UL LI.last
41. DIV.toolbar UL LI.navLabel
42. SPAN.toolbarCount
43. DIV.profileHeaderModule DIV.moduleHeadTop
44. DIV.profileHeaderModule DIV.moduleHeadBottom
45. DIV.profileHeaderModule
46. DIV.profileDemographics
47. DIV.profileHeaderDetails H2
48. DIV.profileStatus
49. DIV.profileMood
50. DIV.profileMoodImg
For more Download This File, and discover something new.
If you make something new or if you have some problem or question then you can share that with our group members, But Do Not spam or Put ADS then you will suspended.
Click Here For Google Groups.
Click Here For Yahoo Groups.
or put your experience on comment.
