new button class

Home Forums Polyclinic new button class

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #21740

    oakhillman
    Participant

    new button class

    Resolved

    Hey there! Have you noticed this support service is provided FREE of charge?
    If you like the speed and accuracy of resolutions, please consider supporting me with a small donation. Thank you

    Consider a donation →

    Oliver,

    Hope you’re well. I’m finally getting back to using the Polyclinic theme for my customer. I would like to have a new button class for buttons that are identical to a button using the “button” class except I want to change the color. Can you give me the CSS for that?

    Thanks,
    Mark

    #21742

    Oliver Juhas
    Keymaster

    Hi Mark,

    You can change the button color by adding additional color classes on your buttons. These predefined color classes are color-error, color-info, color-neutral, color-success, color-warning. You can even tweak these colors in theme options in customizer under “Colors: Accents” section.

    But if you need some custom color class, just style it to your needs and add it on your button. Here is an example of styling the color-error class:

    .color-error,
    .fl-builder-content .color-error,
    .fl-builder-content .color-error.button,
    .fl-builder-content .color-error.button:hover {
    	background-color: #aa3e0e;
    	color: #fafcfe;
    }

    Just change the code to your needs so your color class can be applied.

    Tip: Try using your web browser code inspector to determine the CSS for your theme modifications.

    Best regards,

    Oliver Juhas
    WebMan Design

    #21744

    oakhillman
    Participant

    Oliver,

    Maybe I’m not creating my buttons (for use on the homepage header) correctly. I’m using the “button” class on an A tag like this.

    <a href="#" class="button">Contact Us</a>

    Doesn’t appear that I can add a second class.

    BTW, I decided to try the free version of Beaver Builder. I’m using the Text Editor module to create some buttons in the homepage header area.

    Mark

    • This reply was modified 1 month ago by  Oliver Juhas. Reason: Formatting code
    #21746

    Oliver Juhas
    Keymaster

    Hi Mark,

    If you are using a Text Editor module, simply switch to “Text” tab of the editor to edit the HTML and add your class there:
    <a href="#" class="button my-custom-class-here">Contact Us</a>

    Best regards,

    Oliver Juhas
    WebMan Design

    #21754

    oakhillman
    Participant

    Oliver,

    Sorry to be a pest, but it’s not working for me. Here’s the HTML I’m using.

    <p style="text-align: center;"><a class="button color-warning" href="#">BUTTON</a>
    <a class="color-warning" href="#">TEXT</a></p>

    The first one is using both classes and the second one just the color-warning class to make sure it will set the color.

    Mark

    #21756

    Oliver Juhas
    Keymaster

    Hi Mark,

    Indeed. Please add a class of wm-button to your button so it becomes <a class="button wm-button color-warning" href="#">BUTTON</a>, or use this custom CSS instead:

    .fl-builder-content .color-warning.button,
    .fl-builder-content .color-warning.button:hover {
    	background-color: #eaae3e;
    	color: #3a3c3e;
    	background-color: var(--color_warning_background);
    	color: var(--color_warning_text);
    }

    I will fix this issue in next theme update.

    Best regards,

    Oliver Juhas
    WebMan Design

    #21757

    oakhillman
    Participant

    Oliver,

    Thanks for this. I guess it wasn’t just me. Anyhow, I simply added the wm-button class and now it works.

    Mark

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.