I designed a template-based web page: Website
There's a Menu "Avalúos Inmobiliarios" I don't want to show up. The solution I think of is to either change the menu background color to #173336 (like the background), take this menu off or make it 100% transparent.
The only thing my template service provider allows me in the code is to include CSS.
This is the solution I thought with my limited knowledge was (not working):
li a:visited {
background-color: #173336;
}
So do you suggest any solution with a simple code that could help?
Thanks!
Try this one
.navbar .navbar-inner .container .nav li {
display: none;
}
Related
I'm trying to style a custom menu in the sidebar of a child theme of
WordPress' TwentyTwelve theme.
I'm trying to give a current menu item a grey background.
Unfortunately the "parent" menu item somehow gives the background-color to an area much wider than only the current li menu item.
I'm now using this css code:
.current-menu-item {background-color:#666!important;color:#ff0000!important;font-weight:bold;}
.menu li:not(.current-menu-item) {color:#fff!important;background-color:#333!important;}
To give an example/show what I mean: I'm trying to accomplish it on http://populair.eu, you see on the front page that the menu item "populair" also give a grey background around the image above. The sub menu items are ok.
the weird thing is that it runs ok on my localhost.
I have the feeling that if there would be a < br /> between the < asides> it would be solved but somehow im probably missing something.
Has anyone experience with this? / How it should be styled?
You have to use ".current-menu-item a" to give the background to the anchor link, not to the list item. Also, on your ".menu li a" you may have to "display: block" and "clear: both;". The bigger area is a floating problem.
The best thing for you to do is use either Google Chrome's inspect element software or use Firefox's firebug and select the item, while using either of these you can change the CSS code live. This means that while you are looking at the bit you want to change you can change the code and it will reflect in a way you can see it, you will however need to make these changes in your style.css file on your child theme.
Take a look at the menu that is currently on my website www.driftedmass.co.uk, if that is the kind of thing you are looking for then get in touch with me via the contact form on my site.
If you are wanting to bring down the size of the menu you might need to do something like this (were the <<<< that is the bit you need):
.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
border-bottom: 1px solid #ededed;
border-top: 1px solid #ededed;
>>>> display: inline !important; <<<<<<<<
text-align: center;
width: 100%;
background: transparent;
border-color: #ff0000;
}
.main-navigation ul {
margin: 0;
text-indent: 0;
background-color: #ffffff;
}
.main-navigation li a,
.main-navigation li {
display: inline-block;
text-decoration: none;
}
The bit with the arrows would have originally looked like this:
display: inline-block !important;
I hope this sort of helped you out a little bit.
I am working on a css3 menu and I can't get it to work exactly how I want it to. I'm kind of new to this so be patient with me! :-)
What I want:
When you hover over the top level nav, I want the drop down to ease in AND I want the top level nav to slide up 20px AND I want the top level nav to have a bottom border appear. This is basically what it is doing in FF. However, when I do that, the second-tier nav is getting the same treatment. I don't want that. I want the second and third tier nav to just have a basic hover over color. I do want all of the hover transitions to be smooth so I am using some css3 for that also.
None of this is working in IE. Also, I understand that I can use Modernizr to polyfil some js to make the css transitions work in older browsers, but I don't know how to do that. Can someone tell me?
Here is my jsfiddle . Thanks for any help you can give me!
I changed this:
ul#navigation li a:hover {
color:#acb453;
padding-top:0;
padding-bottom:10px;
border-bottom: 6px solid #4dbaf2;
}
to this:
ul#navigation .topNav > a:hover {
color:#acb453;
padding-top:0;
padding-bottom:10px;
border-bottom: 6px solid #4dbaf2;
}
And added the class "topNav" to your top level navigations. The child combinator after the topNav class limits the style to only the first anchor. Fiddle is here: http://jsfiddle.net/zwVwh/
This should solve your problem:
http://jsfiddle.net/NFEt4/
Basically, you needed some way to override the styling of submenus. I did this with a new class on the nested ul.
If you haven't yet I would recommend checking out SMACSS (http://smacss.com/), I think it would help create a more flexible architecture in your CSS classes.
As for the modernizr question, maybe you could create a separate question to make sure you get a good enough answer for that?
I want to change the css of a theme i downloaded from drupal.
The menu is left to right, but I am writing in a language which is from right to left.
How do I make the menu items come from right to left?
the css of menu I found assuming I identified the correct place is:
/* MENU & link STYLES */
li.leaf {
list-style-image: url(../images/all/menu-leaf.png);
}
li.expanded {
list-style-image: url(../images/all/menu-expanded.png);
}
li.collapsed {
list-style-image: url(../images/all/menu-collapsed.png); /* LTR */
}
#subnavlist a {
border: 1px solid #ddd;
color: #444 !important;
background-color: #eee;
}
#subnavlist li a:hover {
background-color: #dbdbdb;
}
#navlist2 a {
color: #888 !important;
}
#navlist2 a:hover, #navlist2 a.active,
#footer a:hover, #footer a.active {
color: #333 !important;
}
I am not sure if this do the job you need (it's not too clear) but you can use in your css direction: rtl;
Read more: http://www.w3.org/International/tutorials/bidi-xhtml/
By default, li elements flow/read in the order they are in the markup.
ie.
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
produces One Two Three (in a list).
whereas li { float:right; }
produces Three Two One, although the markup will not change.
does that make sense? So to reverse the "readable" order of a list without changing the markup, you must float the li elements right.
There may be other ways.
edit: i should clarify, this works with horizontal navigation. not sure if this applies to you ~ your post states the menu is left to right
I'm a chinese,and my English is not good.But I hope you can understand this.
I think you can use the two attributes of CSS:position:relative;right: length;
length is the distance of the current object'right to its father object'right.
Drupal has built in support for RTL languages, and swapping in the appropriate CSS when a language is defined as being RTL. If you look at the core Garland theme (Drupal 6) or Bartik (Drupal 7), you'll find examples of this. For every style sheet that defines LTR styles (for example, style.css), there should be a corresponding RTL stylesheet (style-rtl.css). The theme will output these when displaying a RTL language.
For reference, look at this documentation page. The Zen theme also has very good support for RTL, and is well documented.
Since the CSS in your example above has a note about LTR, it would imply it supports RTL languages, so the changes you're looking to make should be done in the *-rtl.css stylesheets.
Example page,
Accompanying CSS
Should be a fairly basic issue but for some reason I can't figure it out.
Basically I want the links in my navbar to have no underline or colour change and remain white.
Any idea where I'm going wrong?
It's because you're selecting the main .links element, but not the actual a elements inside. This should do the trick:
.links a {
text-decoration: none;
color: white;
}
I am testing a site build with a slow connection and I noticed the jQuery Accordion stays expanded for a long time, until the rest of the site is loaded, and then finally collapses. Not very pretty. I was wondering how I could keep it collapsed through the loading process and only expand when clicked.
I am working with the standalone 1.6 version of the accordion plugin.
The basic structure :
<div class="sidebar">
<ul id="navigation" class="ui-accordion-container">
<li><a class="head" href="#">1</a>
<ul class="sub">
<li>1a</li>
<li>2a</li>
</ul>
</li>
</ul>
</div>
and the script
jQuery().ready(function(){
jQuery('#navigation').accordion({
active: 'false',
header: '.head',
navigation: true,
animated: 'easeslide',
collapsible: true
});
});
I tried to hide the elements in the CSS to keep them from appearing while loading but all that achieved is in having them always hidden.
Maybe the problem is in the CSS I have a background image in each of the sub menus:
#navigation{
margin:0px;
margin-left: 10px;
padding:0px;
text-indent:0px;
font-size: 1.1em;
width:200px;
text-transform: uppercase;
padding-bottom: 30px;
}
#navigation ul{
border-width:0px;
margin:0px;
padding:0px;
text-indent:0px;
}
#navigation li{
list-style:none outside none;
}
#navigation li ul{
height:185px; overflow:auto;
}
#navigation li ul.sub{
background:url('../images/sub.jpg') no-repeat;
dispaly: block;
}
#navigation li li a{
color:#000000;
display:block;
text-indent:20px;
text-decoration: none;
padding: 6px 0;
}
#navigation li li a:hover{
background-color:#FFFF99;
color:#FF0000;
}
Thanks in advance for any advice on how to have this thing run a little smoother and having the accordion always collapsed.
-edit - I forgot to mention that I am also hoping for a solution that will allow the nav to still be accessible for those without Javascript.
I do this first thing with all my sites: Right after the body tag, put a script tag with this javascript:
jQuery('body').addClass('js');
This gives you a style hook for any elements that will look different in some way when Javascript enabled, and it happens immediately.
There are good solutions to the rest of your problems in the other answers. You'll just need two "base" styles instead of one:
#navigation ul li { /*open styles for no javascript*/ }
body.js #navigation ul li { /*closed styles for pre dom.ready*/ }
... and then re-open before applying the accordion on dom.ready.
EDIT: If you're loading jQuery at the end of the page (or aren't using jQuery), you can use this straight javascript version:
<script type="text/javascript">
var b = document.getElementsByTagName('body')[0];
b.className+=b.className?' js':'js';
</script>
I faced this very problem a week ago. I set the container to display:none and then used jQuery to make it show up at the appropriate time:
$(".accordion").show();
$(".accordion").accordion();
Code inside jQuery.ready() doesn't run until the DOM is ready — so it's normal for elements that will eventually be hidden to stay visible for a while. Accordion is set up this way partly for ease of use and partly for the sake of graceful degredation: content won't be missing (hidden) if JavaScript is disabled.
If you're willing to risk a page that breaks without JavaScript, go ahead and set your elements to be hidden. Then, immediately before .accordion(), show() them.
Here's an idea to maintain compatibility. It has been minimally-tested and is open to comment.
Leave your CSS alone, but add this to the top of your JavaScript (outside jQuery.ready()):
document.styleSheets[0].addRule(".yourclass", "display:none");
That way, as the page is being constructed, a CSS rule will be set up to hide your hidden elements. Then, inside jQuery.ready(), call $(".yourclass").show() to bring them back before initializing the accordion.
Do your .accordion binding directly in a <script> just below the accordion elements instead of waiting for document ready.
They'll then activate as soon as possible, rather than waiting until the page is ‘ready’ (which can take a long time especially on IE, which doesn't support the DOMContentLoaded event, so jQuery has to wait for onload, which only fires after all the images and everything are loaded).
You could set the accordion parent element to ‘visibility: hidden’, and then restore it to ‘visible’ manually when the script initialises. But then browsers with JavaScript off won't see the content at all, which isn't ideal.
be careful using this with regard to accessibility:
body {
display: none;
}
If for whatever reason javascript is turned off, then nothing will be displayed ;)
I haven't used UI accordion, but I have built accordions with jQuery. The only thing the script does is to alternate the visibility of the accordion panels. So if one panel is visible when the page loads, then perhaps you should try using a CSS rule such as:
ul.sub{
visiblity:hidden;
display:none;
}
I tried to hide the elements in the
CSS to keep them from appearing while
loading but all that achieved is in
having them always hidden.
Why don't you try making it hidden in the css, and then do this:
jQuery('#navigation').show().accordian...
I have hundreds of jQuery elements (tabs, sliders & accordions) across many portal sites. Setting hide/show styles for each isn't a realistic option.
Simple solution, hide the body until jQuery is ready and has built the elements, then show the body.
In my master stylesheet:
body {
display: none;
}
In my master javascript file, at the bottom of jQuery.ready():
$(document).ready(function() {
$("body").show();
}
I have been using css solutions like the one Tim suggested, but these would mean to hide content for people with javascript disable (or devices with no javascript support). I much prefer the solution provided by Jerph, thanks for sharing.
I haven't used UI accordion, but I have built accordions with jQuery. The only thing the script does is to alternate the visibility of the accordion panels. So if one panel is visible when the page loads, then perhaps you should try using a CSS rule such as:
ul.sub{
visiblity:hidden;
display:none;
}