I have a problem and basically I want to do this
.buttonar {
background-color: #4CAF50; /* Green */
border: none;
color: #FFF;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;
}
.button2 {
background-color: #008CBA;
color: white;
border: 2px solid #008CBA;
}
.button2:hover {
background-color: white;
color: black;
}
<a class="buttonar button2" href="http://www.facebook.com" target="_blank" rel="alternate">button</a>
But the problem is, my website already has a template.css (Joomla website) in which styling for a, a:link, a:hover etc are already set. I want my button to appear exactly as on the code snippet output but I cannot seem to get it working as the link stays blue ((barely visible) set by template) or it only changes color when I hover over the link itself and not the button (created another class for a:link and a:hover).
Can anyone assist me please?
The 'C' in CSS stands for Cascading. This means that CSS will look at items at the top, then as it goes down the sheets, it will overwrite them.
This applies to how you put the files in your HTMl as well:
HTML
<head>
<!-- Insert Joomla CSS here -->
<!-- Insert your custom CSS here -->
</head>
This will apply the Joomla CSS first, but then your custom styles overwrite it.
On second read...
...if you're talking about just styling, the .button2 selects the element that has class="button2" in your HTML. Simply add that class in the HTML to the button you want styled and it will work.
You can inline your style in the button, and it will take precedence.
Check this.
The fix may be as simple as adding an !important to your css. This hijacks the cascading rules and should override your template.css rules.
Also, make sure that wherever you place your own css rules, place it AFTER template.css is called on your page. It may not be enough to place it anywhere in the head tags. I would first find out where template.css is being called (usually in a link tag) and place your own css with an !important marker after it.
For info on this: https://css-tricks.com/when-using-important-is-the-right-choice/
Sung
Related
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 some anchor tags that get dynamic color based upon the classes assigned to them but on focus, they get a white color cause of bootstrap overrides.
now I need to override the default bootstrap style for anchor only with this class say a.custom-label and another generic class to get the original color (before focus) on focus like this:
a.custom-label:focus {
color: unset;
color: initial;
color: revert;
color: inherit;
color: none;
}
I tried these but nothing seems to work, can someone share a way to achieve this?
a.custom-label:focus { color: #000 !important; }
You can change color you want in place of #000. Also if you don't want to use !important then add external css and call it below bootstrap css in head block.
Try putting "!important" after the color name
for examle:
a.custom-label:focus {
color: #2d2d2d !important; }
The best possible way was to remove the default bootstrap label class from my HTML elements and pick all the styles in bootstrap for .label class and paste it in my custom.css with a selector .custom-label except on focus styling like this:
.custom-label {
display: inline;
padding: .2em .6em .3em;
font-size: 75%;
font-weight: 700;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25em;
}
and using only this class for all my elements.
this gives all the default style of bootstrap but as no styling for onfocus was pasted so issue got fixed.
I've been searching for a good hour but no one seems to have had the same problem.
I am trying to change the text color of a link to grey, it is appearing blue however. I specifically want to achieve this by setting a class property of the link - I don't want custom css in the aspx file, and I don't want to set the style property of the link. (For the record I have tried both of these ways and they work).
//Site.css
.grey {
color: grey;
}
.button-link2 {
padding: 10px 15px;
background: #EFEFEF;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
-transition-duration: 0.2s;
text-decoration: none;
cursor: pointer;
}
And the link the way I would like it to work:
<a id="btnCancel" href="CMS-contentlist.aspx" class="grey button-link2">Cancel</a>
Thanks in advance!
you would either need to apply the text color to the element outside of the link or add the a attribute.
a.grey,
.grey {
...
}
Make this as important. Use only if it's necessary
//Site.css
.grey {
color: grey !important;
}
Just wanted to confirm that you have below piece:
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
Is it the spelling mistake? Try "Gray" instead of "grey"
The problem is, you might have in the same Site.css other link settings that override yours. By default, there are such style properties defined for hyperlinks. Get rid of those, or use this:
#btnCancel.grey {
color: grey;
}
This type of problem is fairly easy to solve with a DOM inspection tool like Chrome Developer Tools. In Chrome, right-click on the element and select "Inspect element" and in the window that pops up you will be able to see all of the possible declarations that could be overrriding your .grey class's color declaration.
And be sure you know your CSS specificity rules really well.
do not use !important, if you can avoid it.
.grey
{
color:gray;
}
This will work.
I have a style that is styling the links on the navigation bar, but it styles all other links in the website, so I defined the div "menubar" as the selector infront of the link and visited selectors but it still styles all links in the website. Any solutions would be greatly appreciated.
CSS:
#menubar a:link, a:visited
{
border-top-width: 1px;
display: block;
font-weight: bold;
color: #000000;
background-color: #EFF1EB;
width: 180px;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
border-style: solid;
border-color: #638529;
font-family: Arial, Helvetica, sans-serif;
border: 1px;
position: fixed;
}
Your selector is wrong, change to this one:
#menubar a:link, #menubar a:visited /* width #menubar after the comma */
Your initial selector, #menubar a:link, a:visited means: "all links in #menubar and all visited links in the entire document". The comma starts a completely new selector so you have to include the parent also in the second selector.
I think #Yotam is right.
Another idea how to debug this. I use Web Development Toolbar inside Firefox. It has plenty of tools, one is to inspect the page. Use the one to see the style ( I like the 3D View), there you can press on the html element, in your case the link. Next to the page, it lists the style sheet definitions . The order shows what is the active style. Top is active, and everyhing else is lower and overwritten.
In this case, you may see, if your button has the correct definitions you want.
On hover, my text links have underlines. This is the default in Bootstrap.
I want to keep this, unless the link is within a certain div.
The code I have tried (and several variations) doesn't work.
The HTML:
<div class="wall-entry span5">
<a href="">
<img src="http://www.placehold.it/290x163" />
<div class="wall-address">
<p>Burgundy Street</p>
<p>New Orleans, LA</p>
<p>USA</p>
</div>
</a>
</div>
My CSS:
.wall-entry {
background-color: #black;
position: relative;
img {
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
div {
position: absolute;
left: 10px;
bottom: 10px;
p {
line-height: 18px;
margin: 0;
font-family: Neuzit Heavy;
font-size: 18px;
color: white;
text-decoration: none;
}
}
}
div.wall-entry:hover img {
opacity:1;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
a div.wall-entry {text-decoration: none;}
A quick note: I have tested a {text-decoration: none;}, this does work. However, I don't want to change everything. Just the links in this specific case.
put the font-family in quotes for fonts that involve multiple words, first of all:
font-family: "Neuzit Heavy", sans-serif;
then beneath a put .wall-entry a:hover { text-decoration: none; }
You have the order switched around. The item you're targeting should be to the right. For example,
.wrapper .header a in english means "Target all anchor links that are inside of .header, that are inside of .wrapper"
The problem is actually a caused by Twitter Bootstrap's CSS file, not your code.
Twitter Bootstrap's CSS file (bootstrap.min.css was the culprit on my project) gives links underlines multiple times. It gives them an underline when they're hovered over, when they're focused on, and it even makes them blue.
In my project, I specifically assigned my own colors to the text that was inside anchor tags, and the browser rendered their colors correctly, just as I assigned them, however, since the text was wrapped in an anchor tag, the blue underline from the Twitter Bootstrap stylesheet still appeared below all my styled text.
My solution: open bootstrap.min.css (or whatever your Bootstrap stylesheet is called) and search for the term 'underline', and whenever you find 'text-decoration: underline' inside an anchor tag selector, like this:
a:hover, a:focus {
color: #2a6496;
text-decoration: underline;
}
or this:
a, a:visited {
text-decoration: underline;
}
you should go ahead and remove the color and text-decoration rules.
That solved my problem.
This won't work
a div.wall-entry {text-decoration: none;} // Inside 'a' div with class wall-entry
but this will work.
div.wall-entry a{text-decoration: none;} // Inside div with class wall-entry 'a'
because an a tag has text-decoration.
If your link is inside div tags, then you can select your link this way:
div > a:hover {
text-decoration:none;
}
It works fine, even with boostrap used.