so I have my menu at the top and I would like the link for "Contact Us" to be white.
I've assigned it a custom class and this is what I added so far:
.cta-button {
border: 2px solid red;
border-radius: 15px;
padding: 5px;
background-color: red;
top: -6px;
color: #ffffff !important;
transition: all .3s 0s;
}
.cta-button a:link, a:visited, a:active {
padding: 0px !important;
color: #ffffff !important;
}
Here it is live:
https://kkat.mavenpromedia.com/
As you can see I added the "important" but the link is still black and pulling from the link styles in the header module itself rather than my added code for that one link.
Thank you
There are 2 issues here:
the color of the link is not set at the <li> level (where you've added the class) but at the <a> level. You need to set the property color under the selector .cta-button > a
The default color is already being set using !important (bad practice) so not only you must use !important as well but you also need to match the level of specificity . The best way to do that is to copy/paste the selector used in the template and add your custom class, like so
.et_pb_menu_0_tb_header.et_pb_menu ul li.cta-button a {
color: white !important;
}
of course you need to do the same for :active, :visited,…
Try adding color like this -
.et_pb_menu_0_tb_header.et_pb_menu ul li.cta-button a {
color: #fff !important;
}
.et_pb_menu_0_tb_header.et_pb_menu ul li.cta-button a:active,
.et_pb_menu_0_tb_header.et_pb_menu ul li.cta-button a:visited{
color: #fff !important;
}
As I can see in the website the link color given already has !important written for it. Now when we have two !important css properties mentioned for same element, then we have to check for the specificity. You can learn about specificity in CSS here : https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Another note: Using too many !important to over-ride CSS property is a bad practice.
I have two buttons on my web page which look as follows...
The button on the left has the correct style border; thin and with no rounded corners.
The button on the right, which currently has focus, does not have the correct style border. When Inspecting the element within chrome, it has the following properties...
element.style {
position: absolute;
bottom: 25px;
border: none !important;
right: 140px;
}
.btn:focus {
border-radius: 0px;
}
.btn-primary.focus, .btn-primary:focus {
color: #fff;
background-color: #286090;
}
.btn.focus, .btn:focus, .btn:hover {
text-decoration: none;
}
.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
I would have thought that applying the border: none !important css property (while the element was forced into a focus state would have worked, but apparently not.
Furthermore, even when I set the border-color to yellow while the button is focused, this effect is not applied.
How can I prevent the border from being rounded off, so that it stays square and the corners remain a 90 degree angle?
What you see as an outline.
Just add this line to the button's css:
outline: none !important;
The purpose of the outline is accessabilty, so you should think carefully about removing it. You can always change the way the border looks instead.
As for !important, if you write your css right, you shouldn't use it. Inline css (style='color: blue') supercedes classes and id styling, so in your case the !important might be redundant.
There will be a lot of suggestions to remove the outline.
Before You decide to do so, please note that it'a a really bad practice from the accesibility point of view
https://medium.com/better-programming/a11y-never-remove-the-outlines-ee4efc7a9968
Hi just wondering if anyone else is having a problem with the text-hide class not working on a mobile/tablet. Elements of it seems to be overridden by Boostrap's own CSS mainly 'color' and 'font-size' attributes. I have found if I put it in my custom CSS and give it a more specific selector name it works! In this case I am applying it to the 'navbar-brand' to use a logo as background image and hide the text.
.navbar-default .text-hide {
color: transparent;
border: 0px none;
background-color: transparent;
text-shadow: none;
font: 0px/0 a;
}
It's great that there's an inbuilt image replacement class but it's weird that it is overridden by it's own CSS.
Thanks
you may try putting an !important; in every line of your css so that it will override the bootstrap.
sample code:
color: transparent !important;
I have this code here:
echo "<u><font color='red'><br>$username</font></u>";
Firstly, as you can see, it's underlined (< u >). Second, all text is all red. Well is there anyway to leave the text ($username) red but the underline black?
There's now a new css3 property for this: text-decoration-color
So you can now have text in one color and a text-decoration underline - in a different color... without needing an extra 'wrap' element
p {
text-decoration: underline;
-webkit-text-decoration-color: red; /* safari still uses vendor prefix */
text-decoration-color: red;
}
<p>black text with red underline in one element - no wrapper elements here!</p>
Codepen
NB:
1) Browser Support is limited at the moment to Firefox and Chrome (fully supported as of V57) and Safari
2) You could also use the text-decoration shorthand property which looks like this:
<text-decoration-line> || <text-decoration-style> || <text-decoration-color>
...so using the text-decoration shorthand - the example above would simply be:
p {
text-decoration: underline red;
}
p {
text-decoration: underline red;
}
<p>black text with red underline in one element - no wrapper elements here!</p>
Update from author:
This answer is outdated since text-decoration-color is now supported by most modern browsers.
:pseudo + em
In order to accurately replicate the size, stroke width, and positioning of the native text-decoration:underline without introducing extra HTML markup, you should use a pseudo-element with em units. This allows for accurate scaling of the element and native behavior without additional markup.
CSS
a {
text-decoration: none;
display: inline-table;
}
a:after {
content: "";
border-bottom: 0.1em solid #f00;
display: table-caption;
caption-side: bottom;
position: relative;
margin-top:-0.15em;
}
By using display:table-caption and caption-side on the pseudo-element and display inline-table, we can force the browser to vertically-align both line and link accurately, even when scaled.
In this instance, we use inline-table instead of inline-block to force the pseudo to display without the need to specify height or negative values.
Examples
JSFIDDLE: https://jsfiddle.net/pohuski/8yfpjuod/8/
CODEPEN: http://codepen.io/pohuski/pen/vEzxPj | (example with scaling)
Successfully Tested On:
Internet Explorer: 8, 9, 10, 11
Firefox: 41, 40, 39, 38, 37, 36
Chrome: 45, 44, 43, 42
Safari: 8, 7, 6.2
Mobile Safari: 9.0, 8.0
Android Browser: 4.4, 2.3
Dolphin Mobile: 8, 11.4
No. The best you can do is to use a border-bottom with a different color, but that isn't really underlining.
In practice, it is possible, if you use span element instead of font:
<style>
u { color: black; }
.red { color: red }
</style>
<u><span class='red'><br>$username</span></u>
See jsfiddle. Appears to work on Chrome, Safari, Firefox, IE, Opera (tested on Win 7 with newest versions).
The code in the question should work, too, but it does not work for some reason on WebKit browsers (Chrome, Safari).
By the CSS spec: “The color(s) required for the text decoration must be derived from the 'color' property value of the element on which 'text-decoration' is set. The color of decorations must remain the same even if descendant elements have different 'color' values.”
The easiest way I've tackled this is with CSS:
<style>
.redUnderline {
color: #ff0000;
border-bottom: 1px solid #000000;
}
</style>
<span class="redUnderline">$username</span>
Also, for an actual underline, if your item is a link, this works:
<style>
a.blackUnderline {
color: #000000;
text-decoration: underline;
}
.red {
color: #ff0000;
}
</style>
<span class="red">$username</span>
You can also use the box-shadow property to simulate an underline.
Here is a fiddle.
The idea is to use two layered box shadows to position the line in the same place as an underline.
a.underline {
text-decoration: none;
box-shadow: inset 0 -4px 0 0 rgba(255, 255, 255, 1), inset 0 -5px 0 0 rgba(255, 0, 0, 1);
}
Another way that the one described by danield is to have a child container width display inline, and the tipography color you want. The parent element width the text-decoration, and the color of underline you want. Like this:
div{text-decoration:underline;color:#ff0000;display:inline-block;width:50px}
div span{color:#000;display:inline}
<div>
<span>Hover me, i can have many lines</span>
</div>
A pseudo element works best.
a, a:hover {
position: relative;
text-decoration: none;
}
a:after {
content: '';
display: block;
position: absolute;
height: 0;
top:90%;
left: 0;
right: 0;
border-bottom: solid 1px red;
}
See jsfiddle.
You don't need any extra elements, you can position it as close or far as you want from the text (border-bottom is kinda far for my liking), there aren't any extra colors that show up if your link is over a different colored background (like with the box-shadow trick), and it works in all browsers (text-decoration-color only supports Firefox as of yet).
Possible downside: The link can't be position:static, but that's probably not a problem the vast majority of the time. Just set it to relative and all is good.
You can use this CSS to "simulate" an underline:
text-decoration: none;
border-bottom: 1px solid #000;
You can wrap your <span> with a <a> and use this little JQuery plugin to color the underline.
You can modify the color by passing a parameter to the plugin.
(function ($) {
$.fn.useful = function (params) {
var aCSS = {
'color' : '#d43',
'text-decoration' : 'underline'
};
$.extend(aCSS, params);
this.wrap('<a></a>');
var element = this.closest('a');
element.css(aCSS);
return element;
};
})(jQuery);
Then you call by writing this :
$("span.name").useful({color:'red'});
$(function () {
var spanCSS = {
'color' : '#000',
'text-decoration': 'none'
};
$.fn.useful = function (params) {
var aCSS = {
'color' : '#d43',
'text-decoration' : 'underline'
};
$.extend(aCSS, params);
this.wrap('<a></a>');
this.closest('a').css(aCSS);
};
// Use example:
$("span.name").css(spanCSS).useful({color:'red'});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="container">
<div class="user important">
<span class="name">Bob</span>
-
<span class="location">Bali</span>
</div>
<div class="user">
<span class="name">Dude</span>
-
<span class="location">Los Angeles</span>
</div>
<div class="user">
<span class="name">Gérard</span>
-
<span class="location">Paris</span>
</div>
</section>
here we can create underline with color in text
<u style="text-decoration-color: red;">The color of the lines should now be red!</u>
or
The color of the lines should now be red!
<h1 style=" text-decoration:underline; text-decoration-color: red;">The color of the lines should now be red!</u>
I think the easiest way to do this is in your css, use:
text-decoration-color: red;
This will change the color of the underline without changing the color of your text. Good luck!
Best way I came across doing is like this:
HTML5:
<p>Initial Colors <a id="new-color">Different Colors</a></p>
CSS3:
p {
color: #000000;
text-decoration-line: underline;
text-decoration-color: #a11015;
}
p #new-color{
color: #a11015;
text-decoration-line: underline;
text-decoration-color: #000000;
}
Problem with border-bottom is the extra distance between the text and the line. Problem with text-decoration-color is lack of browser support. Therefore my solution is the use of a background-image with a line. This supports any markup, color(s) and style of the line. top (12px in my example) is dependent on line-height of your text.
u {
text-decoration: none;
background: transparent url(blackline.png) repeat-x 0px 12px;
}
I have a link, where I want to change the color of the text away from the color that I set for hyperlinks. My code is:
<span class="button"><%= link_to "Create new scenario", :action => "create" %></span>
And my CSS is:
a:link {
color:rgb(50%, 15%, 5%);
text-decoration:none;
}
.button {
-moz-border-radius-bottomleft:6px;
-moz-border-radius-bottomright:6px;
-moz-border-radius-topleft:6px;
-moz-border-radius-topright:6px;
background-color:rgb(93%, 93%, 93%);
border:1px solid black;
color:black !important;
line-height:1.9;
margin:0 3px 3px 0;
padding:4px 8px 4px 3px;
text-decoration:none;
}
For some reason the hyperlink text is still brown, rgb(50%, 15%, 5%).
Change your css to use the .button class and anchors with a parent css class of .button. as shown below:
.button,.button a:link {
-moz-border-radius-bottomleft:6px;
-moz-border-radius-bottomright:6px;
-moz-border-radius-topleft:6px;
-moz-border-radius-topright:6px;
background-color:rgb(93%, 93%, 93%);
border:1px solid black;
color:black !important;
line-height:1.9;
margin:0 3px 3px 0;
padding:4px 8px 4px 3px;
text-decoration:none;
}
EDIT: Keep in mind that this causes the border to repeat and makes the hyperlink show up without an underline because of text-decoration:none. The best practice in this case is to have a separate css declarations.
.button {....}
.button a:link {.....}
I think it's because of the specificity; the span (.button) is less specific to the link than the a:link so the a:link styles are being applied (correctly according to the spec: http://www.w3.org/TR/CSS2/cascade.html).
If you want to override the a:link styles for this one button (or...well, any other in the same way) add the class to the <a> tag rather than its parent element.
Though you might get away with:
.button > a:link {/* styles */}
Which should become specific since this one <a> is the descendant of the the span of class .button.
Edit:
It's worth pointing out that the '>' selector applies only to immediate descendants, so an a inside an element of class .button would be affected, however an a inside a div in turn inside an element of class .button would not be affected.
Also this selector is not supported by IE (certainly below version 7, and I don't know about version 7 -or, indeed, version 8). It might be okay to use, instead, the '*' operator:
.button * a:link {/* styles */}
bearing in mind that while this is supported -I think- in IE after version 5.x at least, it's a little broad in that it will target all as within an element of class .button, regardless of any interim elements, and will still likely be less-specific than any rule applied to a:links.
You could make a css style .button a:link {color: black;}
"! important" is not for forcing child's style. It's for the user to override styles assigned by webpage author. It has no use in your case.
The proper way to do it is:
.button {
-moz-border-radius-bottomleft:6px;
-moz-border-radius-bottomright:6px;
-moz-border-radius-topleft:6px;
-moz-border-radius-topright:6px;
background-color:rgb(93%, 93%, 93%);
border:1px solid black;
color:black;
line-height:1.9;
margin:0 3px 3px 0;
padding:4px 8px 4px 3px;
text-decoration:none;
}
.button a {
color:black;
}
Remarks:
".button > a" is a good idea but it won't work in IE6. Therefore one should use ".button a" here to be safe.
Putting ".button" and ".button a" together in one set of style will make the button border repeat itself.