Change header colour & transparency using CSS

This topic contains 1 reply, has 2 voices, and was last updated by  Andrew Misplon 1 week, 6 days ago.

Tagged: 

  • Author
    Posts
  • #10870

    capole
    Participant

    Hi,

    I would like to know how to change the header colour and transparency using CSS. I would like the homepage to view similar to the below

    Home

    Thank you – George

    #10872

    Andrew Misplon
    Keymaster

    Hi George

    You could try something like this inserted into Customize > Additional CSS:

    .page-id-2 .site-header {
        background:rgba(0,128,0,.8);
    }
    
    .page-id-2 .site-content {
    	margin-top: -112px;
    }

    2 in both rules needs to be changed to the page ID you’re targetting. To find a page id, go to Pages, edit the page and check the URL, the ID number is in the URL.

    The background color is background:rgba(0,128,0,.8);
    0, 128, 0 is the RGB value for the color.
    0.8 is the opacity.
    Both should be changed to suit your design.

    When editing the page you can use the Page Settings meta box in the right column to remove the page title and other page-related design tasks.

    Hope that helps 🙂

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

You must be logged in to reply to this topic.

Scroll to top