todays tip takes the ningbar we all know and renews it into a whole diferent animal

taking it off the top of the page moving it wherevr ya want  making it auto resize  based on the width requirements wether logged in or out fades it to pretty transparent except when hovered

etc

see it live www.dreadlockssite.com/main

hint

its moved down just above the menu floating over the slideshow background

when logged in it widens  to accomedate the left div with the appearance button etc

#xn_bar {
    background-color: #666666 !important;
    border-bottom: 1px solid #CCCCCC;
    border-radius: 23px 23px 23px 23px;
    border-top: 0 solid #CCCCCC;
    bottom: 0;
    box-shadow: 3px 6px 23px #CCCCCC;
    height: 22px;
    margin-left: auto;
    margin-right: auto;
    opacity: 0.56;
    padding-bottom: 8px;
    padding-top: 0;
    position: relative;
    top: 459px;
    width: auto;
    z-index: 23;
    display:table;
    min-width:0;
}

#xn_bar:hover{opacity:0.87;}

i assume u will not want to top:459px; so use that to put it where you want it or remove that to leave it at the top

note if u move it from the ti[p u will have a space where it was, you can add a negative margin to ..one of your topmost divs (theme themebody adsabove the header) to move the theme up where the ningbar was (note this mo=ight be something to play with later)

you could alternately remove the top line complete;y change relative to fixed and have it stay attached to the top of the browser  window as u scroll

ofcourse the colors etc u can change as well

the z-index was added to keep it from fkoating on top of the chat

i know that might be confusing (its 4 am) so if you have questions on customizing it let me know i'l try to help

for an even more "minibar" look add this code

#xn_bar_menu_branding {width:auto;min-width:0!important;}

this completely removes the left side when logged out and when logged in condenses it as much as possible removing the extra space

screenshots

logged in non hover

hover version logged in

now when logged out

logged out hover

Views: 367

Reply to This

Replies to This Discussion

Don't take this the wrong way, but your site layout is super-busy. So much to take in at first glance. 

There's no doubt you are the master of customization. Thank you for sharing your tips.

i rearanged it a bit since starting the ning ads beta test

i do ask my members what they like and dont like and try to keep a ballance

i'm constantly tweaking the design so it probly is 1 of the more heavily customized

me encanto gracias le da un gran toque a la red 

thanks :)

RSS

Latest Activity


NC for Hire
Bernard Lama replied to Diego Biasi's discussion 'Remove SignUp function (but keep SignIn)'
"OIC then we can only do this with javacript code. I will try it and let you know. Best Bernard"
8 minutes ago
A discussion started by Andrew Sanderson was featured

Video chat for ning network

I hva eread a dew discussions about adding video to ning networks and wanted to get all the…See More
9 minutes ago

NC for Hire
SweetPotato replied to Diego Biasi's discussion 'Remove SignUp function (but keep SignIn)'
"Diego, I PMd you. hope you got it. SP"
9 minutes ago
Allison Leahy replied to Rowald's discussion 'Midsummer: Ning 2.0 upgrade to Ning 3.0'
"Hope to have a bit more clarification around the release date for migration tools soon. Thanks for…"
10 minutes ago
CZG replied to Troy D. Bertrand's discussion '3.0 - FIRST IMPRESSION...SOCIAL GO DEJA VU'
"I think it would be much better if you left the platform alone and just made improvements. As it…"
11 minutes ago
Allison Leahy replied to israel's discussion 'Imposible entrar a MI RED!!'
"¿Ha tratado de restablecer su contraseña? Si eso no funciona, póngase en…"
12 minutes ago
Profile IconDavid McDine, Joana Reiterer, David Cartes and 5 more joined Creators
12 minutes ago
A discussion started by Diego Biasi was featured

Remove SignUp function (but keep SignIn)

I want to get rid of the SignUp function as membership in my network is under invitation only. I…See More
14 minutes ago

© 2013   Created by Ning.

Badges  |  Report an Issue  |  Terms of Service