some examples..
#jqt .back.active {
-webkit-border-image: url(img/back_button_clicked.png) 0 8 0 14;
}
Back
and
#jqt ul li a.active, #jqt ul li a.button {
background-color: #676c96;
color: #fff;
}
<ul class="individual">
<li>Cancel</li>
<li><a href="javascript:placeOrder()" >Place order now</a></li>
</ul>
when either of these are pushed the active state does not turn off. Any quirks why or a way to force the deactivation?
Thx
Slightly confusing question. a:active selects the link when it's in the active state; a.active is a class, presumably added and removed by javascript. You haven't posted your JS, so it's hard to say, but it sounds like either there's a bug in there, and it's not removing the active class properly from the elements, or, in your stylesheet you meant to use :active.
How about using JQuery, just use specified classes instead of the active state. A snippet of code ive used recently should give you some idea of how it works.
$("#tabMenu > li").click(function () {
$("#tabMenu > li").removeClass("selected");
$(this).addClass("selected");
});
Related
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'm just trying to create a simple menu. So when you click a link, it directs you to another page and shows you that you selected that link by changing colour.
The problem I have is when I click a link within the list, the page loads and for some reason the list elements all enter the a:visited field. Setting them to red. I have the JSFIDDLE Here. I know its simple but it's getting on my nerves.
CSS Code:
ul.nav_style{list-style: none;}
ul.nav_style li {padding-left: 1em; text-indent: -.7em;}
ul.nav_style li:before {
content: "• ";
color: #C0C0C0; /* or whatever color you prefer */
}
ul.nav_style li a:link { color: #C0C0C0; text-decoration: none;}
ul.nav_style li a:visited { color: #FF0000; text-decoration: none;}
ul.nav_style li a:hover { color: #58595B; text-decoration: none;}
ul.nav_style li a:active { color: #E6BD13; text-decoration: none;}
HTML Code:
<ul class="nav_style">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
Thanks in advance.
Chris
The explanation is simple: all the links have the same href. Assuming you will change the hrefs, this will not be an issue on your final site. :)
See my fiddle. All I did was to change the hrefs. Does it work as you expect now? http://jsfiddle.net/TheNix/sR3Ub/3/
EDIT:
Now, if you simply wish to make sure the link looks the same regardless if it's been visited or not, all you have to do is to apply the same styling to the :link and :visited states, like so:
ul.nav_style li a:link,
ul.nav_style li a:visited { color: #C0C0C0; text-decoration: none;}
ul.nav_style li a:hover { color: #58595B; text-decoration: none;}
ul.nav_style li a:active { color: #E6BD13; text-decoration: none;}
Now the link should be grey when idle (even if it's been visited), darker grey when you hover over it, and gold when you click it. See fiddle: http://jsfiddle.net/TheNix/sR3Ub/5/
EDIT v2
It seems you are a little bit confused about the states of a link, so here's the low-down:
:link is the standard idle link (can also be targeted simply as a)
:hover is the act of hovering over the element with the cursor.
:visited is applied to links which have already been visited.
:active is the state when the link is active in the user interface — e.g. when you are hovering over it, and pressing left mouse button (onmousedown), or when using the TAB to highlight the link. When you release the mouse button (onmouseup) or tab out, it will revert back to it's previous state.
:active therefore have nothing to do with determining if it is the active page, it only applies when you hold the mouse button down.
What you are trying to do, is unfortunately not possible with CSS alone. Here is a simple example of how it can be achieved with jQuery. http://jsfiddle.net/TheNix/sR3Ub/6/
This may be a reason of security of browsers, http://dbaron.org/mozilla/visited-privacy
Mozilla http://blog.mozilla.org/security/2010/03/31/plugging-the-css-history-leak/ also informed about this. Most of latest browsers has taken this action to protect the users.
you must put target url in href or in data-href or etc,and after click in link and load new page you must check window location and set link color to red:
$(function(){
var url = window.location.href;
$("ul.nav_style li").each(function(i,e){
var $this = $(e);
if ($this.attr("href") == url){
$this.css("color","red");
}
};
});
Problem solved, I've decided to just use PHP to generate my lists using arrays and an if statement to give the current page its css class.
PHP CODE:
if($title == "Enter"){
$enterArrayPages = array("competition.php","full_detail.php", "judges.php", "get_involved.php", "employers.php");
$enterArrayText = array("The Competition","Full Detail","The Judges","Get Involved", "Employers");
echo '<ul class="nav_style">';
for($i=0; $i<sizeof($enterArrayPages); $i++){
if($proper_title == $enterArrayText[$i]){
echo '<li><a class="linkChange" href="'.$enterArrayPages[$i].'">'.$enterArrayText[$i].'</a></li>';
}
else{
echo '<li><a class="menu_links" href="'.$enterArrayPages[$i].'">'.$enterArrayText[$i].'</a></li>';
}
}
echo '</ul>';
}
So as you can see, the code loops through each of the pages stored in an array and if the title of the page is equal to the one in the array I change its class, making the color of the link different to the others.
Here is the CSS:
a.menu_links:link { color: #58595B; text-decoration: none;}
a.menu_links:visited { color: #58595B; text-decoration: none; }
a.menu_links:active { color: #E6BD13; text-decoration: none; }
a.menu_links:hover { color: #E6BD13; text-decoration: none; }
.linkChange {
color: #E6BD13;
text-decoration: none;
}
It's really simple, I just had to think of the logic via PHP. I thought that implementing it in pure css would be good enough, but with time ticking, I resorted to PHP.
Here is an image of the code output:
Thanks for everyones comments! Much appreciated!
Here's a screenshot of the problem:
Notice that we're on the stalk page. The CSS I wrote is supposed to change the color of the active page. Here is the CSS:
#nav {
border-top:10px solid #A7C1D1;
height:45px;
padding-left:100px;
padding-top:20px;
margin-left:0;
color:#000;
}
#nav a {
color:#000;
text-decoration:none;
}
#nav a:visited {
color:#000;
}
#nav a:hover {
color:#93AFBF;
}
#nav .active {
color:#93AFBF;
}
Before, I had the CSS for #nav .active to create a border around the active page. This worked and I could see the border around the word "stalk" when I was on the /stalk page. But this time around, I decided to just change the color of the word. This is where I ran into the issue.
Here is the HTML rendered for the page:
<div id="nav">
home · stalk · link3 · link4
</div>
If I take away the CSS for #nav a:visited then the CSS for #nav .active works, but now the visited links are blue when I want them to stay black.
Use
#nav a.active {
color:#93AFBF;
}
The #nav a:visited has higher specificity w3 specs than #nav .active and thus gets applied.
Try
#nav a.active
{
color: #93afbf
}
That should do it.
try:
#nav a:link {color: #000;}
#nav a:visited {color: #000;}
#nav a:hover {color: #93afbf;}
#nav a:active {color: #93afbf;}
You are confusing the active pseudo class
Site Point Refrence
This pseudo-class matches any element that’s in the process of being activated. It would apply, for instance, for the duration of a mouse-click on a link, from the point at which the mouse button’s pressed down until the point at which it’s released again. The pseudo-class does not signify a link to the active, or current, page—that’s a common misconception among CSS beginners.
Similar Problem
Border property is not inherited while color property it is. So you inherit the color property for your link from the #nav, while the border property was the one declared in the "active" class rules. You should declare the color property for the link with the "active" class as suggested by Gaby
Tonight I found an unusual one. (A link color that I couldn't change.) I went into the inspector and first found the text-decoration-color property set. But no, that would be too easy. I scroll down to color and find this :not selector, which a theme author created. In my specific case, the solution was to duplicate (overwrite) this weird selector with the color I wanted:
#the-post .entry-content a:not(.shortc-button) {
color: white !important;
}
My suggestion is to go into your inspector (F12) and find the "Computed" tab and look where the colors are coming from. Usually it's straightforward where the color is coming from, and the inspector will even tell you which file and which line number set the color. Then the decision is, do you have access/permission to that file? Or maybe you have access, but do you necessarily want access to that file?
If you want to avoid changing the source of the color, for whatever reason, you can just re-declare the color again further down the page, like in your footer, or immediately after the theme is loaded, whatever the case may be. Of course given the option, it's usually preferable to find the root of the problem and then you end up using less CSS code which loads faster and is easier to maintain.
Am using css for some site. I noticed that the a:active style definition in my css file does not work at all. I was told by someone that I have to put the definitions in this order
a:link {...}
a:visited {...}
a:hover {...}
a:active {...}
I have done so but it's still not working. Please could someone tell me why it is not working and a possible workaround. Thanks
Here is a working example:
http://jsfiddle.net/BMHUz/
Click and hold on the anchor tag and you will see it turn orange.
a:active just stay for the few milliseconds you are clicking the link.
May i ask what you expect to see? In case you want a link to be a different color if you are on that page, thats not what a:active is for
If you want a link to be a different style if you are on that page, then you need to use jquery or javascript to change the style of active link.
jquery
$('a[href="' + window.location.href + '"]').addClass('active');
CSS
a.active{
/* your CSS for active link */
}
Put !important to the property if it is already defined to the anchor.
a {
color: white;
}
a:active {
color: black !important;
}
I'm having a bit of difficulty adding some CSS to a link. I'm using a CMS that automatically generates menus in an unordered list. However, where you're on a given page, it applies class="active" the the li and not to the link itself. This works fine for adding a background to the link, but I'm trying to change the link color.
<li class="active">
Link
</li>
I'm having difficulty coming up with the CSS to say "If a link is in an li with class="active" then make the link text color x."
How might I accomplish this?
Thanks!
the path is
li.active a { color: .... }
The MDC CSS Reference has good examples for the various types of selectors.
li.active a {color:whatever}
a
{
color: black;
}
a.active
{
color: green;
}
Try this:
.active a {color: red;}