Multiple button elements radius ignored

[antonyw]

Hi. I have set up a site using the excellent Cornerstone and I think I may have found a bug.

I created multiple button elements (duplicated from the first button element). The corner radius settings are all exactly the same but the subsequent buttons are showing with square corners (border-radius: 0;).

The generated styles for these buttons use the following selectors:

#cs-content .e457-5.x-anchor, .e457-6.x-anchor, .e457-9.x-anchor

The .e457-5 element displays correctly but the other two don’t. It looks like a CSS specificity bug as the other two elements are not preceded with the #cs-content selector. This causes a cascade to the #cs-content .x-anchor selector:

#cs-content .e457-5.x-anchor (Specificity 1,2,0)
#cs-content .x-anchor (Specificity 1,1,0)
.e457-6.x-anchor (Specificity 0,2,0)
.e457-9.x-anchor (Specificity 0,2,0)

The .e457-6 and .e457-9 CSS selectors need to be promoted with the # id selector for the border-radius to be correctly applied. Is there any way I can do this in the current version of Cornerstone?

I have cleared the style cache with no effect. You can view the elements here: https://ptospeechanddrama.com/school-classes/#book_now

Please let me know if you need any further information. Cheers, Ant

[Alaa]

Hi Antony,

Indeed, you discovered a bug, thanks for letting us know. I’ve forwarded this one to our dev team for further investigation, for now, you can just assign a custom CSS class to the original button:

Then, add this CSS snippet to (Theme Options > CSS):

.custom_class.x-anchor {
    margin: 0.5em;
    border-width: 2px;
    border-style: solid;
    border-radius: 0.35em!important;
    font-size: 1em;
    background-color: rgb(255,255,255);
    box-shadow: 0em 0.15em 0.65em 0em rgba(0,0,0,0.25);
}

Thanks.