Home>Support>Vantage theme Masthead image change on specific page

Vantage theme Masthead image change on specific page


For a specific page I have found the css to change the background colour for the body and the masthead for that page. You have a wonderful forum lol

the masthead logo was built with a specific background colour in place so obviously it stands out on this page.

I am therefore wishing to create a logo with the colours of the specific page colours in mind and therefore us it on that page only.

Is it possible to do that i.e. swop the image and what would the custom css be to do it?

I also need to do it for the Max Mega menu but I will search their forum.

Please keep up the great support.

Simos UK

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 3 months, 4 days ago Andrew Misplon Hi, I Work Here

    Hi Simo

    Thanks for posting.

    I believe we’ve looked at doing something similar for our Corp theme: Page: Advanced Customizations. Unfortunately, I don’t have a snippet for Vantage ready to go. I also searched to try to find one for you now. This is something we could write for you within our premium support scope. I’d love to help out here on the forum with a change like this. Unfortunately, I’m unable to at the moment with the resources we have available. Sorry I don’t have better news.

  2. 3 months, 2 days ago Simo

    Hi Andrew,

    I am sorry for the slow reply but something else took over my life for a couple of days.

    I understand your limits and am grateful for all your support.

    You take care and lets see what the future brings.

    Talk soon I am sure.

    Simos (UK)

  3. 3 months, 2 days ago Andrew Misplon Hi, I Work Here

    Thanks for your understanding, it’s most appreciated.

    Chat soon, cheers :)

  4. 3 months, 2 days ago Simo

    Hi Andrew,

    Just to let you know I have found some of your old conversations on other persons looking to do a similar thing.

    I took that approach to just remove the masthead but the code included below didn’t work?
    /* Remove Navigation */
    .page-id-1629 .main-navigation { display: none !important; }

    /* Remove Footer */
    .page-id-1629 #colophon { display: none !important; }
    /*remove masthead from blog page */
    .postid-1901 header#masthead {
    display: none !important;
    /*Hide Blog page menu*/
    .page-id-1901 .main-navigation {
    display: none !important;}

    /**hide blog page footer*/
    .page-id-1901 #colophon { display: none !important; }
    Found another conversation that you and Greg had (https://siteorigin.com/thread/different-masthead-images-background-images/)
    the plugin is about 3 updates untested therefore I therefore went with changing the background colour to test page-id etc and the code below worked:

    /* change masthead background color for a specific page*/
    .page-id-1901 #main {
    background: #ffffff
    .page-id-1901 #masthead {
    background-color: #ffffff
    /*change background for bloger page*/
    .page-id-1901 header#masthead {
    background-image: url(“http://xxxxxxxxxxxx.jpg”);
    Not sure if updates had stopped the initial solutions working but for the moment I am going with this approach unless you spot errors. LOL

    Anyway many thanks for your work and hope the above helps others.


  5. 3 months, 2 days ago Andrew Misplon Hi, I Work Here

    Hi Simos

    Did you adjust the body class to match the page/s you wanted to do this on?

  6. 3 months, 2 days ago Simo

    Hi Andrew,

    Yes the .page-id is 1901

    You will see it was used in the code that worked and I did change it in the ones that did not.

    If you want I am happy to re-type the non-working code and double check the page-id is 1901.


  7. 3 months, 2 days ago Andrew Misplon Hi, I Work Here

    Thanks for the update.

    Our free support scope is a lot more focussed compared to the period when those replies were written. This has been necessary to remain viable.

    The CSS you’ve listed above should be functional. Try checking for errors that might be breaking the styles below it. Try moving the rules not working to the top of the custom CSS field, that’s one way to test for rules above them breaking the rest of the custom CSS. If you’re up for it you could learn how to use the browser’s developer tool to inspect the markup and see what’s taking effect.

    Unfortunately, I can’t assist further with customizations. If you’d like quick email assistance on topics like this, please consider a SiteOrigin Premium license. Thanks.

  8. 3 months, 1 day ago Simo

    Hi Andrew,

    As mentioned in previous threads understand and agree with your limitations.

    If I can make a business out of my skills I will definitely be going premium but probably will do anyway because of other ideas.

    As ever many thanks for the great support; which never seems to be limited.


  9. 3 months, 1 day ago Andrew Misplon Hi, I Work Here

    Thanks for your understanding, it’s most appreciated :)

    Hopefully, you can locate the problem with the Custom CSS.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More