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?
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 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;
I am currently working with a customized jquery alert from this SITE. I am trying to achieve a gray transparent background when the alert appears but have been unsucessful. How can I get a gray transparent screen that covers the whole background behind the alertbox? Here is my EXAMPLE
CSS
<style>
#popup_container {
font-family: Arial, sans-serif;
font-size: 12px;
min-width: 300px; /* Dialog will be no smaller than this */
max-width: 600px; /* Dialog will wrap after this width */
background: #FFF;
border: solid 5px #999;
color: #000;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
#popup_title {
font-size: 14px;
font-weight: bold;
text-align: center;
line-height: 1.75em;
color: #666;
background: #CCC url(images/title.gif) top repeat-x;
border: solid 1px #FFF;
border-bottom: solid 1px #999;
cursor: default;
padding: 0em;
margin: 0em;
}
#popup_content {
background: 16px 16px no-repeat url(images/info.gif);
padding: 1em 1.75em;
margin: 0em;
}
#popup_content.alert {
background-image: url(images/info.gif);
}
#popup_content.confirm {
background-image: url(images/important.gif);
}
#popup_content.prompt {
background-image: url(images/help.gif);
}
#popup_message {
padding-left: 48px;
}
#popup_panel {
text-align: center;
margin: 1em 0em 0em 1em;
}
#popup_prompt {
margin: .5em 0em;
}
</style>
You need something like in this fiddle
The 'alertblanket' has an high z-index and overlays the entire page. Your dialog then must have a higher z-index to be on top of the 'alertblanket'
EDIT: You can set the color of that alert library simply by setting
$.alerts.overlayiOpacity = 0.5
$.alerts.overlayColor = '#AAA'
Or anything you like. See also the comments inside the .js file of jquery.alerts.js
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.