WordPress.org

Ready to get started?Download WordPress

Forums

Vantage
Change CSS for Call To Action Button (12 posts)

  1. allanlud
    Member
    Posted 4 months ago #

    Hi,

    After looking at the CSS for this, it seems it's embedded so I don't know where to change it, altering the style.css doesn't work? Can you give me some direction on this?

    I am using a child theme.

    Cheers,
    Al.

  2. Maria Antonietta Perna
    Member
    Posted 4 months ago #

    Could you please post a link to your site so I can see if there's a suitable selector to put in your child theme's stylesheet?

    As it is I don't know what to look for and how you want to change the action button.

  3. allanlud
    Member
    Posted 4 months ago #

    Thanks for the reply, here is a link to the current site - link

  4. Maria Antonietta Perna
    Member
    Posted 4 months ago #

    Hi, the CSS applied to the call to action button, which I gather is the red button saying Contact us, is:

    For the div containing the button:

    .origin-widget.origin-widget-call-to-action-simple-vantage_flat_dark .origin-widget-button {
        display: block;
        margin-top: -22px;
        position: absolute;
        right: 2em;
        top: 50%;
    }

    For the anchor tag, that is, the link itself, is:

    .origin-widget.origin-widget-button-vantage_flat-red a {
        background: -moz-linear-gradient(center bottom , #D90018 0%, #DD051A 100%) repeat scroll 0 0     rgba(0, 0, 0, 0);
        border-bottom: 2px solid #C10006;
        border-radius: 4px;
        color: #FFFDD9;
        display: inline-block;
        font-family: inherit;
        font-size: 1em;
        font-weight: 500;
        padding: 11px 45px 10px;
        text-align: center;
        text-decoration: none;
        text-shadow: 0 1px 0 #BA0001;
    }

    Depending on what you need to change, your modifications have to take place here.

  5. allanlud
    Member
    Posted 4 months ago #

    Thanks again for the reply.

    What I want to change is the colour of the red button to the same red as I am using for the rest of the site, the problem is i'm not sure what file to edit.

    In the control panel for the CTA Button, there is a list of colour options, so depending on what colour is used, the appropriate CSS is applied - to where you pointed out - but the CSS must be being pulled in from a file, which I can't find.

  6. Maria Antonietta Perna
    Member
    Posted 4 months ago #

    It looks like the theme's using an option panel, therefore the color is being applied dynamically as inline styles (not from a predefined CSS file). Do you choose the color of the button via a color picker in the admin panel?

  7. allanlud
    Member
    Posted 4 months ago #

    No, no colour picker, just a dropdown list.

    Would be nice to be able to change the colour of that button.

    Thanks for your help antonietta.

  8. Maria Antonietta Perna
    Member
    Posted 4 months ago #

    What's the name of the section in the admin panel where the dropdown is displayed? Which other options do you have in the same section?

  9. allanlud
    Member
    Posted 4 months ago #

    I have attached a screenshot of what the other options are for Button Style.

    The section where these options are is in Appearance --> Home Page

  10. Maria Antonietta Perna
    Member
    Posted 4 months ago #

    I've gone through the vantage theme and I think I've found the file where the CSS is being produced. It's ..extras/panels-lite/panels-lite.php

    However, I can't find anything related to the CTA button as you show in the screenshot. There is the possibility that the code is coming from the page builder plugin that you must be using in your site. I need to download this plugin and explore its code.

  11. allanlud
    Member
    Posted 4 months ago #

    Oh, sorry I didn't mention - I did upgrade and am using the premium version - sorry should have mentioned that.

    I'll continue looking and see if I can find where those styles are being added.

  12. Maria Antonietta Perna
    Member
    Posted 4 months ago #

    As I thought there are some preset styles in the plugin for call to action: siteorigin-panels/widgets/widgets/call-to-action. However, because the names in the dropdown are prefixed by vantage, I think these are styles added by the vantage theme in its premium version. Try the panels in the extras folder of your premium version of vantage.

Reply

You must log in to post.

About this Theme

About this Topic

Tags

No tags yet.