This is a problem that I've been having for quite some time now. For some reason, the CSS rules for my links aren't working properly. As far as I can tell, when using Chrome's Inspect Element tools or FireBug, the links appear to be styled correctly, but are displayed improperly. I've added separate classes to make separate styles of links, and even tried separating a:visited, and this fixed the basic issue for each class, but the normal a tag still displays visited links the wrong color. the CSS for my links has been below.
a:link, a:hover, a:active
{
text-decoration: none;
color: #FF8C00;
background-color: transparent;
}
a:visited
{
text-decoration: none;
color: #FF8C00;
background-color: transparent !important;
}
a.search:link, a.search:visited, a.search:hover, a.search:active
{
font-family: helvetica-light;
font-size: 19px;
color: #999;
text-decoration: none;
background-color: transparent;
}
a.nav:link, a.nav:visited, a.nav:active, a.nav:hover
{
text-decoration: none;
color: #E3E3E3;
font-family: helvetica-light;
font-size: 20px;
background-color: transparent;
}
For some reason, even though a:link/etc have "color: #FF8C00" they show up as black or dark gray when visited. Active, link and hover all work normally. All HTML is written as stuff
Have you tried changing;
color: #999;
Into;
color: #999 !important;
This will tell the CSS parser to overwrite the #FF8C00 color to #999.
Changing the order of the CSS blocks could also give you the expected result.
Sometimes getting the look you want might require some trial and error. :)
A couple of things you could try
clear your browser cache
Make sure no other css files are been called
Go to w3c html validation site
I finally found the solution to my own problem. I had initially copied elements of my CSS from an older project I was working on. Somehow, an "a:visted" declaration had ended up inline with an ID declaration and didn't break the CSS, but caused the links to not appear properly.
Related
I want to modify the color and the border in a Bootstrap nav bar but when I write this on my SCSS nothing happens:
.nav-link.active {
color: #495057;
background-color: chartreuse;
border-color: black;
}
When I inspect the element in Chrome my code is dismissed, It only takes into account the Bootstrap default style.
Image
Any help will be welcomed.
Thanks.
For a CSS rule to be overriden, you have a lot of options. The cleanest would be to be more specific (by at least one rule) than the one you want to override.
If I follow your example:
.nav-tabs li.nav-link.active {
color: #495057;
background-color: chartreuse;
border-color: black;
}
You'll find more informations here : https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Recent Posts Widget Extended (RPWE) generates the post title as a link. On one particular page I'd like to disable the link around the title text. No class is generated by the widget for the link but there's a rel, which should be specific enough. I've added the following CSS:
a[rel="bookmark"] {
pointer-events: none;
cursor: default;
text-decoration-line: none !important;
font-size: 18px;
color: #000000;
}
Everything worked except removing the underline. It looks like I'm not being specific enough?
To remove underline you can use
text-decoration: none!important;
if still doesn't work for a element could be the text-decoration is applied at a child you could try:
a[rel="bookmark"] *{
text-decoration: none!important;
}
If doesn't work means there is another rule with !important and you have to use the browser debugger tool.
Use the debugger tool in your browser to find why text-decoration:none; is being overridden. Usually there's a more specific selector being used. However in this case a wordpress style sheet was also using a border under all links:
box-shadow: 0 1px 0 0 currentColor;
and this needed disabling too by selecting the link and styling with
box-shadow: none;
I've added some custom CSS code to a Wordpress.com theme to alter link formatting. (I'm a beginner, but I attempted to research this and found some code that looked reasonable.)
Chrome is getting it about 90% right and FF about 10% right. Is this inevitable and I should revert to theme defaults, or is there something I can do differently to make this change work in common browsers?
To be more specific, "border: none" is working in both browsers, but the custom color for the link is usually missing in FF--which means no one but me can tell it's a link. Even in Chrome it's only usually the right color. And, the color I set for "active" isn't displaying at all. Meanwhile, the block quote change is rendering in both browsers.
All I added was this CSS (added in the edit window they provide which by definition means it's at the end of the total CSS for the page, so that should make it override or inherit, I thought).
div.entry-content a:link {
color: #2C60BA;
text-decoration: none;
border: none;
}
div.entry-content a:active {
color: #3A93BC;
text-decoration: none;
border: none;
}
blockquote {
float: none;
width: 24em;
margin-left: 2em;
}
Thanks for any comments.
Have you tried to remove the :link, and just have:
div.entry-content a {
color: #2C60BA;
text-decoration: none;
border: none;
}
Also, just in case your theme has overrides for visited links, you might also want to include a rule for visited as well to be sure:
div.entry-content a, div.entry-content a:visited{
color: #2C60BA;
text-decoration: none;
border: none;
}
Bryant provided the key insight in his first answer and my problem, after further experimenting, is now fully solved (see commments). I'm new here and not sure how to mark this resolved, but am guessing this is how to do it. Thanks again.
I'm having a CSS issue that only occurs in Safari and Chrome. I have a set of styles for links in the content of a site that I'm working on. Visited links should appear a different colour and with a dotted bottom border. In Safari and Chrome the visited links lack the bottom border though, although all other styles are applied. Does anyone know of a bug in the webkit engine that causes this or have I made some stupid mistake? Code below:
#content a:link {
color: #b32951;
text-decoration: none;
}
#content a:visited {
color: #353535;
border-bottom: 1px dotted;
text-decoration: none;
}
#content a:hover, #content a:active {
color: #b32951;
background: #E6B5AF;
}
This is not a bug, it's a feature. It was possible for a site to sniff the browser history through :visited-styles. You will only be able to style :visited in a way that doesn't affect the metrics of the link, which adding a border would. The same feature is coming to Fx4. (Source, MDC)
Try giving the border-bottom a color:
border-bottom: 1px dotted #000;
I'm using Disqus external comment system with Wordpress (as a WP plugin) and I'm trying to customize it with my custom CSS.
Everything works great, but I have problems with replacing the default text color in the form textarea.
I tried it with:
#dsq-content .dsq-textarea .dsq-textarea-wrapper, #dsq-content .dsq-input-wrapper { color: red !important }
but I was not successful, even when I targetet just "textarea" it not worked.
It seems that javascript is playing together because there are 2 events: when the textarea is focused and blurred. When there is a "blur" then .placeholder-grey CSS class is added to the textarea, but targeting that with CSS not worked as well.
Disqus has very poor documentation, so I figured out all this with code inspection.
Any ideas would be really appreciated.
P.S. I don't have a working example online, you can see it on any blog/website where Disqus is used, for example on their own blog at: http://blog.disqus.com/post/974280725/achievement-unlocked-merging-profiles#disqus_thread
Depending on how the theme is laid out, Disqus may inherit a different text color which may be the same as the background. You can change it using the following override:
#dsq-content { color: #ffffff !important; }
If the text color still does not change, you will need to target comments more directly. This can be done with the following CSS:
.dsq-full-comment { color: #ffffff !important; } /*for Narcissus theme users*/
.dsq-comment-body { color: #ffffff !important; } /*for Houdini theme users*/
If you didn't solve it yet I found a solution that worked for me. Just a bit after the body{} tag in the style sheet of wordpress, you will find the ul{} in there change the color:#FFFFFF to color:#000000 (or what ever color you like). It worked for me and I hope it will work for you to.
body{
text-decoration: none;
background-color: #000000;
}
a:hover{
color: #FFFFFF;
}
a {
color: #CCCCCC;
text-decoration: none;
font-size: 14px;
}
li {
padding: 10px 10px 0px 10px;
}
ul {
list-style:none;
>>> color: #000000;
margin-left: 25px;
}
The site you link to has a css style block just before the textarea, if you edit this to add color: #f90; it'll change the color from the usual black to orange (in this example). Presumably you could also add this in the head of the document instead.
If you use something like Chrome's developer tools or, I imagine, Firebug for Firefox you can edit the html/css in place to see the effect live (although it won't persist) to see what changes you can, or need to, make.
The website you weblink to has a css design prevent just before the textarea, if you modify this to add color: #f90; it'll modify along with from the regular dark to lemon (in this example). Presumably you could also add this in the go of the papers instead.
Spybubble Free