Create a different header for each page

JDGS

Hi everyone,

I would like to add a different header to some of my pages, under the menu bar. What I've already done was to add a photo, but I would like to stretch it to occupy all the width of the page, while keeping the rest of the content at 1200px in width. But I don't know who I can do that. Does anyone know the CSS code for this?
This is what I have now: https://danielsantosphoto.com/Prints/Store
Thank you so much!

Daniel Santos
danielsantosphoto.com

Hikin' Mike

If this is just for that page, then add this to a CSS Block:

/* 
* Full Size for top photo only
****************************************/
.sm-user-ui .sm-page-layout-pagetemplate.sm-page-layout-full {max-width: 100% !important;}

.sm-user-ui .sm-page-layout-pagetemplate.sm-page-layout-full .sm-page-layout-row:nth-child(n+3) {
  margin: auto;
  max-width: 1200px !important;
}

JDGS

Thank you! It worked perfectly.

JDGS

I was just wondering if instead of having a normal photo block at the top of the page, I could have a different image for each page in the header section of the site. I would like to have the menu and logo on top of the image, something like this: https://wildist.co/product/the-photographic-style-aesthetic-workshop

Hikin' Mike

You can do that too, but more complex for people with no coding skills. You basically put all of those photos in your header. Then you will hide the ones you don't want in CSS. You will need to know the widget number and page node number. This is how you find those numbers: https://gallery.imagesinthebackcountry.com/Smugmug-customization/Locating-Your-SmugMugs-Node-or-Widget-Number

If that's over your head, then just add your photos in your header and let me know which photos go to what page and I'll take it from here.

Allen

I added one html block/widget in the header. Then for each different image/banner just changed the background for that single widget.
Here's an example of site wide and a specific folder flowing down to its children. BTW, the original widget was blank.

____ ____site wide banner ____ ____,
.sm-page-parentnode-zsB4B .sm-page-widget-12536016,
.sm-page-node-zsB4B .sm-page-widget-12536016 {
background: url(/photos/i-snFwjZ3/1/XL/i-snFwjZ3.jpg) no-repeat;
height: 154px; max-width: 1032px;
position:relative;
margin: 0 auto !important;
background-size: contain !important;
}

____ ____ archery banner ____ ____,
.sm-page-parentnode-D2dwD .sm-page-widget-12536016,
.sm-page-node-D2dwD .sm-page-widget-12536016 {
background: url(/photos/i-2r6NDBZ/1/XL/i-2r6NDBZ.jpg) no-repeat;
height: 77px; max-width: 1024px;
position:relative;
margin: 0 auto !important;
background-size: contain !important;
}

Hikin' Mike

@Allen said:
I added one html block/widget in the header. Then for each different image/banner just changed the background for that single widget.
Here's an example of site wide and a specific folder flowing down to its children. BTW, the original widget was blank.

Never thought about doing that. Less headache a CSS.

Allen

Inside the HTML box add a png image. The menu would probably have to be created from scratch.

JDGS

Thanks for the help. It looks a bit to difficult for me. I think I'll keep the easier version and I think I could do something similar to what I was looking for by removing the space between the photo and menu (red arrow) - image bellow. Page shown in the image - https://danielsantosphoto.com/Prints/Loja
Is it possible to do it with css?

Hikin' Mike

@JDGS said:
Thanks for the help. It looks a bit to difficult for me. I think I'll keep the easier version and I think I could do something similar to what I was looking for by removing the space between the photo and menu (red arrow) - image bellow. Page shown in the image - https://danielsantosphoto.com/Prints/Loja
Is it possible to do it with css?

Find this in your CSS you just added: .sm-user-ui .sm-page-layout-pagetemplate.sm-page-layout-full {max-width: 100% !important;} and add margin: 0 Important; like this:

.sm-user-ui .sm-page-layout-pagetemplate.sm-page-layout-full {
  max-width: 100% !important;
  margin: 0 !important;
}