Navigational CSS Coding Tricks

Posted on April 15th, 2008 by xsabrina.chic | Filed Under » Coding, Tutorials

THESE TRICKS ARE FULLY SELF-CODED BY xSABRINA.CHIC
Please do not remove credits.

SCROLLBAR COLOR [+] (IE users)
/* SCROLLBAR xsabrina.chic's code - vixenart.net */
html{
scrollbar-arrow-color: #;
scrollbar-track-color: #;
scrollbar-face-color: #;
scrollbar-highlight-color: #;
scrollbar-3dlight-color: #;
scrollbar-darkshadow-color: #;
scrollbar-shadow-color: #;
}

SEARCH SUB NAVIGATION LINKS [+]
/* SEARC SUBNAV xsabrina.chic's code - vixenart.net */
#subnav_search #subnav{
color: #;
}
#subnav_search #subnav a{
color: #;
}
#subnav_search #subnav a:hover{
color: #;
text-decoration: ;
}

FOOTER [+]
/* FOOTER xsabrina.chic's code - vixenart.net */
#footer{
color: #;
background-color: #;
background-image: url();
padding: 20px 0;
}
#footer a{
color: #;
text-decoration: ;
}
#footer a:hover{
color: #;
text-decoration: ;
}

SHOUTOUT BOX [+] (FF users)
/* SHOUTOUT BOX xsabrina.chic's code - vixenart.net */
#cpShoutoutBox{
background-color: #a22b2b;
border: 2px solid #000000;
display: block;
color: #e88eae;
}
.sob{display:none;background:transparent;}
.sol{display:none;background:transparent;}

TRACKER [+] (FF users)
/* TRACKER xsabrina.chic's code - vixenart.net */
.user_tracker{
background-color: #a22b2b;
border: 2px solid #000000;
color: #e88eae;
}


HOW YOU’RE CONNECTED FONT [+]
#meettrail .commonbox h2 .commonbox h2{
color: #;
text-transform: lowercase;
}

MASTER HEADERS INDIVIDUAL IMAGE (See All Headers each Boxes) → VA Fan Profile
Master Headers must be like this:
/* MASTER HEADERS editfriendster.com */
.commonbox h1, .commonbox h2 {
font-size: 0px;
}

