So, I need to remove a visited link coloring from my navigation bar, as it will look ugly.
I have tried to use text-decoration: none; and color: white; but that does not seem to help it.
CSS for navigation
Actual code
I removed the actual links from the code, in the real version there is link but for this question links are replaced with #
In addition to Bariock's answer, this will help reset your <a> links in all circumstances to your specified css.
a:visited, a:hover, a:active, a:focus {
color: yourColor !important;
text-decoration: none !important;
outline: none !important;
}
The !important signifies that it has a higher precedence than that of other rules declaring the same values for the same selectors. Note: you can still style them separately such like you would with :hover.
a:visited{
color: your-color;
}
I edited the <a> tag to go around the <button> so the text is back to white now and the button actually works. It is no longer just "click text to visit link" the whole button works.
<button class="dropbtn">Community</button>
Try adding a !important to the end of the css styles like so:
a {
color: white !important;
}
Hope this helps!
I recommend you first set the style of the link tag, for example:
.dropdown a{ color:#fff }
now your text links inside the container with the class .dropdown will be as white color. Then you don't need to set a visited link color, unless you want to set it.
If you want to get rid the underline in the link, your style will be like this:
.dropdown a{ color:#fff; text-decoration: none; }
I've seen the other question about this here but their solution did no work for me. When the mouse hovers over a hyperlink, a pesky red line appears underneath it. I've tried:
a:hover{
text-decoration: none;
border-bottom: none;
}
a {outline : none;}
.entry-content a {
border-bottom: none;
}
on Appearances->Customize->Additional CSS
on Appearances->Editor->style.css
also on the Slider Revolution Custom CSS because initially I thought this was an issue with the text in the slider, but later realized it's from the whole theme.
also on style.css:
every instance of border-bottom was commented out and replaced by border-bottom:none;
every instance of a:hover that had border-anything had that border commented out
every instance of box-shadow was commented out and replaced by box-shadow: none;
The red line keeps showing up when I hover. I don't know what else to do. I also asked someone to clear their cache and cookies and then refresh the website. The underline/border/box is still there. Is there anything else that could be causing this?
Based on the Scrawl theme preview, looks like it's an ::after so you can override it with this:
.comment-content a:after, .entry-content a:after, .comment-respond a:after, .site-footer a:after {
display:none;
}
Do keep in mind that for accessibility reasons you should probably keep an underline of some sort, but this :after seems rather odd, not sure why they didn't just go with text-decoration:underline instead.
Active property is not working in Firefox; I used this code:
#selec:active{background-color:red;}
The property works in Chrome, but not working in Firefox.
Let me assume that you have really understood what :active means in CSS. It applies style right at the moment when you are clicking. So it those styles wont last long if the page refreshes.
Even though it is not much big deal, there is an order to style these if you applying :hover :link and :visited.
Please check whether you followed them
a:link { /* Essentially means a[href], or that the link actually goes somewhere */
color: blue;
}
a:visited {
color: purple;
}
a:hover {
color: green;
}
a:active {
color: red;
}
I am trying to change the color of a link. It is defaulted to blue and I want to override it. I did the following:
#site-links a:link{color:red;}
and in Chrome's Inspect Element that was the style which overrode all other styles. However, the link remained blue. In Firefox, however, the link is now red.
How can I fix this?
:link targets specifically a link you have not visited. I'm going to go ahead and assume that in chrome you have visited it. You can fix it by targeting each case as you need it:
a:link { color: red; } /* unvisited link */
a:visited { color: blue; } /* visited link */
a:hover { color: green; } /* mouse over link */
a:active { color: yellow; } /* selected link */
One way to give higher priority to your rule is stating important in it.
a:link { color: red ! important }
Also, when in Chrome inspector , to better control what is happening, you can force the state of the inspected element
When in the element inspector, go to the top of the "styles" bar in the right pane. There is an option that states:
"toggle element state"
There you can check / uncheck the :visited status
I am trying to make a menu working as tabs. The tabs themselves are working fine and the menu links are great aswell.. But I'd like to remove the buttom border of the active tab, to make it look like you're on that actual page. I've tried using #id a:active but it seems to work only as long as I press the link. I've had the though about doing it by javascript aswell, but I can't seem to figure out a way to do it. Here's my css for active.
CSS: (please let me know if you'll need more of my css)
#navigation a:active {
color: #000;
background: -webkit-gradient(linear, left top, left bottom, from(#DFE7FA), to(#FFF));
border-bottom-width:0px;
}
Thanks,
/Pyracell
Add and remove a class when you select a tab link..
#navigation .active {
color: #000;
background: -webkit-gradient(linear, left top, left bottom, from(#DFE7FA), to(#FFF));
border-bottom-width:0px;
}
and use the script (jQuery version)
$(function(){
$('#navigation a').click(function(){
$('#navigation .active').removeClass('active'); // remove the class from the currently selected
$(this).addClass('active'); // add the class to the newly clicked link
});
});
From your demo link in the comments on another answer, JavaScript will not be of any help, it should be done in your PHP code.
Something in the lines of:
<a <?php if (this_tab_is_selected){ ?>class='active' <?php } ?>href='LINK_TO_TAB' >
TAB_NAME
</a>
Mentioning that changing tabs is redirecting to another page could have helped with better responses from the start xD
Depending on your code and how you are creating the tabs, you need to change the this_tab_is_selected to a code that returns true for the selected tab.
P.S. You still need to make the modification mentioned in the other answer in your CSS. (Which is to change #navigation a:active to #navigation a.active)
A crude way to do this with JavaScript (jQuery)
$('a[href]').each(function() {
if ($(this).attr('href') == window.location.pathname || $(this).attr('href') == window.location.href)
$(this).addClass('active');
});
How are you implementing the tabs; as multiple different HTML pages? The :active pseudo-class does indeed only apply when a link is 'active', which generally means 'being clicked on'. If you're implementing the tabs as multiple HTML pages, you'll probably want to assign a CSS class like "CurrentTab" to the tab representing the page the user is currently on, and apply your border-bottom-width:0px to that class.
the practice which is usually followed is to apply a class to your currently selected tab,e.g. class="selected" and then modify your css to target that class
#navigation a.selected
This is not how it works. The :active selector matches (as you noticed) a link that is currently getting clicked (= is active/working). What you want, is a selector for the active page. You will need to use a normal css class there, like this:
#navigation a:active, #navigation a.active {
color: #000;
background: -webkit-gradient(linear, left top, left bottom, from(#DFE7FA), to(#FFF));
border-bottom-width:0px;
}
Things like this need to be done with an if statement using code such as PHP.
For example if you click a link you get your new page, set a page variable, something like:
$page = "Home";
Then use an if statement to add or remove extra CSS classes/ids to chnage the style e.g.
if ($page == "home")
{
Home
About
}
else if ($page == "About")
{
Home
About
}
I'm a little late to the party, but I have a simple answer using css only. Give each page a unique id, give each menu item a unique id (or class in this case), style your links as you like for when you are not on the page, then style them as you want them if you are on the page. The css matches when you click on the menu item and it loads the page. So whatever page you are on, the menu item appears "active". Below I have it to where the current page menu button text changes color but you can use the visible property to show and hide images or use any css to style it. (Also in this example is css to change things on hover too.) In addition, this method allows you to write separate css for each menu button, so each menu button can do something different than the others if you wish.
#menu {
padding-top: .5em;
text-align: center;
font-family: 'Merriweather Sans';
font-size: 1.25em;
letter-spacing: 0;
font-weight: 300;
color: #003300;
}
#menu a {
text-decoration: none;
color: #003300;
}
#menu a:visited {
color: #003300;
}
#menu a:hover {
font-style: italic;
}
#home a.home,
#about a.about,
#edc a.edc,
#presentations a.presentations,
#store a.store,
#contact a.contact {
font-weight: 800;
color: #660000;
}
#home a.home:hover,
#about a.about:hover,
#edc a.edc:hover,
#presentations a.presentations:hover,
#store a.store:hover,
#contact a.contact:hover
{
font-style: normal;
}