[u]All CSS below are extracted from Friendster Original newuser.css file.[/u]
http://images.friendster.com/200708D/css/newuser.css
[b]Question : How to insert the CSS?[/b]
[i]Answer : Refer to below quote.[/i]
[quote]<head>
<title>......</title>
<style>
[b][color=red]/* YOUR CSS HERE */[/color][/b]
</style>
</head>
<body>
</body>
</html>[/quote]
Insert your CSS in between [color=maroon]<style> </style>[/color] tags. To replace the [color=red][b]RED[/b][/color] code.
[color=maroon][b]Auto Update Control Panel [Module 0][/b][/color]
[quote][color=brown]/* Control Panel Button just below the photo */[/color]
#content_0 #controlPanelButtons { width: 200px; margin-top: 3px; padding-bottom: 1px; }
#content_0 #controlPanelButtons li { display: inline; }
#content_0 #controlPanelButtons a, #controlPanelButtons a:link, #controlPanelButtons a:visited { width: 98px; text-align: center; float:left; display: inline; background: #D1E6E9; border: 1px solid #E6F1F3; margin: 0 -1px -1px 0; padding: 6px 0; }
#content_0 #controlPanelButtons a:hover { color: #FFFFFF; background: #17728F; }
[color=brown]
/* Recent Updates Box */[/color]
#content_0 .user_tracker {width: 100%; background: white; border: 1px solid #c4c4c4; color:#555555; }
#content_0 .user_tracker ul li a, #content_0 .user_tracker ul li a:link, #content_0 .user_tracker ul li #content_0 a:active, #content_0 .user_tracker ul li a:hover, #content_0 .user_tracker ul li a:visited {margin-left: 5px; font-weight: bold; color: #17728F; }
#content_0 .user_tracker ul li i {margin-left: 5px; color: #555555; }
[color=brown]/* Main Photo */[/color]
#content_0 .imgblock200 { width: 200px; background: #FFFFFF; border: 1px solid #76B5C6; text-align: center; margin-bottom: 5px; }
#content_0 .imgblock200 img { margin: 0 auto; }
[color=brown]
/* Shout Out */[/color]
.controlpanel .so, .minicontrolpanel .so { margin: 0 -20px 10px 0; width: 257px; position: relative; background:url(http://images.friendster.com/images/sot.gif) repeat-y top left; color: #17728F; font-weight: bold; }
.controlpanel .so a, .minicontrolpanel .so a { color: #FF4400; }
.controlpanel .so div#cpShoutoutBox, .controlpanel .so div#cpShoutoutEditBox, .minicontrolpanel .so div#cpShoutoutBox, .minicontrolpanel .so div#cpShoutoutEditBox { padding: 7px 7px 5px 7px; margin: 0; }
.controlpanel .so div#cpShoutoutEditBox, .minicontrolpanel .so div#cpShoutoutEditBox { display: none; }
.controlpanel .sol, .minicontrolpanel .sol { position: absolute; left: -5px; top: 8px; width: 6px; height: 11px; background:url(http://images.friendster.com/images/sol.gif) no-repeat; }
.controlpanel .sob, .minicontrolpanel .sob { width: 257px; height: 2px; background:url(http://images.friendster.com/images/sob.gif) no-repeat; line-height: 0; font-size: 0; }[/quote]
[color=maroon][b]Auto Update Photos [Module 1][/b][/color]
[quote][color=brown]/* Auto Update Photos */
/* Background of the photo */[/color]
#content_1 .flogridp .flogriditem { margin-right: 13px; width: 101px; height: 87px; background: url(http://images.friendster.com/images/pf.gif) no-repeat; }
[color=brown]/* Picture Size */[/color]
#content_1 .flogridp .ir { width: 93px; height: 73px; margin: 3px 0 0 4px; }
#content_1 .flogridp .ir img { margin: 0 auto; height: 73px; }
[color=brown]/* Display Photos ONLY Horizontally */[/color]
#content_1 .flogriditem{float: left; display: inline; margin-right: 17px; margin-bottom: 10px; }[/quote]
[color=maroon][b]Auto Update Blogs [Module 2][/b][/color]
[i]credits to JE41 for blog html.[/i]
[quote][color=brown]/* Display Style */[/color]
.blogs p { margin-bottom: 10px; margin: 0; padding: 0; }
[color=brown]/* Data Style */[/color]
.blogs ul.data li, ul.entries p { margin-bottom: 3px; }
.blogs ul.entries li { background: url(http://images.friendster.com/images/blue_arrow_rt.gif) no-repeat 0 2px; padding-left: 8px; margin-bottom: 5px; }
.entries { list-style: none;}
[color=brown]/* View All or Edit Link */[/color]
.blogs .commonbox .viewall, .commonbox .editlink { padding: 4px 11px; font-weight: bold; }
.blogs .commonbox .editlink { float: right; }[/quote]
[color=maroon][b]Auto Update More About Me [Module 6][/b][/color]
[quote][color=brown]/* Global CSS */[/color]
.moreabout p {margin:0;padding:0;}
[color=brown]/* Data styles */[/color]
.moreabout p { margin-bottom: 10px; }
.moreabout ul.questions li { margin-bottom: 10px; list-style:none;}
.moreabout .q, .strong, .title { font-weight: bold; }[/quote]
[color=maroon][b]Auto Update Publiccomments/Testimonials [Module 18][/b][/color]
[quote][color=brown]/* List Style */[/color]
#content_18 .data {list-style:none;}
[color=brown]/* Want to have friendster style of comments */
/* Add this */[/color]
#content_18 .evenrow { background-color: #F5F5F5; }
[color=brown]/* Picture Size */[/color]
#content_18 .imgblock75 { width: 75px; height: 75px; background: #FFFFFF; overflow: hidden; }
#content_18 .imgblock75 img { height: 75px; margin: 0 auto; }[/quote]
[color=maroon][b]Auto Update Friends [Module 8][/b][/color]
[quote][color=brown]/* Auto Update Friends */
/* Picture Size */[/color]
#content_2 .flogrid75 .ir { width: 75px; height: 75px; }
#content_2 .flogrid75 .ir img { margin: 0 auto; height: 75px; }
[color=brown]/* Picture Holder Size*/[/color]
#content_2 .flogrid75 .flogriditem { width: 75px; }
[color=brown]/* Hiding of overflow pictures */[/color]
#content_2 .ir { background: #FFFFFF; text-align: center; overflow: hidden; }
[color=brown]/* Displays Friends ONLY Horizontally */[/color]
#content_2 .flogriditem { float: left; display: inline; margin-right: 17px; margin-bottom: 10px; }
[color=brown]/* Name of Friends */[/color]
#content_2 .dr { text-align: center; background: #E6F1F3; padding: 3px 0; border-top: 1px solid #FFFFFF; white-space: nowrap;}
[color=brown]/* View all & Edit Link ONLY FOR FRIENDS [OPTIONAL] */[/color]
#content_2 .viewall, .editlink { padding: 4px 11px; font-weight: bold; }[/quote]
[color=maroon][b]Auto Update Groups[Module 8][/b][/color]
[quote][color=brown]/* Group Image */[/color]
#content_8 .imgblock75 { width: 75px; height: 75px; background: #FFFFFF; overflow: hidden; }
#content_8 .imgblock75 img { height: 75px; margin: 0 auto; }
[color=brown]/* Group List style */[/color]
#content_8 ul {list-style:none;}
[color=brown]/* Group Name */[/color]
#content_8 .title { font-weight: bold; }
[color=brown]/* Group - View all and Edit Link */[/color]
#content_8 .viewall, #content_8 .editlink { padding: 4px 11px; font-weight: bold; }
#content_8 .editlink { float: right; }[/quote]
[i]Credits: By
www.markyctrigger.com - pohwc[/i]
[b][i]Note: If the CSS is not working post the browser and which CSS your having problems with.[/i][/b]
--
[i]Click [url=http://www.markyctrigger.com/forum/index.php?topic=281.0]here[/url] to view log[/i]
Last edited by eehjhay (2008-08-19 13:32:21)