-
Posts
-
I added this CSS code to change all buttons to gradients:
.avia-button, .button {
background: #990033;
background-image: -webkit-linear-gradient(top, #990033, #ff924d);
background-image: -moz-linear-gradient(top, #990033, #ff924d);
background-image: -ms-linear-gradient(top, #990033, #ff924d);
background-image: -o-linear-gradient(top, #990033, #ff924d);
background-image: linear-gradient(to bottom, #990033, #ff924d); !important;
-webkit-border-radius: 26;
-moz-border-radius: 26;
border-radius: 26px; !important;
font-family: Arial;
color: #ffffff;
font-size: 20px;
padding: 10px 20px 10px 20px;
text-decoration: none;
bottom: 0px;
}
You’ll notice 2 things:
1. the main blue color is still showing up there as a shadow
2. the border-radius seems to be ignored completely.How do I fix that?
Ah, you can see it live here – https://gregward.com/
Hey yifatcohen,
Thank you for the inquiry.
We adjusted the css modification a bit — please try it again:
#top .avia-button-wrap .avia-button, #top .button { background: #990033; background-image: -webkit-linear-gradient(top,#990033,#ff924d); background-image: -moz-linear-gradient(top,#990033,#ff924d); background-image: -ms-linear-gradient(top,#990033,#ff924d); background-image: -o-linear-gradient(top,#990033,#ff924d); background-image: linear-gradient(to bottom,#990033,#ff924d); -webkit-border-radius: 26px; -moz-border-radius: 26; border-radius: 26px; font-family: Arial; color: #ffffff; font-size: 20px; padding: 10px 20px 10px 20px; text-decoration: none; bottom: 0px; border-color: transparent !important; border: 0; }Best regards,
Ismaeli did not compare both css rules , but you should know:
If there are two or more CSS rules that point to the same element, the selector with the highest specificity will “win”, and its style declaration will be applied to that HTML element. Every CSS selector has a position in the specificity hierarchy.
the #top selector has a high hierarchy – so that rule wins – and even by this – the ID wins.
Unfortunately, it is becoming more and more common to set a porperty value to !important in order to enforce a css rule. In many cases, it would only be necessary to adapt the selectors better.
Hi,
Was the main difference adding the #top ?
Yes, as @Guenni007 mentioned above, we adjusted the selector a bit to make it more specific.
Best regards,
Ismael
- You must be logged in to reply to this topic.