Edit:
I solved this problem thanks to Emily and Mike below. They told me how to find out where the CSS was coming from using Firebug.
For my site, I had a link black-colored with no underline, then with an underline when hovered. I turned this link into an Amazon "Quick Linker" link, and then it turned blue with an underline.
Someone on Stack Overflow told me to add !important to the CSS, but that didn't change the link format.
Any idea how I could turn this link to black-colored with no underline and still keep it an Amazon "Quick Linker" link?
Here is the code for the link:
'<a type="amzn" category="books" class="links2">'.$row['site'].'</a>'
Here is the CSS for the link:
a.links2:link {
color: #000 !important;
text-decoration: none !important;
text-align: left !important;
margin-top: 6px !important;
margin-bottom: 2px !important;
margin-left: 2px !important;
padding: 0px !important;
font-family: Arial, Helvetica, sans-serif !important;
font-size: 12px !important;
height: 12px !important;
vertical-align:middle !important;
}
a.links2:visited {
color: #000 !important;
text-decoration: none !important;
text-align: left !important;
margin-top: 6px !important;
margin-bottom: 2px !important;
margin-left: 2px !important;
padding: 0px !important;
font-family: Arial, Helvetica, sans-serif !important;
font-size: 12px !important;
height: 12px !important;
vertical-align:middle !important;
}
a.links2:hover {
color: #000 !important;
text-decoration: underline !important;
text-align: left !important;
margin-top: 6px !important;
margin-bottom: 2px !important;
margin-left: 2px !important;
padding: 0px !important;
font-family: Arial, Helvetica, sans-serif !important;
font-size: 12px !important;
height: 12px !important;
vertical-align: middle !important;
}
a.links2:active {
color: #000 !important;
text-align: left !important;
margin-top: 6px !important;
margin-bottom: 2px !important;
margin-left: 2px !important;
padding: 0px !important;
font-family: Arial, Helvetica, sans-serif !important;
font-size: 12px !important;
height: 12px !important;
vertical-align: middle !important;
}
Is it possible that CSS is declared before the Amazon "Quick Linker"'s styles? The quick linker script could also be setting the !important declaration, which would take precedence over your own declaration. You would need to make sure your styles are set after the styles set by Amazon's script.
Related
I am using react date picker to build a custom date but I cant seem to be able to style past dates. All dates lower than the present date should have a grey background.The present date should have a past background and the future dates should all have a white background with a black border;
Code I have written to override current styles but I cant seem to figure this out
.css-gbrmys>*:not(style)~*:not(style){
margin-top: 0px !important;
}
.react-datepicker__input-container > input {
height: 42px !important;
border-radius: 8px !important;
background: #fff !important;
width: 100% !important;
border: 1px solid #E0E0E0 !important;
text-indent: 12px;
}
.react-datepicker__triangle{
display: none !important;
}
.react-datepicker__header{
border: none !important;
background-color: #fff !important;
}
.css-2v22cu{
margin-top: 13px !important;
margin-bottom: 13px !important;
}
.react-datepicker{
font-family: 'Red Hat Display', sans-serif !important;
font-size: 14px !important;
border: none !important;
border-radius: 8px !important;
box-shadow: 0px 8px 16px rgba(17, 17, 17, 0.06) !important;
}
.react-datepicker__current-month{
font-size: 18px !important;
}
.react-datepicker__day-name{
color: #9C9C9C !important;
font-size: 14px !important;
line-height: 21px !important;
}
.react-datepicker__day-names{
margin-left: 18px !important;
margin-right: 18px !important;
}
.react-datepicker__day{
background: #EEEEEE !important;
font-size: 14px !important;
line-height: 21px !important;
border-radius: 4px !important;
color: #9C9C9C !important;
}
.react-datepicker__day--selected{
background: #000000 !important;
color: white !important;
}
.react-datepicker__month {
margin-bottom: 25px !important;
margin-top: 0.4rem !important;
margin-left: 0.4rem !important;
margin-right: 0.4rem !important;
}
I wanted to apply "Enhanced user interface" to a field that helps users search through a list of schools. My CSS is not applying correctly to the dropdown in this field.
I'm using Avada theme. I added CSS to theme in Customizing Additional CSS. All classes apply to all Gravity Form fields except the enhanced one.
body .gform_wrapper .gform_body {
font-size: 20px !important;
letter-spacing: 1.5px !important;
line-height: 25px !important;
margin-bottom: 80px !important;
}
body .gform_wrapper .gform_body .gfield_label {
font-size: 18px !important;
font-weight: 400 !important;
letter-spacing: 1.5px !important;
line-height: 25px !important;
margin-top: 10px !important;
}
body .gform_wrapper .gform_body .gform_fields .gfield input[type=text]
{
border: 1px solid #ccc !important;
font-size: 20px !important;
font-weight: 500 !important;
color: #676767 !important;
letter-spacing: 1.5px !important;
line-height: 25px !important;
border-radius: 0px !important;
}
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_checkbox
{
border: 0px !important;
font-size: 20px !important;
font-weight: 400 !important;
color: #676767 !important;
letter-spacing: 1.5px !important;
line-height: 25px !important;
border-radius: 0px !important;
}
body .gform_wrapper .gform_body .gform_fields .gfield select
{
border: 1px solid #ccc !important;
font-size: 20px !important;
font-weight: 400 !important;
color: #676767 !important;
padding: 10px !important;
border-radius: 0px !important;
}
.wpf-autocomplete {
border: 1px solid #ccc !important;
font-size: 20px !important;
font-weight: 400 !important;
color: #676767 !important;
padding: 10px !important;
border-radius: 0px !important;
}
I tried creating a custom CSS class for this field and adding it to Appearance>Custom CSS of the schools field. That didn't work.
.wpf-autocomplete {
border: 1px solid #ccc !important;
font-size: 20px !important;
font-weight: 400 !important;
color: #676767 !important;
padding: 10px !important;
border-radius: 0px !important;
}
The dropdown takes on a deafult size. The search field when I click on the dropdown is the correct size, so that field is picking up the CSS.
enter image description here
Any suggestions?
I want to add the border to my button in the webpage, following is what I do.
The strange things it that the color set works, which can control the font color within the button, but the sets for the border does not work.
I have tried some solutions with highest votes, but none of them works.
.btn-general {
color: #fff;
border-color: #fff;
border-style: solid;
border-width: 2px;
border-radius: 10px;
padding: 12px 26px 12px 26px;
font-size: 16px;
font-weight: 400;
}
I tried you code, and it seems to be working fine. Are you using bootstrap or something like that? Because if you are, it can be that Bootstrap is overwriting your CSS. You can try putting !important behind your css lines to see if it works.
<style>
.btn-general {
color: #fff !important;
border-color: #fff !important;
border-style: solid !important;
border-width: 2px !important;
border-radius: 10px !important;
padding: 12px 26px 12px 26px !important;
font-size: 16px !important;
font-weight: 400 !important;
}
</style>
<button class="btn-general">
Test
</button>
I have a weird case where the caret for the twitter bootstrap select is not appearing after some customisation. I am therefore looking to restore the style for the select. These are the current styles:
#sidebar2 select {
max-width: 100%;
margin: 0px;
border: 1px solid #ccc !important;
outline: 0;
display:block;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075) !important;
border-radius: 2px !important;
width: 100% !important;
height: 32px !important;
font-weight: 500;
-webkit-appearance: none !important;
-webkit-transition: none !important;
text-transform: none;
font: inherit;
vertical-align: top;
}
Because you use -webkit-appearance: none !important, it will make the caret disappear, you can try on mozzila and see the caret still there
http://jsfiddle.net/4UA82/1/
#subscribe-submit input[type="submit"] {
text-decoration: none !important;
color: #000000 !important;
font-size: 12px !important;
padding-top: 5px !important;
padding-right: 5px !important;
padding-bottom: 5px !important;
padding-left: 5px !important;
background-color: #24890d !important;
}
#subscribe-submit input[type="submit"]:visited {
text-decoration: none !important;
color: #000000 !important;
}
#subscribe-submit input[type="submit"]:hover {
font-size: 12px;
background-color: #2b2b2b;
color: #000000 !important;
}
#subscribe-submit input[type="submit"]:active {
font-size: 12px;
background-color: #2b2b2b;
}
I am just trying to get this button to hover to the desired background color, but it is not working for some reason.
I can get it to hover if I delete the initial settings though:
#subscribe-submit input[type="submit"] {
text-decoration: none !important;
color: #000000 !important;
font-size: 12px !important;
padding-top: 5px !important;
padding-right: 5px !important;
padding-bottom: 5px !important;
padding-left: 5px !important;
background-color: #24890d !important;
}
So I am not sure what is going on.
thanks!
Remove the !important tag
#subscribe-submit input[type="submit"] {
background-color: #24890d;
}
The need to use !important on every attribute suggests that there are flaws in the way you are structuring your CSS
In #subscribe-submit input[type="submit"] Change
background-color: #24890d!important;
to
background-color: #24890d;