Hi all, I'm trying to implement the below code at my site at NE1UP dot com, under the 'signup' dropdown on the far right of my header. Anyway... The background of the dropdown matches my site background and it looks awful. Could someone take the time to point me in the right direction on where and how I should style this? In my main.css, or just in this snip itself somewhere? Thank you! <div class="navbar"> <div class="navbar-inner"> <div class="container-fluid"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <a class="brand" href="#" name="top">Brand Name</a> <div class="nav-collapse collapse"> <ul class="nav"> <li><a href="#"><i class="icon-home"></i> Home</a></li> <li class="divider-vertical"></li> <li class="active"><a href="#"><i class="icon-file"></i> Pages</a></li> <li class="divider-vertical"></li> <li><a href="#"><i class="icon-envelope"></i> Messages</a></li> <li class="divider-vertical"></li> <li><a href="#"><i class="icon-signal"></i> Stats</a></li> <li class="divider-vertical"></li> <li><a href="#"><i class="icon-lock"></i> Permissions</a></li> <li class="divider-vertical"></li> </ul> <ul class="nav pull-right"> <li><a href="/signup">Sign Up</a></li> <li class="divider-vertical"></li> <li class="dropdown"> <a class="dropdown-toggle" href="#" data-toggle="dropdown">Sign In <strong class="caret"></strong></a> <div class="dropdown-menu" style="padding: 15px; padding-bottom: 0px;"> <form method="post" action="login" accept-charset="UTF-8"> <input style="margin-bottom: 15px;" type="text" placeholder="Username" id="username" name="username"> <input style="margin-bottom: 15px;" type="password" placeholder="Password" id="password" name="password"> <input style="float: left; margin-right: 10px;" type="checkbox" name="remember-me" id="remember-me" value="1"> <label class="string optional" for="user_remember_me"> Remember me</label> <input class="btn btn-primary btn-block" type="submit" id="sign-in" value="Sign In"> <label style="text-align:center;margin-top:5px">or</label> <input class="btn btn-primary btn-block" type="button" id="sign-in-google" value="Sign In with Google"> <input class="btn btn-primary btn-block" type="button" id="sign-in-twitter" value="Sign In with Twitter"> </form> </div> </li> </ul> </div> <!--/.nav-collapse --> </div> <!--/.container-fluid --> </div> <!--/.navbar-inner --> </div> <!--/.navbar --> <script> $(document).ready(function() { //Handles menu drop down $('.dropdown-menu').find('form').click(function (e) { e.stopPropagation(); }); }); </script> Code (markup):
Problem is here .dropdown-menu { background-clip: padding-box; background-color: #006DCC; that background-color is what is setting that blue. Would have to check a few things but that files is minified so its a bit of pain to edit and you likely shouldn't really but it wont hurt. http://ne1up.com/css/bootstrap.min.css hope that helps, Nigel
FYI it takes about 20 minutes to get your head around this firefox plugin https://getfirebug.com/ It also allows you to make edits to those folks and see what it does prior to actually editing them. Its lifesaver sometimes. Nigel
Thank you, Nigel! I really don't like asking such newbie questions but sometimes it really helps to get a specific answer to a specific problem I have, it helps me 'fit the puzzle' together a bit better of what I'm doing. Instead of modifying bootstrap.min.css, I just added the below to main.css since it's called last. It appears to work though I've only looked at it via Chrome so far. Not sure if there's a disadvantage to doing it there, rather than where you suggested, or if that's OK? .dropdown-menu { background-clip: padding-box; background-color: #ffffff;!important} Code (markup): I will check out Firebug. 99% of the time I am in Chrome though unfortunately. Not sure if there's an equal alternative for Chrome users?
Yep, that's got it on ff as well. That doesn't work all the time if stuff is not getting minified automagically but looks good here. If I had to venture a guess that is in main.css anyway so you may want to check if you have done something redundant. Nigel
Oh good idea, should have thought of that, thank you for the redundancy tip and the feedback on FF! Looks like I'm going to have to start keeping FF open - I read up a bit the past few on Firebug and really want to try it out.
I have been trying to force myself to use chrome for about a year now. Too much of a habit to use FF. I cant break my self from it lol.. Nigel
Without seeing the accompanying CSS it's hard to dial in the markup, but if this is just a normal dropdown menu you've got WAY too many pointless/garbage classes and ID's, and seem to be using jQuery {string of nasty expletives omitted)-tardery bull to do CSS' job... that or you're wasting a massive amount of scripting on what should be a simple class swap. Of course if you're using that bootstrap garbage it's hardly surprising you're having problems, since CSS frameworks defeat the point of even using CSS in the first place with their pointless/idiotic/redundant presentational use of classes. In any case I'm pretty sure about a third of that markup belongs on the cutting room floor.
I'm pretty sure you just posted to increase your post count and not contribute anything in any way helpful. Thinking I might be wrong, I read those two posts in your signature: nope, someone doesn't see things your way, they're "dumb" and a lot of other ridiculous statements backing up your opinion. Albert Einstein sure didn't say opinions are like assholes...but doesn't matter, clear you don't really apply your own fancy Einstein sig quote to your own way of dealing with different problems and new thinking. But what do I know, I'm just a combat veteran and single parent learning how to code with a $10 CodeCanyon script - you're the guy with all the answers. Seem to love preaching and browbeating about them, too.
That said, I did appreciate certain generalized tidbits of info mixed in with your overall derogatory and pointless diatribe, especially down the road as I progress in understanding and ability. And now I'm done responding to you, as*hole.
Sorry you feel that way, but would you prefer we slap the rose coloured glasses on your head and lead you down the garden path to failure? You've got an inaccessible improperly written form, a dozen or more completely unnecessary DIV, static style inlined in the markup, classes that could be confused with CSS reserved words, placeholder doing LABEL's job for 'false simplicity', FOR attributes without matching Id's, input[button] doing anchor's job, -- it's a laundry list of how not to write HTML and the sooner you realize this the better things will be for you! By my best guesstimate you've got 2.5k of markup doing 1.2k's job -- and that's not a joke. If adhering to standards, following the specification, bothering to understand the point of HTML and CSS and pointing out that your code doesn't makes me an ******, so be it. Beats the hell out of sticking one's head in the sand to go "la-la-la-la... la-la-la-la" and pretend nothing is wrong. Keeping the two input[button] that should probably be anchors or even span (and if they're scripting only functionality should be added BY the script!) there's little legitimate reason for most any layout for the markup to be much more than: <h1>Brand Name</h1> <ul id="mainMenu"> <li class="home"><a href="#">Home</a></li> <li class="pages"><a href="#" class="current">Pages</a></li> <li class="messages"><a href="#">Messages</a></li> <li class="stats"><a href="#">Stats</a></li> <li class="permsissions"><a href="#">Permissions</a></li> </ul> <ul id="userMenu"> <li><a href="/signup">Register</a></li> <li class="logIn"> <a href="#">Log In</a> <form method="post" action="login" accept-charset="UTF-8"> <fieldset> <label for="username">Username:</label> <input type="text" name="username" id="username" /> <br /> <label for="password">Password:</label> <input type="password" name="password" id="password"> <br /> <input type="checkbox" name="remember-me" id="rememberMe" value="1" /> <label for="rememberMe"> Remember me</label> <br /> <input type="submit" class="submit" value="Sign In"> or <br /> <input type="button" id="loginGoogle" value="Sign In with Google"> <input type="button" id="loginTwitter" value="Sign In with Twitter"> </fieldset> </form> </li> </ul> Code (markup): Assuming at most one extra div around everything for width constraining, that's it. Admittedly I took a wild guess as to what the 'brand name' element was supposed to be. Again, I'd have to see the actual page with the matching CSS and what else is going on around it to dial it in closer; but I'm 99% certain that at least 30% of what you have in there for markup serves no legitimate purpose, and as much as 50% could be eliminated. ... and if that makes me a *****, FINE!
No, sir, that was extremely helpful and very appreciated. And I might have been a bit quick to retort to your first reply reading it again - I am here to learn, and at the time it just seemed like a general "it's all crap" to me. Which is super fine, but being brand spanking new to this, I was looking for a little "why it's crap" too. In any case, I do appreciate you taking the time to reply less bitchy then I did. It's a $10 CodeCanyon script, and the dropdown I just literally snagged off bootsnipp.com. What I'm hoping to be able to do with this poorly-written house of cards: I'm just learning, trying to get a working grasp of HTML, CSS, PHP, and javascript all in one place. I had a WordPress landing page up at this website (NE1UP.com) prior to this, and I do get visitors, so I also wanted to provide something "out of the gate" that would be functional, if not mildly useful, and 'NE1UP' theme-y. It was my hope that as I learn and tweak this script, I'll learn to see and identify those glaringly annoying bits of absolute uselessness - ESPECIALLY as I'm all about KISS, keeping it simple, streamlining, tweak tweak tweak tweak and tweak some more. And believe me, the rest of my site is surely no better. But in a year, learning from people like you and Kilo and Nigel around here - well, I won't always be asking stupid questions! Be well, enjoy your weekend!
He may come across as a tad obnoxious but he knows his stuff. The problem is it becomes pretty frustrating to help folks around here. People just don't listen or care how to do things as per the actual standards. Same thing with the SEO board here. 99.9% of what I read over there is just plain wrong. The issue is if there are 100 ways to do something 99 of them are wrong if you will. That it may actually work to some extent, visually, is academic. If you care.. and you should. I am not a programmer. Certainly not logic or php but the markup I learned was xhmtl 1.0 strict from a fellow in the UK who wrote nothing but standards compliant, accessible code so blind folks can read it etc. I don't really know any other way to do things. I couldn't code a table with out googling that stuff first. The point here is in the long run its much easier to learn a few tricks and how to do things correctly. It saves you a lot of time and headaches. Using this is fairly helpful https://addons.mozilla.org/en-US/firefox/addon/web-developer/ under tools you can run compliance tests against section 508 and WAI to check accessibility and also test the xhtml. Its usually pretty easy to figure out how to do things correctly that way. Its good to check errors and Google how to fix things. That helps to learn proper markup as well. Off to get my head around some more html5 and CSS3 I am woefully behind lol.. Lots of good stuff here FYI. The GAWDS mailing list is good too but I am not sure what those folks are up to. Their website is landing page for their host currently but I learned a ton of stuff from those guys. Accessibility is law across the pond. UK folks are hardcore about that stuff. have a nice weekend Nigel