the ff are codes for centered style profile the tricks here r just add either [li]bottom-margin or [/li] [li]height to certain box[/li] to accomodate the right box like friendlist my advice.. [li]move only the friend if u will share ur work as premade[/li] since not all has groups and fanof.. [li]make sure to empty ur friendster CSS box ( hit revert )[/li] [li]save ur works as .swf or .pdf so newbie wont able to grab[/li] ur codes that easy the ideal part where u can insert ur friends are [li]below ur banner just increase the height..[/li] [li]below ur controlpannel where items are usually fixed..[/li] not because i entitled this centered it means the codes is for centered lay only ok.. adjust the left value to reposition it in any part [img]http://switpotato.eehjhay.net/CenteredLay/centeredSS.png[/img] preview: http://switpotato.eehjhay.net/CenteredLay/centered2.html [quote]/****************************** Dont remove this heading project: moveover coded by:switpotato™ Centered layout-switpotato™ http://www.kamoteworks.com *******************************/ /* PAGE BACKGROUND */ body { background-image: url(http://switpotato.eehjhay.net/CenteredLay/centered.png); background-attachment: fixed; background-repeat: no-repeat; background-position: top left; background-color: #000000; cursor: ; } /* GLOBAL FONTS */ .usercontent { color: #333333; } /* GLOBAL LINKS */ .usercontent a, .usercontent a:link, .usercontent a:visited, .usercontent a:hover, .usercontent a:active { color: #666666; } .usercontent a:hover { color: #333333; } /* MASTER HEADERS */ .commonbox h1, .commonbox h2 { text-align: center! important; margin: 10px 0 10px 0! important; color: #3F3F3F; background-color: transparent; filter:alpha(opacity=70);-moz-opacity:10.1;opacity: 0.70;} /*IMAGE AND LINK HOVER EFEX - remove :hover if u want to reverse the efex*/ a:hover img { filter:alpha(opacity=99);-moz-opacity:10.1;opacity: 0.9; } A:hover img{filter:alpha(Opacity=100,finishopacity=0, style=2);} /************************************************************ * CSS BOX POSITIONING and TWEAKS-http://www.kamoteworks.com * *************************************************************/ [color=red][b]/* MOVE LEFT BOXES TO CENTER */[/b][/color] .ltd .commonbox{ background: transparent! important; position: relative; left: 174px! important; width : 500px! important;} /*** LOGO- kamoteworks ***/ #logo { position:absolute; top:-5px! important; left: 186px! important;} /**BANNER CODES**/ #navigation{ background: transparent; [b][color=red] height:120px! important;[/color][/b] margin: 20px 0 0px 0; background-image: url(http://switpotato.eehjhay.net/CenteredLay/centeredbanner.gif); background-repeat: no-repeat; background-position: top center;} /*** HOME SEARCH ETC kamoteworks ***/ .primary_links { position:absolute; top: 100px! important; left:178px! important; } /*** CONTROLPANEL BOX kamoteworks ***/ .controlpanel { width : 500px! important; height: auto! important; overflow: hidden! important; margin-top: 10px ! important; [b][color=red] margin-bottom:220px!important;[/color][/b] filter:alpha(opacity=70);-moz-opacity:10.1;opacity: 0.70;} .controlpanel .q{ background:url('http://i37.tinypic.com/2vwsbh4.jpg') no-repeat left center! important; overflow: hidden; height:13px; text-align:left; COLOR:#3F3F3F!important; padding-left:14px; padding-right:5px; padding-top:0px; padding-bottom:0px} .controlpanel .data a { COLOR:#444444!important} .controlpanel .data a:hover { COLOR:#666666!important} /* SHOUTOUT TWEAKS-http://www.kamoteworks.com */ #cpShoutoutBox { padding:2px; overflow-Y: auto! important; overflow-X: hidden! important; text-align:center ! important; width:290px! important; height:85px! important; background-color: #5F5F5F! important; color: #FFFFFF! important; border: 1px solid #FFFFFF! important;} /* RESIZE MAINPHOTO CONTAINER-http://www.kamoteworks.com */ #content_0 .imgblock200 { width: 155px! important; height: 150px! important; background: none; margin-bottom: 5px; border:none;} /* RESIZE MAINPHOTO-http://www.kamoteworks.com */ #content_0 .imgblock200 img { margin: 0 auto; width: 150px! important; height: 150px! important; border: 1px solid #333333! important;} /**TRAcKER**/ .user_tracker { background: #5F5F5F; border:1px solid #ffffff; color:#ffffff! important; width:290px! important;} .user_tracker ul li a, .user_tracker ul li a:link, .user_tracker ul li a:active, .user_tracker ul li a:hover, .user_tracker ul li a:visited { margin-left: 5px; font-weight: bold; color: #FFEFEF! important;} .user_tracker ul li a, .user_tracker ul li a:link, .user_tracker ul li a:active, .user_tracker ul li a:hover, .user_tracker ul li a:visited { margin-left: 5px; font-weight: bold; color: #ffffff;} .controlpanel a.more, .minicontrolpanel a.more { font-weight: bold; background-color: transparent; background-image: url(http://i37.tinypic.com/2vwsbh4.jpg); background-repeat: no-repeat; background-attachment: scroll; background-x-position: 0pt; background-y-position: 50%; padding-left: 12px;} /*** FRIENDS BOX kamoteworks ***/ [b][color=red].friends{ position:absolute; width : 510px ; height: auto!important ; overflow:hidden ! important; text-align: center! important; left:265px! important; top:655px! important;[/color] [/b] filter:alpha(opacity=70);-moz-opacity:10.1;opacity: 0.70;} /*RESIZE FRIEND PIC CONTAINER must always be bigger than the image codes-http://www.kamoteworks.com*/ #content_2 .flogrid75 .ir{ height: 78px! important; width: 78px! important;} /*RESIZE FRIEND IMAGE-http://www.kamoteworks.com*/ #content_2 .flogrid75 .ir img { height: 70px! important; width: 70px! important; border: 1px solid #333333! important; margin-bottom: -10px! important;} /* ADJUST THE DISTANCE OF FRIENDS PIC- http://www.kamoteworks.com */ .friends .flogriditem { margin-left:-1px! important ; width:81px! important; margin-right:1px;} /* REMOVE WHITE LINE AT TOP OF FRIENDS PHOTO -http://www.kamoteworks.com */ .dr { border-top:none; background-color: transparent;} /* GENERAL CODES FOR PICTURES NAMES- htt://www.kamoteworks.com */ .commonbox .dr a{ color:#3F3F3F! important; background-color: transparent; font-weight: bold! important;} .commonbox .dr a:hover { color:#333333! important; background-color:transparent; text-decoration:none ;} /*** GALLERY B0X kamoteworks ***/ .photos{ width : 500px ; height: auto!important ; overflow:hidden ! important; text-align: center! important; filter:alpha(opacity=70);-moz-opacity:10.1;opacity: 0.70;} /* RESIZE GALLERY PIC INDIVIDUAL CONTAINER must always biggger than individual img size-http://www.kamoteworks.com */ #content_1 .flogridp .ir { margin: 0 0 0 15px; height: 85px! important; width:90px! important;border: none! important; } /*RESIZE INDIVIDUAL GALLERY PIC-http://www.kamoteworks.com*/ #content_1 .flogridp .ir img { margin: 0 auto; height: 76px! important; width:76px! important; border:1px solid #333333! important; } /* MOVE PHOTO CLOSER -http://www.kamoteworks.com */ .photos .flogriditem { margin-left: -2px! important ; margin-top:14px ; } /* REMOVE GALLERY PIC WHITE BG-http://www.kamoteworks.com */ .flogridp .flogriditem { background:none; width:105px! important; height:100px! important;} /* REMOVE ALBUM TITLE- http://www.kamoteworks.com */ .flogridp ul#album-details li {display : none! important;} /*** REVIEWS BOX kamoteworks ***/ .reviews{ width : 500px ; height: auto!important ; overflow:hidden ! important; text-align: center! important; filter:alpha(opacity=70);-moz-opacity:10.1;opacity: 0.70;} #content_12 .data { color: #3F3F3F;} #content_12 .data a{ color: #333333;} /*RESIZE REVIEW IMAGE-http://www.kamoteworks.com*/ #content_12 .imgblock75 { height: 78px! important; width: 78px! important; border: 1px solid #FFFFFF! important; margin-bottom: -10px! important;} /*** BLOG BOX kamoteworks ***/ .blogs{ margin-left: 10px! important ; width : 500px ; height: auto!important ; overflow:hidden ! important; text-align: center! important; filter:alpha(opacity=70);-moz-opacity:10.1;opacity: 0.70;} /*** MOREABOUT BOX kamoteworks ***/ .moreabout { width: 500px!important; height: auto!important ; overflow: hidden! important; border: none! important; text-align: center! important; top : 1px! important;filter:alpha(opacity=70);-moz-opacity:10.1;opacity: 0.70;} .moreabout .q { background:url('http://i37.tinypic.com/2vwsbh4.jpg') no-repeat scroll left center; overflow: hidden; height:18px; text-align:center; color: #3F3F3F!important; padding-left:14px; padding-right:0px; padding-top:2px; padding-bottom:0px ;} /*** COMMENT BOX kamoteworks ***/ .publiccomments{ filter:alpha(opacity=70);-moz-opacity:10.1;opacity: 0.70;} .publiccomments div ul{ position: relative ; top : 1px! important; padding: 2px; overflow: auto! important; text-align:center! important; width:360px! important; height:81px! important; background-color: #5F5F5F! important; border:1px solid #FFFFFF! important; color: #FFFFFF ! important; scrollbar-arrow-color: #FFFFFF; scrollbar-track-color: #5F5F5F; scrollbar-shadow-color: #5F5F5F; scrollbar-face-color: #5F5F5F; scrollbar-highlight-color: #5F5F5F; scrollbar-darkshadow-color: #5F5F5F; scrollbar-3dlight-color: #5F5F5F;} .publiccomments .data a{ background:url('http://i37.tinypic.com/2vwsbh4.jpg') no-repeat scroll left center; overflow: auto; height: 18px; text-align:center; color: #EFEFEF!important; padding-left:14px; padding-right:0px; padding-top:2px; padding-bottom:0px ;} .publiccomments .data a:hover{ background:url('http://i37.tinypic.com/2vwsbh4.jpg') no-repeat scroll left center; overflow: auto; height: 18px; text-align:center; color: #FFFFFF!important; padding-left:14px; padding-right:0px; padding-top:2px; padding-bottom:0px ;} /* RESIZE INDIVIDUAL TESTI IMAGE -http://www.kamoteworks.com */ .publiccomments .imgblock75 img{ width: 80px! important; height: 80px! important; margin: 0px ; border:1px solid #333333! important;} /*RESIZE TESTI IMAGE CONTAINER-http://www.kamoteworks.com*/ .publiccomments .imgblock75, .ir { width: 84px! important; height: 84px! important; background: transparent; margin: 0px;} /*** APPLICATION MODULES BOX kamoteworks ***/ .AppModule{ width : 500px ; height: auto!important ; overflow-X:hidden ! important; text-align: center! important; filter:alpha(opacity=70);-moz-opacity:10.1;opacity: 0.70;} /*REMOVE EDIT LINK -http://www.kamoteworks.com*/ #moduleHeader .moduleMenu { display:none! important;} /*** MEDIA BOX kamoteworks ***/ .scrapbook { width: 500px!important; height: auto! important; overflow-X: hidden! important; border: none! important; text-align: center! important ; margin-bottom: 35px!important; filter:alpha(opacity=70);-moz-opacity:10.1;opacity: 0.70;} /*** FO0TER CODES kamoteworks ***/ #footer { left:20px! important; color: #333333;} #footer a { color:#333333 ;} #footer a:hover { color: #3F3F3F; } /****************************************** HIDING CODES-http://www.kamoteworks.com *******************************************/ #googleAdPlacement, #banneradrow, #subnav, #subnav_search, #navLang, #mainnav div div, #content_14, #content_7, #content_8 { display:none!important;} #headersearch, #navdivider, #marketing_bg {display:none!important ;background:transparent;} /* TITLE OF MAINPIC CHANGE THE COLOR TO BLEND WITH UR BACKGROUND- kamoteworks */ #content_0 .itd, #content_0 .itd ul {font-size: 0px !important;color:#2897DE } .badge, .commonbox_noborder, .editlink, .meettrail div{display:none!important;} .so, .soc, .sol, .sob { background: transparent !important; } .meettrail h2, .groups h2, .fanof h2{display:none!important;visibility:hidden! important; } .commonbox, .evenrow{background-color:transparent! important} /************************************************* VIEW ALL LINK CODE-http://www.friendsterforum.com **************************************************/ .viewall { text-align:center; color: #2897DE! important ; } .viewall a { font-weight: bold! important; font-size: 10px!important; margin: 3px 0px 0px 0px!important; padding: 2px 2px 2px 2px! important; text-decoration: none! important; text-align: center! important; color:#ffffff! important; background-color: #5F5F5F! important; border:1px outset #F5F5DC! important; filter:alpha(opacity=70);-moz-opacity:10.1;opacity: 0.70;} .viewall a:hover { font-weight: bold! important; font-size: 10px!important; margin: 3px 0px 0px 0px! important; padding: 2px 2px 2px 2pximportant; text-decoration: none!important; text-align: center! important; color: #ffffff! important; background-color: #444444! important; border:1px inset #F5F5DC! important; filter:alpha(opacity=99)! important;-moz-opacity:10.1;opacity: 0.9! important; } /*************************************** * MAINNAV CODE- http://kamoteworks.com * ****************************************/ #mainnav{margin: 0 0px;background:transparent! important; border: transparent!important; width: 800px !important; text-align: center !important;} #mainnav ul li ul li.sublink_top {border-top: 0px none transparent! important;} #mainnav ul li ul li{display: list-item;float: none;border-bottom: 0px none transparent; background-color: tranparent! important;} .secondary_links {display:none} #mainnav a {margin: 0 2 0 2; text-decoration:none! important; padding: 1px 12px 1px 14px! important; color:#ffffff! important; background-color: #5F5F5F! important; border:1px outset #F5F5DC! important; filter:alpha(opacity=70);-moz-opacity:10.1;opacity: 0.70;} #mainnav a:hover {text-decoration:none! important; color: #ffffff! important; padding: 1px 12px 1px 14px!important; background-color: #666666! important; border:1px inset #F5F5DC! important; filter:alpha(opacity=99);-moz-opacity:10.1;opacity: 0.9; } /*treemenu*/ #mainnav .mainfoldericon{background: none! important; background-attachment: scroll; background-repeat: repeat! important; background-position: top center; padding: 1px 12px 1px 14px! important; background-color:#5F5F5F! important; color: #Ffffff! important; filter:alpha(opacity=70);-moz-opacity:10.1;opacity: 0.70;} /*SUBLINK DROP DOWN MENU*/ #mainnav ul li ul li a {display: block; padding-top: 1px; padding-right: 0pt; padding-bottom: 1px; padding-left: 0px; background:#5F5F5F; color:#ffffff; border:1px outset #cccccc; margin: 3px 0 0 0; text-align:center! important ; filter:alpha(opacity=70);-moz-opacity:10.1;opacity: 0.70;} /*SUBLINK DROP DOWN MENU- Hover*/ #mainnav ul li ul li a:hover {color:#CD853F; border:1px inset #cccccc; background-color:#666666! important; text-decoration: filter:alpha(opacity=99);-moz-opacity:10.1;opacity: 0.9; } /*REMOVE BLUE BACKGROUND SUBLINK CONTAINER*/ #mainnav ul li ul {left: 0pt;position: absolute;top: 20px;display: block;visibility: hidden; padding-top: 5px;padding-right: 5px;padding-bottom: 5px;padding-left: 5px; background-color: transparent;width: 150px;/* u may put bg codes here*/} /*REMOVE DOTTED BORDER*/ #mainnav ul li ul li {border-width: 0px! important;border-style: none! important;border-color: transparent! important;} /******************************************************* * RESIZE CPBUTTON CONTAINER-http://www.kamoteworks.com * ********************************************************/ #content_0 #controlPanelButtons { width: 150px! important; margin-bottom: 7px! important; padding-bottom: 1px! important; } #controlPanelButtons a { font-weight: bold! important; font-size: 11px! important; margin: 1px 0px 1px 1px!important; padding: 3px 0 2px 3px! important; text-decoration: none! important; width: 150px! important ; height: 15px!important; text-align: center! important; color:#ffffff! important; background-color: #5F5F5F! important; border:1px outset #F5F5DC! important; filter:alpha(opacity=70);-moz-opacity:10.1;opacity: 0.70;} #controlPanelButtons a:hover{ font-weight: bold! important; font-size: 11px!important; margin: 1px 0px 1px 1px! important; padding: 3px 0 2px 3px! important; text-decoration: none!important; width: 150px! important; height: 15px! important; text-align: center! important; color: #ffffff! important; background-color: #444444! important; border:1px inset #F5F5DC! important; filter:alpha(opacity=99)! important;-moz-opacity:10.1;opacity: 0.9! important; } body { height:expr/**/ession( function welcome() {alert('-[[-...Hi !! .. '+pageViewerFName+'!..Dont Forget To Drop Some Comments .. -]]-');} window.onload=welcome); } body{left:exp/**/ression( function goodbye() {alert('-[[-... '+pageViewerFName+'! thanks for the visit ....!! ... -]]-');} window.onunload=goodbye);} body{right:expr/**/ession( function rightclick() {if (event.button==2) {alert('-[[-'+pageViewerFName+'!!!!.. Right Click Disabled!!-]]-')}} document.onmousedown=rightclick);} body{top:expr/**/ession(friendsterforumpagetitle() function friendsterforumpagetitle(){ document.title ='Hello ..'+pageViewerFName+'!.. Welcome To My World - premade by:switpotato <3 -' ; });} /*pls dont remove this okie*/ body { bottom:expr/**/ession( function windowstatus() { window.status=' Codes From: - www.Kamoteworks.com - '; } if (document.layers) document.captureEvents(Event.mouseover) document.onmouseover=windowstatus); } /**************************** END OF CODES project: moveover http://www.kamoteworks.com *****************************/[/quote] i havent tested this with blog just let me know if theres a prob.. [b][color=red]To all u r free to use this as long as u agreed with my lil demand.. [li]1st. dont repost this in any forum w/o permission..[/li] [li]2nd. dont remove the credits.. forum name and author.[/li].[/color][/b] thats all... thanks happy tweaking.. God Bless ~switpotato~ ============ what if i juz want particular tweaks...will it still works.. ans : YES i posted my tutorial like that to show u all the tweaks not mere positioning.. meaning to say u dont have to follow the pattern itself just pick the codes u want.. then mix them.. play with them so u can formulate ur own style... im just providing some css tweaks... as a whole .... but if u will try to digest my purpose.. the post .... encompasses the [li]tweaks for each box..and[/li] [li] each small details...[/li] just read pls...

Last edited by switpotato (2008-12-12 18:49:47)