And ADD this code:
Master Headers Individual Image Code
/* MASTER HEADERS INDIVIDUAL IMAGE xsabrina.chic's code - vixenart.net */
.controlpanel h1#controlpanel_header{
background: url(http://img266.imageshack.us/img266/2521/h1je7.gif) no-repeat;
}
.photos h2{
background: url(http://img266.imageshack.us/img266/9342/h2qs9.gif) no-repeat;
}
.moreabout h2{
background: url(http://img406.imageshack.us/img406/7533/h3zq8.gif) no-repeat;
}
.friends h2{
background: url(http://img406.imageshack.us/img406/5668/h4rc9.gif) no-repeat;
}
.videos h2{
background: url(http://img406.imageshack.us/img406/9283/h5th0.gif) no-repeat;
}
.groups h2{
background: url(http://img291.imageshack.us/img291/3850/h6yw9.gif) no-repeat;
}
.testimonials h2{
background: url(http://img406.imageshack.us/img406/7042/h7bk8.gif) no-repeat;
}
.testimonialscomments h2{
background: url(http://img291.imageshack.us/img291/7196/h8oy3.gif) no-repeat;
}
.scrapbook h2{
background: url(http://img442.imageshack.us/img442/1460/h9wh5.gif) no-repeat;
}
.fanof h2{
background: url(http://img442.imageshack.us/img442/7944/h10ed5.gif) no-repeat;
}
.myfans h2{
background: url(http://img187.imageshack.us/img187/7907/h11hl6.gif) no-repeat;
}
.reviews h2{
background: url(http://img187.imageshack.us/img187/816/h12ra4.gif) no-repeat;
}
.blogs h2{
background: url(http://img153.imageshack.us/img153/5585/h13jy2.gif) no-repeat;
}
.blogsreviews h2{
background: url(http://img187.imageshack.us/img187/340/h14qf4.gif) no-repeat;
}
.publiccomments h2{
background: url(http://img153.imageshack.us/img153/7840/h15fx3.gif) no-repeat;
}

But if you want single Image for all headers, simply use this:
/* MASTER HEADERS editfriendster.com */
color: #;
text-transform: uppercase;
background-color: #;
background-image: url();
background-repeat: ;
text-align:center;
}

WANT FLOATING BORDERS? [+]
Code from Friendster-Tweakers
/* FLOATING PAGE EFFECT - FRIENDSTER-TWEAKERS.COM */
body {
border-style: groove;
border-top-color: #;
border-bottom-color: #;
border-left-color: #;
border-right-color: #;
border-top-width: 55px;
border-bottom-width: 55px;
border-left-width: 55px;
border-right-width: 55px;
}




85 Comments to Navigational CSS Coding Tricks

  1. xsabrina.chic
    June 29th, 2009 at 1:53 pm

    thank you smiley! you can find it anywhere on the css file of the layout,. just familiarize the code like what stated here in MASTER HEADERS :arrow:

  2. SmILEy:)
    June 26th, 2009 at 9:18 am

    :smile: eLOw puH ate sAbrina.. uR sO gALing puh talaga!. Because Of yOu.. I learned many things.! tHAnks pUh tAlaGa..

    _pEro pwede pUh b mgtAnung, sAn puh mkkita anG master headers individual image s isang layout?

  3. xsabrina.chic
    June 10th, 2009 at 12:54 pm

    aw this is an old post.. sorry for not responding.

    Hi brian, thanks for the message, i really appreciate it :idea: but im not into overlaying fs layouts. maybe yes but that was past years ago aw.. 2005 i think :shock: lahat naman ng tao may alam regarding this, kaw naman :evil: salamat at naiinspire ko kayo :smile:

    thank you so much and welcome to my blog :wink:

  4. princeofdark
    June 7th, 2009 at 2:51 am

    Hello Ma’m Sabrina, :smile:
    Thanks for your splendid tutorials, you’re such a genius girl ever!… matagal na po ako nangarap matuto gumawa ng sarili kong layout, but i tried many times but it doesn’t work. i followed those instructions given by some tutorials like you, but it made me more confused, the way their explanation medyo mahirap unawain sa katulad kong alang alam :grin:
    I thanked God that i found your wonderful-site. it really helps me a lot and understand perfectly on how to deal with tricky-coding. But ma’m Sabrina, if you don’t mind me, i just wanna ask some question, do you have an overlay tutorial also? or is this the same proceedure the one you thought earlier? please let me know ma’m, I really apprecieted your kind consideration regarding this matter.
    hope to hear from you soon!
    thanking you…
    princeofdark (Brian) :lol:

  5. ch'ia
    May 3rd, 2009 at 8:56 pm

    ayaw nga mag apply..o depende sa pc?

  6. jezza
    April 2nd, 2009 at 4:25 am

    ayaw mg apply @_@
    :shock:

  7. jezza
    April 2nd, 2009 at 4:24 am

    ahmmm,.pano i change ung “hme,profyl,apps,cnection…” bla3??
    plz rply kng cno ang mrunong??
    un nlng kse ang kulang..

    tc :neutral:

  8. YANYAN
    March 25th, 2009 at 8:50 am

    ate sabrina. :smile:
    tnx po sa tutorial niyo.
    sa inyo ko unang natutunan ung mga css codes.
    ngayon alam ko na kung pano ayusin profile ko. :razz:
    tnx po ulet ate.! galing2 niyo. :wink:

  9. ROHANA
    March 12th, 2009 at 5:21 am

    hmmm..

    hoping for more nice layouts…

    tc

  10. death
    March 11th, 2009 at 6:15 pm

    thanks pala sa tutorial.. hehehe… =)

    tek care poh palagi.>!!!


Leave a Reply