[Paul RModerator]

Hi,

You can change the button colors using the code below.

/* default colors */
#x-content-band-1 .x-callout a.x-btn {
     color: #fff;   /* color of button text */
     border-color: #ac1100;  /* color of button border */
     background-color: #992135;  /*  color of button */
     box-shadow: 0 0.25em 0 0 #5e2154,0 4px 9px rgba(0,0,0,0.75); /* color of buttons shadow */

}

/* colors when hovered */
#x-content-band-1 .x-callout a.x-btn:hover {
    color: #fff;                   /* color of button text */
     border-color: #ac1100;        /* color of button border */
     background-color: #992135;    /*  color of button */
     box-shadow: 0 0.25em 0 0 #5e2154,0 4px 9px rgba(0,0,0,0.75);    /* color of buttons shadow */
}

Change the values to achieve your desired look.

Hope that helps

[AtahualpaSeyffertParticipant]

Thank you,
that worked, but still not in the way i wanted.

I just want to change an individual button. not all of them.

On this site:

http://heidelberger-schloss-gastronomie.de.w011aefd.kasserver.com/

there are three callout elements under the main menu. Each on of these callout-buttons should have a different look. Sometimes just parts of the message or title text.
Do i still have to change the css in the customizer? I thought i could do this with inline css. I will have to change
a lot of colors of text buttons etc. And most of the times there are multiple objects on one page that need to be differentiated. Inline css is in my head the easiest way. Is it not?

[CousettMember]

Adding a custom class to the customizer would be the easiest and then stylizing them with the appropriate selectors.

[Author]

Posts