Button colour and close button

  • Resolved demonboy

    (@demonboy)


    3 years, 8 months ago

    Hi,

    I think I’ve already said I love this plugin, so thanks for that. I have created a slide-in, which is now working properly. However, there are two design elements I’d appreciate some assistance with.

    1. My form on this page has a black submit button. I’d like to change this colour. Can this be done within the Appearance section or do I just use CSS? Is this defined by the colour palette (grey slate)?

    2. The close X button in the top-right is difficult to see and many of my site visitors are older and not as canny as the younsters. Can I add in a ‘close this form’ button or highlight the square that the X sits in?

    Thanks in advance for your help.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Support Jair – WPMU DEV Support

    (@wpmudevsupport15)

    3 years, 8 months ago

    Hi @demonboy,

    I hope you are doing well today!

    1- If you have used one of the templated you will see Appearance->Colors->Custom->Call to Action – Button then you can setup there.

    2- You can use the following CSS on custom CSS section 

    span.hustle-icon-close:after {
    content: "CLOSE THIS FORM";
    width: 150px;
    position: absolute;
    right: 10px;
    top: 10px;
}

    Kind regards,
    Zafer

    Thread Starter demonboy

    (@demonboy)

    3 years, 8 months ago

    Hi Zafer,

    I’m well, thanks. Under Appearance->Colors->Custom-> there is no call to action button option. I can see:

    Main Layout
    Layout Content
    Layout Footer
    Featured Image
    Content Wrapper
    Title
    Subtitle
    Main Content
    Close Button

    Regarding the CSS you supplied, I have added it (you can see it in the page source) but it does nothing. My custom CSS so far looks like this:

    .hustle-layout-form {background-color: #17a8e3};
span.hustle-icon-close:after {
    content: "CLOSE THIS FORM";
    width: 150px;
    position: absolute;
    right: 10px;
    top: 10px;
}

    Just to clarify, this ‘close form’ button is BEFORE they have filled in the form, not after.

    Any pointers?

    • This reply was modified 3 years, 8 months ago by demonboy.
    Plugin Support Patrick – WPMU DEV Support

    (@wpmudevsupport12)

    3 years, 8 months ago

    Hi @demonboy

    Since you are using the Form you need to select “OPT-IN” to find the colour options: https://monosnap.com/file/BOTsg2BK6JYKVgnzkKFkvb2mdFkN3w

    For shared CSS, the :after only means, it will add a text in the pseudo-element https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements

    https://monosnap.com/file/99HHYdoYmpSUIJsJ8ASuvug4JfZ8Jp

    I checked your source code but I don’t see the custom CSS, can you clear all caches?

    If it persists, please try this:

    .hustle-slidein.hustle_module_id_2 span.hustle-icon-close:after {
    content: "CLOSE THIS FORM";
    width: 150px;
    position: absolute;
    right: 10px;
    top: 10px;
}

    In WordPress > Appearane > Customise > Additional CSS.

    If you would like a different approach to the button feel free to let us know

    Best Regards
    Patrick Freitas

    Plugin Support Nithin – WPMU DEV Support

    (@wpmudevsupport11)

    3 years, 8 months ago

    Hi @demonboy,

    Since we haven’t heard from you for a while. I’ll mark this thread as resolved for now. Please feel free to re-open the thread if you need further assistance.

    Best Regards
    Nithin

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Button colour and close button’ is closed to new replies.