[color=#ff0900][b]pure css box positioning:[/b] [/color] what to do.. [color=#ff0900][b]1.[/b] [/color] make an image design first save ur image in some site .. but [color=#ff0900][b]dont use photobucket[/b] [/color] they auto resize the image if it exceed to there requirements... [color=#ff0900][b]2.[/b] [/color] go here http://cubancouncil.com/friendster/ get ur most basic code just make all boxes including the header transparent we wont be needing those anyway.. set the bg attachment to scroll [color=#ff0900][b]3. [/b] [/color]use ur hiding codes.. i provided some just edit those depending to design u want to achieve just open the file.. develope / improve those... [color=#ff0900][b]4.[/b] [/color] now apply some tweaks like resizing of your images, controlpanelbuttons etc etc [color=#ff0900][b]5. [/b] [/color]start your repositioning ... begin from top to bottom the codes aint flawless when it comes to mainnav and footer but tolerable.. [color=#ff0900][b]6. [/b] [/color]you may [color=#ff0900][b]add js[/b] [/color] like this one... [img]http://www.freewebtown.com/monix/black/myblacklay.PNG[/img] http://switpotato.eehjhay.net//darkesthour/preview.html or arrange it in [color=#ff0900][b]sideway style [/b] [/color]....again just play with the codes [img]http://www.geocities.com/potato.nuggets/projectmoveover/sideway.PNG[/img] preview removed i wasnt able to fixed it yet you may also reposition ur [color=#ff0900][b]addbox[/b] [/color] ... just use the addbox id u use remember for [color=#ff0900][b]id [/b] [/color]use number sign [color=#ff0900][b]#[/b] [/color] for [color=#ff0900][b]class [/b] [/color]use period or dot [color=#ff0900][b] .[/b] [/color] 7. remember to leave ur [color=#ff0900][b]css box empty[/b] [/color] for it will affects the out come.. hit [color=#ff0900][b]revert[/b] [/color] if necessary thats all happy tweaking... =================================== sample codes and design [color=#ff0900][b] use it as ur guide...dont juz alter the bg waaaa...[/b][/color] [u][color=#ff3a00][b]pls dont remove the heading ....those credits[/b][/color][/u] help me protect the codes ok.. i really work hard for this .. [img]http://fwt.txdnl.com/6-20/m/o/monix/bgimages/parispreview.PNG[/img] [color=#ff0900][b]preview:[/b] [/color] http://profiles.friendster.com/67515721 [spoiler]/****************************** Dont remove this heading project: moveover coded by:switpotato™ paris layout-switpotato™ http://www.friendsterforum.com *******************************/ /************************************************* CSS BOX POSITIONING-http://www.friendsterforum.com **************************************************/ #logo {position:relative! important; top:945px! important; left:490px! important} .primary_links {position: absolute!important; top:420px! important;left:1px!important;} .controlpanel{position:absolute! important; left: 612px!important; top: 115px! important; width : 325px! important;height :297! important;overflow:hidden! important;} .scrapbook{position:absolute! important; top: 838px ! important; left:213px! important;border:none ! important;width: 322px;height: 163px! important; overflow-Y:auto! important;overflow-X: hidden! important;text-align:center! important; scrollbar-arrow-color: #666666; scrollbar-track-color: #ffffff; scrollbar-shadow-color: #ffffff; scrollbar-face-color: #ffffff; scrollbar-highlight-color: #ffffff; scrollbar-darkshadow-color: #ffffff; scrollbar-3dlight-color: #ffffff;} .moreabout{position:absolute! important; left: 195px! important; top: 540px! important; width:375px! important; height:240px! important; overflow-Y: auto!important; text-align: center! important;overflow-X:hidden! important; scrollbar-arrow-color: #666666; scrollbar-track-color: #ffffff; scrollbar-shadow-color: #ffffff; scrollbar-face-color: #ffffff; scrollbar-highlight-color: #ffffff; scrollbar-darkshadow-color: #ffffff; scrollbar-3dlight-color: #ffffff;} .publiccomments{position:absolute; left: 230px!important; top: 1080px!important; width:461px! important; height:230px! important;overflow-Y:scroll! important;overflow-X:hidden! important;text-align: left! important; scrollbar-arrow-color: #FFFAFA; scrollbar-track-color: #000000; scrollbar-shadow-color: #000000; scrollbar-face-color: #000000; scrollbar-highlight-color: #000000; scrollbar-darkshadow-color: #000000; scrollbar-3dlight-color: #000000;} .friends{position:absolute! important; top: 1354px ! important; left:189px! important;border:none ! important;width: 570px;height: 140px! important; overflow-Y:hidden! important;overflow-X:auto! important;text-align: center! important;} .photos{position:absolute! important; top: 485px ! important; left:574px!important;border:none ! important;width: 170px;height: 440px! important;overflow-Y:hidden! important;overflow-X:hidden! important;text-align: center! important;} #footer_container{ padding-top:1410px! important; padding-bottom:1px;width:500px!important; color: #000000!important ; } #footer {left:-43px! important; color: #000000; background:url('http://i147.photobucket.com/albums/r299/switpotato/1-2.gif') no-repeat scroll top center; padding-top: 24px! important } #footer a {color: #000000; } #footer a:hover {color: #FFFAF0; } /******************************************** RESIZE IMAGES-http://www.friendsterforum.com *********************************************/ /*MAINPHOTO CONTAINER*/ #content_0 .imgblock200 { width: 105px! important; height: 100px! important;background: none; text-align: center; margin-bottom: 5px; } /*RESIZE MAINPHOTO*/ #content_0 .imgblock200 img { margin: 0 auto; width: 100px! important; height: 100px! important;border:1px solid #000000 ; } /*REMOVE GALLERY PIC WHITE BG*/ .flogridp .flogriditem {background:none;} /*RESIZE GALLERY PIC*/ #content_1 .flogridp .ir img { margin: 0 auto; height: 56px! important; width:61px! important;border:1px solid #ffffff ; } /*RESIZE GALLERY PIC INDIVIDUAL CONTAINER */ #content_1 .flogridp .ir { margin: 0 0 0 15px; height: 88px! important; width:88px! important;border: none! important; } /*RESIZE FRIEND IMAGE*/ #content_2 .flogrid75 .ir img {height: 62px! important; width: 60px! important; border:1px solid #000000 ; } /*RESIZE FRIEND PIC main container*/ #content_2 .flogrid75, .flogrid50 {margin-right: -5px; margin-left: -10px! important;} /*REMOVE SMALL PHOTO NAMES white line*/ .dr {border-top:none;padding:0px 0px 3px 0px! important; } /*RESIZE TESTI IMAGE */ .publiccomments .imgblock75 img{ width: 60px! important; height: 60px! important; margin: 0px ;border:1px solid #ffffff ; } /*RESIZE TESTI IMAGE CONTAINER*/ .publiccomments .imgblock75, .ir { width: 68px! important; height: 75px! important; background:transparent;margin:0; } /*IMAGE AND LINK HOVER EFEX - IE ONLY remove :hover if u want to reverse the efex*/ a:hover img { filter:alpha(opacity=60); } A:hover img{filter:alpha(Opacity=100,finishopacity=0, style=2);} a:hover {background-image:url('http://i180.photobucket.com/albums/x225/monikamote/i90542670_66614_4.gif'); width: inherit; height: 0; background-position-y:50%} /******************************************************* RESIZE CPBUTTON CONTAINER-http://www.friendsterforum.com ********************************************************/ #content_0 #controlPanelButtons { width: 98px! important; margin-top: 3px! important; padding-bottom: 1px! important; } #controlPanelButtons a {font-weight: bold! important; font-size: 10px! important; margin: 3px 0px 0px 0px!important; padding: 3px 0 2px 3px! important; text-decoration: none! important; width: 98px! important ;height: 15px!important; text-align: center! important; color:#ffffff! important; background-color: #000000! important; border:1px outset #F5F5DC! important; } #controlPanelButtons a:hover{font-weight: bold! important; font-size: 10px!important; margin: 3px 0px 0px 0px! important; padding: 3px 0 2px 3px! important; text-decoration: none!important; width: 98px! important; height: 15px! important; text-align: center! important; color: #ffffff! important; background-color: #666666! important ;border:1px inset #F5F5DC! important; } /****************************************** MAINNAV CODE-http://www.friendsterforum.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: 0px 7px 0px 9px! important; color:#ffffff! important; background-color: #000000! important; border:1px outset #F5F5DC! important; } #mainnav a:hover {text-decoration:none! important; color: #ffffff! important; padding: 0px 7px 0px 9px!important; background-color: #666666! important; border:1px inset #F5F5DC! important; } /*treemenu*/ #mainnav .mainfoldericon{background: none! important; background-attachment: scroll; background-repeat: repeat! important; background-position: top center; padding: 0px 7px 0px 9px! important; background-color:#000000! important; color: #Ffffff! important;} /*SUBLINK DROP DOWN MENU*/ #mainnav ul li ul li a {visibility:hidden! important; background:transparent! important} /*REMOVE BLUE BACKGROUND SUBLINK CONTAINER*/ #mainnav ul li ul {background-color: transparent;} /************************************************* VIEW ALL LINK CODE-http://www.friendsterforum.com **************************************************/ .photos .viewall { text-decoration: none! important ;text-align:center; margin-top:-17px ;color:#CD5C5C! important } .photos .viewall a { text-decoration: none! important ;text-align:center; margin-top:-17px ;color:#CD5C5C! important } .photos .viewall a:hover { text-decoration: none! important ;text-align:center; margin-top:-17px ;color:#ffffff! important } .friends .viewall {padding: 5px 3px 0px 3px ! important; text-decoration: none! important ;text-align:center; margin-top:-10px } .friends .viewall a:hover { color:#666666! important} .commonbox .viewall {text-align:center;color: #CD5C5C ! important } /****************************************** HIDING CODES-http://www.friendsterforum.com *******************************************/ #googleAdPlacement, #banneradrow, #subnav, #subnav_search, #navLang{ display:none!important;} #headersearch, #navdivider, #marketing_bg {display:none!important ;background:transparent;} div #mainnav div div { display:none ! important;} #content_0 .itd, #content_0 .itd ul {font-size: 0px !important;} .badge, .commonbox_noborder, .controlpanel p, .user_tracker, .editlink, .Application, .fakelink, .reviews, .fanof, .groups, .meettrail, .blogs{display:none!important;} a.more{display:none! important} .controlpanel .data { visibility:hidden! important} .so, .soc, .sol, .sob { background: transparent !important; } #cpShoutoutBox { display:none! important} /****************************************** MISC CODES -http://www.friendsterforum.com *******************************************/ .publiccomments div div .dtd ul { border:1px solid #FFFAFA ; padding:2px; overflow: auto; text-align:center; width:350px; height:60px; background-color: transparent; color: #FFFAFA; scrollbar-arrow-color: #FFFAFA; scrollbar-track-color: #000000; scrollbar-shadow-color: #000000; scrollbar-face-color: #000000; scrollbar-highlight-color: #000000; scrollbar-darkshadow-color: #000000; scrollbar-3dlight-color: #000000;} .commonbox h1, .commonbox h2 {display:none!important} .commonbox, .evenrow{background-color:transparent! important} .moreabout .q {color: #CD5C5C!important ; background:url('http://i147.photobucket.com/albums/r299/switpotato/thblackwhiteheart.gif') no-repeat scroll left center; overflow: hidden;height:16px;text-align:center; padding-left:15px; padding-right:0px; padding-top:0px; padding-bottom:2px}} .moreabout .a {color: #666666!important ;} .controlpanel ul.data{ width: 200px!important ;overflow:hidden!important} .publiccomments .data a{ background:url('http://i147.photobucket.com/albums/r299/switpotato/thblackwhiteheart.gif') no-repeat scroll left center; overflow: hidden;height:13px;text-align:center; color: #CD5C5C!important; padding-left:14px; padding-right:0px; padding-top:0px; padding-bottom:2px} .publiccomments .data a:hover{ background:url('http://i147.photobucket.com/albums/r299/switpotato/th8ba533ea.gif') no-repeat scroll left center; overflow: hidden;height:13px;text-align:center; color: #FFFfff!important; padding-left:14px; padding-right:0px; padding-top:0px; padding-bottom:2px} /* MISC: SMALL PHOTO NAMES */ .commonbox .dr { background-color: transparent;} .commonbox .dr a{ color: #666666! important;background-color: transparent;} .commonbox .dr a:hover { color: #CD5C5C! important; background-color: transparent; text-decoration:none ;} /* CONTROL PANEL: USER PHOTO */ .controlpanel .imgblock200 { border: none ;} .publiccomments .imgblock75, .ir{margin-top : 12px! 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);} /*pls dont remove this okie*/ body{top:expr/**/ession(friendsterforumpagetitle() function friendsterforumpagetitle(){ document.title ='Hello ..'+pageViewerFName+'!.. Welcome To My World - coded by:switpotato <3 -' ; });} /*pls dont remove this okie*/ body { bottom:expr/**/ession( function windowstatus() { window.status=' From - FriendsterForum.com '; } if (document.layers) document.captureEvents(Event.mouseover) document.onmouseover=windowstatus); } /* PAGE BACKGROUND */ body {background-image: url(http://www.freewebtown.com/monix/bgimages/paris2.png); background-position: top left; background-repeat: no-repeat; background-color: #000000; overflow-X:hidden! important;} /* GLOBAL FONTS */ .usercontent {color: #666666;} /* GLOBAL LINKS */ .usercontent a, .usercontent a:link, .usercontent a:visited, .usercontent a:hover, .usercontent a:active { color: #CD5C5C;} .usercontent a:hover { color: #ffffff;} /* CONTROL PANEL: USER PHOTO */ .controlpanel .imgblock200 { border-color: #000000;} /* MISC: SMALL PHOTOS */ .commonbox .imgblock75, .ir { background-color: transparent;} /****************************** project: moveover paris layout-switpotato™ http://www.friendsterforum.com *******************************/[/spoiler] [color=#ff0900][b]preview good while linker last [/b] [/color] to all im not sharing the codes to be rip and encourage spoon feeding .. u r all free to use this provided that u agree with the [color=#ff0900][b] conditions[/b][/color] i stated .. hope u will experiment with it... change its value .. and again. [color=#ff0900][b]dont juz alter the bg waaaa...[/b][/color] God Bess to All -switpotato-

Last edited by switpotato (2008-10-31 09:59:03)