Setting different colour backgrounds to different sections of site

webwigman

Hi I am trying to emulate the structure of my existing website on my SmugMug page. I need the header section to include my logo and navigation to have a black background and the rest of the body to be white. I would also like the footer to be a green colour. My SmugMug URL is https://andrewboscherphotography.smugmug.com/ and my main site is http://andrewboschierphotography.co.uk

Any help would be much appreciated.

Andrew.

jerryr

hi - using your web browser developer tool (example in Chrome click View - Developer - Developer Tools) you have to find the unique number of the specific widget you wish to change the background color.
Next - insert the CSS/HTML content block and add the CSS to change the background color.
Example
.sm-page-widget-18293841 {background-color: #ff0000; }

webwigman

Hi Jerry,
Thanks for the info, I have managed to change the logo container. The nav seems to be part of the general page content so if I change the background of that the whole site's background is black. Also the same applies to the footer area.

Andrew.

Hikin' Mike

@webwigman said:
Hi Jerry,
Thanks for the info, I have managed to change the logo container. The nav seems to be part of the general page content so if I change the background of that the whole site's background is black. Also the same applies to the footer area.

Andrew.

Add this to your site-wide theme's CSS:

.sm-user-ui .sm-page-widget-nav {
    background-color: #000;
    padding: 1px 0;
    }

    .sm-user-ui .sm-page-widget-nav-color-default a, 
    .sm-user-ui .sm-page-widget-nav-color-default a:visited {
        color: #fff;
        }

.sm-user-ui .sm-page-layout-region-footer {     
    background-color: #459290;  
    }

You need to remove the 5px bottom-margin in your logo container.

Also, you have no content in your footer. Once you add content, the greenish color should show.

webwigman

Thanks so much guys, I have now got the top part of the site as I want it and I am now working on the content for the footer.

webwigman

Hi Guys,
I have a small niggle in that now I have set the backgrounds I have moved the nav bar up to the top alongside the logo bar there appears to be a 1 or 2 px gap. I can't seem to get rid of it no matter how much margin I put around the elements. Also is it possible that I can set the height of these elements to match that on my website.

The CSS in the theme is:

.sm-user-ui .sm-page-widget-nav {
background-color: #000;
padding: 0 px 0;
}

.sm-user-ui .sm-page-widget-nav-color-default a, 
.sm-user-ui .sm-page-widget-nav-color-default a:hover {
    color: #5ac1d0;
    }

.sm-user-ui .sm-page-layout-region-footer {
background-color: #459290;
}

My SmugMug URL is https://andrewboscherphotography.smugmug.com/ and my main site is http://andrewboschierphotography.co.uk

Thanks for help with this.

Hikin' Mike

Remove this from your CSS:

.sm-user-ui .sm-page-content > .sm-page-layout > .sm-page-layout-region-header {
    background-color: #ffffff;
    background-color: rgba(255,255,255, 0);
    }
.sm-user-ui .sm-page-content > .sm-page-layout > .sm-page-layout-region > .sm-page-layout-region-center {
    background-color: #ffffff;
    }
.sm-user-ui .sm-page-content > .sm-page-layout > .sm-page-layout-region-footer {
    background-color: #459290;
    }
.sm-user-ui .sm-page-layout.sm-page-layout-sitetemplate .sm-page-layout > .sm-page-layout-region > .sm-page-layout-region-center {
    background-color: #f8f9fd;
    }
.sm-user-ui .sm-page-widget-nav {
    background-color: #000;
    padding: 1px 0;
    }
.sm-page-widget-logo-container {background-color: #000000; } 

    .sm-user-ui .sm-page-widget-nav-color-default a, 
    .sm-user-ui .sm-page-widget-nav-color-default a:visited {
        color: #fff;
        }

.sm-user-ui .sm-page-layout-region-footer {     
    background-color: #459290;  
    }

Replace it with this:

/**
* Top/Header Section
***************************************************/    
.sm-user-ui .sm-page-layout-row[data-layout-row="z8"] {
    background-color: #000;
    } 

/**
* Middle/Body Section
***************************************************/    
.sm-user-ui .sm-page-layout-region-body {
    background-color: #f8f9fd;
    }

/**
* Bottom/Footer Section
***************************************************/        
.sm-user-ui .sm-page-layout-region-footer {
    background-color: #459290;
    border-top: 36px solid #fff;
    }

Your logo and nav should be in the header section .sm-page-layout-region-header, but if it's working for you I guess you don't need to move it. If you were to change it, you'll need to replace .sm-user-ui .sm-page-layout-row[data-layout-row="z8"] for this .sm-user-ui .sm-page-layout-region-header.

webwigman

Thanks Mike,

How do I access this CSS?

I am looking at the Chrome developer tools but can't find those entries.

Thanks

Andrew.

webwigman

Hi again,

I have found the entries in the Firefox developer mode but do not know if this can be saved from there.

Thanks,

Andrew.

denisegoldberg

@webwigman said:
I have found the entries in the Firefox developer mode but do not know if this can be saved from there.

You will need to enter the CSS in your SmugMug site; it can't be saved from the Firefox developer tool into smug.

webwigman

Hi Denise,

Where do I access this CSS?

Hikin' Mike

@webwigman said:
Hi Denise,

Where do I access this CSS?

Customize > Content and Design > Entire Site > Theme > Active Theme (wrench). Click on that. You'll see "Edit Theme > Advanced " go to the bottom and click on CSS. Your custom CSS should be there

webwigman

Hi again,
Many thanks for the help. :-)
I have pasted content into the custom CSS box and moved the logo bar and nav bar into the header. I still have the small jog on the nav bar around a couple of pixels. Also wondering if I can add some padding to both bars as it is very tight around the logo.

Hikin' Mike

@webwigman said:
Hi again,
Many thanks for the help. :-)
I have pasted content into the custom CSS box and moved the logo bar and nav bar into the header. I still have the small jog on the nav bar around a couple of pixels. Also wondering if I can add some padding to both bars as it is very tight around the logo.

I'm not seeing the "jog" as before. You must have fixed it.

Also, your URL in your signature is wrong.