Smaller promo area and button colour change

Home Forums Automattic Small Business Smaller promo area and button colour change

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #164256 Resolve

    Jianjun
    Member

    Is it possible to make the Promo Area smaller (adjust height or maybe the white space) and change the colour of the button individually?

    Thank you!

    The blog I need help with is jianjunzhang.wordpress.com
    #164257

    Jianjun
    Member

    By the way, I just found the Promo Area button disappeared when viewed via Chrome. It displays in the editing mode, but disappeared on ‘live’ site. Could you help me please? Thanks.

    #164258

    Jianjun
    Member

    The button issue is resolved for now after I add link url. Can I ask how to add <p> element to the text of Promo Area please? Thank you.

    #164259

    Kathryn P.
    Happiness Engineer

    Hi there! It’s not possible to add HTML – such as paragraph tags – within the promo area. I will pass along the suggestion to our developers to see if it’s something that might be added as an enhancement to the theme in the future. If the suggestion is implemented, we will let you know.

    change the colour of the button individually?

    To change the colour of the button, try this custom CSS:

    /* Change background and text colour of promo-area call-to-action button */
    
    /* Default/visited colour */
    .hero-area .button,
    .hero-area .button:visited {
        background-color: #bb00bb;
        color: #fff;
    }
    /* Hover/focus colour */
    .hero-area .button:hover,
    .hero-area .button:focus {
        background-color: #000000;
        color: #fff;
    }

    To reduce the height of the hero area, try this:

    @media screen and ( min-width: 1000px ) {
      .hero-area {
        height: 35vw;
      }
    }

    Let me know how it goes.

    #164261

    Jianjun
    Member

    They work perfectly fine. Thank you Kathryn! May I ask how I can change the button colour on contact form please? Thank you.

    #164262

    Kathryn P.
    Happiness Engineer

    Glad that did the trick!

    May I ask how I can change the button colour on contact form please?

    Sure – instead of the button code I gave you earlier, try this, which should apply to most buttons that appear throughout your site, including the submit button on the contact form.

    /* Change background and text colour of all buttons */
    
    /* Default/visited colour */
    .hero-area .button,
    button, .button, 
    input[type="button"], 
    input[type="reset"], 
    input[type="submit"],
    .hero-area .button:visited,
    button:visited, .button:visited, 
    input[type="button"]:visited, 
    input[type="reset"]:visited, 
    input[type="submit"]:visited {
        background-color: #207BB9;
        color: #fff;
    }
    /* Hover/focus colour */
    .hero-area .button:hover,
    button:hover, .button:hover, 
    input[type="button"]:hover, 
    input[type="reset"]:hover, 
    input[type="submit"]:hover,
    .hero-area .button:focus,
    button:focus, .button:focus, 
    input[type="button"]:focus, 
    input[type="reset"]:focus, 
    input[type="submit"]:focus {
        background-color: #000;
        color: #fff;
    }
    #164268

    Jianjun
    Member

    You are superb Kathryn! It works. Thank you for your prompt reply and help.

    #164269

    Kathryn P.
    Happiness Engineer

    My pleasure!

    I’ll mark this thread as resolved but feel free to start a new one if you need help with anything else. You are also entitled to live-chat and direct support, accessible here:

    https://wordpress.com/help/contact

    #164271

    Kathryn P.
    Happiness Engineer

    Oh, one more thing!

    Can I ask how to add <p> element to the text of Promo Area please?

    You can add two paragraphs to the Promo Area by using some HTML paragraph tags, like this:

    <p>This is the first paragraph.</p>
    
    <p>This is the second paragraph.</p>

    This was actually working before, but there was a bug that meant it wasn’t previewing correctly in the Customizer. That should be fixed up now – just let me know if you have any trouble with it!

    #164273

    Jianjun
    Member

    Hi Kathryn,

    This solves my Promote Area problem. Thank you again for your help. I’ll post again or use the live chat if I have more questions.

    Cheers!
    Jianjun

    #164296

    Kathryn P.
    Happiness Engineer

    Jianjun – glad you’re set for now!

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

You must be logged in to reply to this topic.