I'm creating a custom master page for a MOSS publishing site. The designers have come up with this idea for the fly out menu...
alt text http://www.abbeylegal.com/Downloads/2009-01-06/gradient%20menu.jpg
which uses graduated/different backgrond and text colours for each menu option.
Does anyone know how to accomplish this?
You can use the CSS next-sibling selector (+) to achieve this however IE6 won't get the styles.
Do something like the following (colour properties are just for example):
ul ul li { background: darkblue; color: lightblue; }
ul ul li+li { background: blue; color: lightblue; }
ul ul li+li+li { background: lightblue; color: darkblue; }
ul ul li a:hover { color: black; }
Alternatively, you'll have to either apply a CSS class to each subitem going down (talk to the programmer if you're not responsible for that), or do it by adding classes with javascript.
Ideally try to convince them that you can't do it for IE6 but modern browsers will manage fine. As long as the site is still usable the gradient of colours is a very minor loss.
I see two possibilites with pure css:
1.
If you have fixed pixel height for the entry lines you could always use one single background image with the gradients on it. If you make your menus with lists you could just slap it on the encompassing list tag.
2.
If you want to to keep the line height/ font size flexible you can work with multiple classes: one for every color tone. Just give give every nth-line a special class with the corresponding color tone as a background color and slap that class on the tag for that line.
design critic:
The problem that I see here is that you will have a maximum number of entries because with this level of gradual fade the background color will become white after six or seven entries.
kind words:
As long as the menu doesn't have to be transparent you should be fine.
If you want to be able to calculate a gradient of arbitrary colors, this page has some useful functions for handling hex color triplet calculations.
I would probably use the Suckerfish method with different a CSS class for each level of <li> in the menu:
<ul id="menu">
<li class="root">Home</li>
<!-- etc. -->
<li>Products
<ul>
<li class="sub1">BTE Legal Expense Insurance</li>
<li class="sub2">Legal Services</li>
<!-- etc. -->
</ul>
</li>
<!-- etc. -->
</ul>
I found this not to be possible with the Sharepoint
Related
I'm working on a WordPress site with the Twenty Twenty theme and have made some CSS changes which apply globally to make all hyperlinks red as below:
a {
color:#ff0000;
}
I used the CSS customise side bar to globally change hyperlink colour to red but now I need to change the hyperlink colour to white for all 'list' links on just one page, leaving all other pages with red links (don't ask, it's a requirement of someone).
I have tried the CSS edits below and none seem to work for my page. The hyperlinks are WordPress list items if it helps at all. As you can probably tell I don't understand CSS enough to isolate one page to it's own styling.
.page-id-253:li{
color:#FFFFFF;
}
.page-id-253:ul{
color:#FFFFFF;
}
#page-id-253:link{
color:#FFFFFF;
}
#page-id-253:a{
color:#FFFFFF;
}
How do I select the links in list items on just one page of my WordPress site?
You are using the wrong syntax.
And there is actually a :not selector in css where let you give style to the other element exclude the specific element.
a{
color:red;
}
/*a:not(#page-id-253 a){
color:red
}*/
.menuitem li a {
color:black
}
<a >Click</a>
<ul class='menuitem'>
<li><a>Link </a></li>
</ul>
#james Thanks a bunch, i had to make a small edit so the #page-id-253 to .page-id-253 and now the hyperlinks change to my chosen colour.
Only problem that has been introduced is my links list in the page footer have changed from black text to white also as the above is page wide. Sorry I didn't probably ask my question enough the firs time around.
Now, do I need some kind of a subquery text change that would be along the lines (obviously wrong in my case!) like...
.page-id-253 a{
color:white;not(.footer-nav-widgets-wrapper)
}
a{
color:red;
}
#page-id-253 a{
color:black
}
<a >Click</a>
<ul id='page-id-253'>
<li><a>Link </a></li>
</ul>
As far as I understand you want to change the link color of just one page. So just add the style tag to that page.
<head> <!-- the page you want to change link color -->
<!-- add this tag to your page -->
<style>
li a {
color: #000;
}
</style>
<!-- end -->
</head>
Can anyone tell me why the colour of "Slewing Rings" is not in red whilst the background colour is indeed in yellow? I'm sure I'm doing something incredibly stupid... but it is beyond me as to what it could be.
Screenshot showing elementor editor with menu bar
/* Decorate Slewing Rings in Menu */ .slewing-rings {
background-color:
yellow; color: red;
}
As always,
thank you.
Michelle
Maybe your text color is inheritance from parent element.
Try it
color: red !important;
You can do it in two ways:
1. You can give !important to css property like this
/* Decorate Slewing Rings in Menu */
.slewing-rings {
background-color: yellow;
color: red !important;
}
You can give parent class with ".slewing-rings" class to change it priority.
/* Decorate Slewing Rings in Menu */
.parentClass .slewing-rings {
background-color: yellow;
color: red !important;
}
You need to style the child element which contains the "Slewing Rings" text, not the surrounding label box (which is what your .slewing-rings class is currently being applied to.) I can't know your exact node-tree from that picture but if you right click and inspect element on that button, try to style the element which contains the text.
<div class="slewing-rings">
<span>Your Text Is Probably Here</span>
</div>
Now that you've provided your page link I can give more concise help:
<li class="slewing-rings menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-171">
Slewing Rings<span class="sub-arrow"><i class="fa"></i></span>
</li>
The "a" tag needs to be targeted within your CSS. However, your website seems to be working as you intended, so you may have figured it out. It seems the elementor-item class is working to provide the red color.
The class is added to the li item which is why your css doesn't work.
Try this
.slewing-rings a {
color: red;
}
<div class="col-lg-3">
<ul class="nav navbar-nav login-right">
<li>Login or create account</li>
</ul>
</div>
Simple question, how to write class in CSS and how to name it to make different colors for those two links, and also to move inline style in external CSS.
I tried to give normal class to each link and just to call that classes in external CSS file but solution fails.
Any idea?
Simple question, how to write class in CSS and how to name it to make different colors for those two links, and also to move inline style in external CSS.
You can use nth-child and color both a tags differently
ul.nav li a:nth-child(1){
color:green;
}
And
ul.nav li a:nth-child(2){
color:blue;
}
Since both have the same padding style you can place it in a common style definition
ul.nav li a{
padding:0;
}
Important: make sure the external file which you write this in is placed last in your HTML hierarchy. By CSS prioritisation rule the file placed last in the hierarchy gets the priority.
Edit: seems like you have many elements with same structure. In this case it's better to select specific element and using id will be our best choice. Add id to your ul as below
<ul id="colorMe" class="nav navbar-nav login-right">
And change your CSS selectors to
#colorMe li a:nth-child(1)
Do similar to other selectors too
I am trying to override my default CSS in my WordPress theme's settings, but am having a heckuva time doing so.
Here's what my top menu looks like:
And the same goes for the submenu links when hovering over the top links:
I'd like the links to be white ... obviously the blue doesn't show up well at all.
Here's what I get when I Firebug the "About" link:
And when I right click the Firebug and copy the HTML, here's what part of it looks like:
<ul class="menu" id="menu-mega-menu"><li class="menu-item menu-item-type-custom menu-item-
object-custom level0 has-sub" id="menu-item-3462"><a href="#"><i class="icon-thumbs-
up"></i>About<i class="icon-caret-down"></i></a>
<div class="sub-content" style="display: none;"><ul class="columns">
<li><ul class="list"><li class="header">The Basics</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page level2" id="menu-
item-155">Our Mission</li>
I've tried using #MashMenu, .menu-mega-menu, .mashmenu, and always do a color:#FFFFFF!important; but nothing ever gets rid of that blue. I don't know if I provided enough information here, but any help in guiding me in the right direction would be truly appreciated!
My blog is located at http://www.occupyhln.org
I'm not sure if the color is coming from the wordpress theme or from the user agent stylesheets, but the latter do tend to have higher specificity selectors for a that will prevent the simple a selector from working the way you want.
Inherited values are not related to selectors. You need to actually select the a to override other selectors for its property. For example:
.wordpress-theme a {
/* Selects <a> and sets the color
color: blue;
}
#MashMenu {
/* Selector has higher specificity but does not select <a> */
color: red;
}
#MashMenu a {
/* Selects `<a>` with higher specificity */
color: red;
}
I believe you need to apply the color override directly to the the <a> tag your are trying to effect. You probably have something more high-level that is dictating the color.
Consider this simple example:
HTML
<ul>
<li>
<a href='http://google.com'>Here is a link</a>
</li>
</ul>
CSS
li {
color: red;
}
li a {
color: green;
}
The original css is more specific and has the !important value on it. So fight fire with fire and do something like
.catalyst-widget-area a, .catalyst-widget-area a:visited,
.catalyst-widget-area a:hover {
color: #fff !important;
}
You can narrow the selector even more so you make sure it overrides it.
#mashmenu .catalyst-widget-area a, #mashmenu .catalyst-widget-area a:visited,
#mashmenu .catalyst-widget-area a:hover {
color: #fff !important;
}
And you can go on and on, making it more specific until it yields.
But here's something I've been wondering, how are you adding all these custom css files to a Wordpress theme? I say this, because there's is a right way, and many wrong ways to do it.
The right way is making a child theme of your current theme and work it from there. Child themes however, are not for entry-level modifications (though is way easier to override default styles from a child theme), in that case, there are plugins that help you override the css with your own custom css, one of the most popular is Jetpack.
In order to solve this issue in case anybody runs into a similar issue, I used the following:
.mashmenu .menu>li>a{color:#FFF !important;}
.mashmenu .columns .list a{color:#FFF !important;}
.mashmenu .menu .sub-channel li a{color:#FFF !important;}
.mashmenu .content-item .title a {color:#FFF !important;}
.mashmenu .page-item .title a {color:#FFF !important;}
.mashmenu .page-item a {color:#191970 !important;}
But when putting it at the bottom of my custom CSS, it didn't work; when I put it at the beginning of my custom CSS, it worked for some reason. I have no idea why this is the case, but this is what finally did the trick for me. Thank you for all who opined and helped me figure this out.
I have a relatively straight forward question. I want to edit a specific portion of my list, but I'm not sure how to format the CSS. Here's the code:
<ul class="upcoming">
<li class="post-265 tribe_events type-tribe_events status-publish hentry">
<div class="event">
Big 10 Alumni Picnic
</div>
<div class="when">
June 2, 2013 11:00 am – <br>June 2, 2013 3:00 pm
</div>
</li>
</ul>
I want to modify the li portion of the formula (i.e., to add a border, remove a border, etc.) but I can't figure out how to start the code.
event.li didn't work. li.event didn't work. I'm sure it's a simple fix, but I can't figure it out. Any help would be much appreciated!
Remove a border is:
<li style="border:none;">
Or in your CSS styles:
li.tribe_events {border: none;} /* either or*/
li div.event {border: none;}
But it's unclear as to whether you want to just do this statically, or want to do that dynamically from JQuery or whatever, in response to something happening. You probably need to specify what the situation is.
In JQuery:
$("li").css("border", "none");
$("#ID_of_some_element").css("border", "none");
But it's an issue of which <li> and when, really, isn't it.
If you're talking existing Javascript, event.target will give you the target node of DOM events such as hover, onclick etc.
If you want to remove it from the div: li .event is what you want. If it's from the list item it's .upcoming li.
ul {
border:1px solid black;
}
Simples
Although I'm sure what you're looking for is far less simple than originally stated
This should most likely work if I understand what you are asking:
li div.event {
border: none;
}
(or even more specific)
ul.upcoming div.event {
border: none;
}
li.event selects a li element with event class. You don't have that.
You have div element with event class. So, you weren't specific which element you need, but to select your li element you need ul.upcoming li; and to select your divs inside it: li div.event (or ul.upcoming li div.event or just .event, depending on how specific you need to be).
<li class="post-265 tribe_events type-tribe_events status-publish hentry">
Wow.. you have applied a lot of class name here. Would be better if you just using one or two class name which is specifically for that ul listyling, like:
.upcoming li{
/* any styling for the list goes here */
}
or maybe just create a new class name just for that list styling
.the-list{
display:block; /*to align it horizontally just use display:inline; */
(etc...)
}
So it looks nicer and easier to maintain it later on right? Happy coding!