Home>Support>Vantage footer

Vantage footer

By Garrick Erasmus, 10 years ago. Last reply by Andrew Misplon, 10 years ago.
Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].

how can i change the color of the footer and the menu bar in Vantage?

i have tried to follow your manual but its different with the theme settings

URL: http://www.mazuga.com

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

  1. 10 years, 10 months ago Marcel K.

    Hello Garrick,

    to change the color of the footer, copy and paste that into CustomCSS:

    #colophon {
background-color: #fcfcfc;
}

    Use your own hexcolor instead of #fcfcfc.

    To change the color of the menu, you can use this code (also in CustomCSS):

    .main-navigation ul {
background-color: 'fcfcfc;
}

    Use your own hexcolor, again.

    To change the color of the search-div, use:

    #search-icon #search-icon-icon {
background-color: #fcfcfc;
}

    Also change the fcfcfc to your own color.

    Hope that will help you :)

  2. 10 years, 10 months ago Garrick Erasmus

    hmm and how bout to add a background image in the footer?

  3. 10 years, 10 months ago Marcel K.

    Try it with:

    #colophon {
background-image: url(your_image-url_here);
}

    Replace the “your_image-url_here” with a url like “http://example.de/image.png”. Don’t forget the file format like “.png” or “.jpg” at the end of the url.

  4. 10 years, 10 months ago Garrick Erasmus

    marcel cant get it to work

  5. 10 years, 10 months ago Garrick Erasmus

    [
    #colophon
    background-image: url(http://www.mazuga.com/wp-content/uploads/2015/01/footer_bg.jpg);

    ]

  6. 10 years, 10 months ago Marcel K.

    Did you copy the exact thing like I wrote? Your last Post isn’t correct. You forgot the “{” and the “}”.
    If it isn’t working, try that

    #colophon {
background-image:  url(your-url-here) !important;
}

    If that won’t work, try to set the color of the footer to transparent.

  7. 10 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    Hi Garrick

    Thanks for reaching out. These are all options in Vantage Premium, if you’d like to check out that offering, please head to Appearance > Vantage Premium.

    Marcel! Thanks man, really appreciate the hand here.

    Garrick remember to use a Custom CSS plugin like Jetpack Custom CSS or Simple Custom CSS and not Appearance > Editor.

    Marcel has you all sorted here but I’m just going to paste the selectors you’ve asked about as a reference:

    /* Vantage Menu Colors */.main-navigation {background: #343538;}.main-navigation a {color: #e2e2e2;}.main-navigation ul li:hover > a {background: #00bcff;color: #FFFFFF;}/* Vantage Menu Search Icon Colors */#search-icon #search-icon-icon .vantage-icon-search {color: #d1d1d1;}#search-icon #search-icon-icon:hover {background-color: #00bcff;}/* Vantage Footer Background Color */#colophon {background: #2f3033;}/* Vantage Footer Background Image */#colophon {background-image: url("");}
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