Header question

hamasin

Hi there,
I have a question.
I have been customizing the site. Then, I want set a different header on the given page.
Is it possible ? If it's yes, how can I set it on the page only?


Please help.

Thanks in advance.

DanCarl97

It may be possible by using this CSS:

.sm-page-layout-region.sm-page-layout-region-header {
display:none;
}

hamasin

Thank you.
But if I past this code, my menu also disappears.
I this it is a little bit different....

But anyway, thank you. That's one of great idea!

DanCarl97

If you only have a logo and nav bar, this will hide the logo. If there is anything else you need hidden, you'll need to hide those content blocks too.

.sm-page-layout-region.sm-page-layout-region-header div.sm-page-widget.sm-page-widget-logo {
display:none;
}

hamasin

Wow, that's great!
Now, I completely hide the header. Then, I want put the other header, instead. Is it possible?
I already prepare png file for this.

Thank you for giving me great code!!

DanCarl97

hamasin wrote: »

Wow, that's great!
Now, I completely hide the header. Then, I want put the other header, instead. Is it possible?
I already prepare png file for this.

Thank you for giving me great code!!

Well you could add it below the header? You may be able to replace the original header if that was an image.

Perhaps if we had a link to your site, we could have more insight into possible options.

hamasin

Thank you.
Here is my link to my site
On the top left, you can see Hamada Studio. Mostly, I want to show this logo in the pages.
But one of them is for wedding site. It's under constraction, right now.
On this page, I want to show another logo on the top left, instead of company logo.
Is that possible to do that?


Thank you for your help.

Allen

I added two different banners to my site. I added two single photos to my header site wide then used
CSS to hide/show. My photos spanned across the top so your implementation will be a little different.

new photo widget hide everywhere.

.sm-page-widget-XXXXXXX {display:none}

hide original and show new for this page only

.sm-page-node-z6sNB .sm-page-widget-5027834 {display:none}
.sm-page-node-z6sNB .sm-page-widget-XXXXXXX {display:block}

BTW, I've done this with over 900 pages, folders and galleries. Takes a huge amount of CSS as
each has to be individually done.

... hundreds above this
.sm-page-node-3t5Hr .sm-page-widget-5027770, /* Bird Maps */
.sm-page-node-Qm7v4 .sm-page-widget-5027770, /* Birds */
.sm-page-node-J7sdG .sm-page-widget-5027770  /* KW pages */
  { display:block;}

... hundreds above this
.sm-page-node-3t5Hr .sm-page-widget-5028039, /* Bird Maps */
.sm-page-node-Qm7v4 .sm-page-widget-5028039, /* Birds */
.sm-page-node-J7sdG .sm-page-widget-5028039  /* KW pages */
  {display:none;}

hamasin

Hi Allen,
Thank you for your help.
By the way, I don't get it something.

.sm-page-node-z6sNB .sm-page-widget-5027834 {display:none}
.sm-page-node-z6sNB .sm-page-widget-XXXXXXX {display:block}

5027834 and XXXXXXX stand for the given pages?
For instance, in my case, I better hit the name of the pages instead?

Thank you.

Allen

hamasin wrote: »

Hi Allen,
Thank you for your help.
By the way, I don't get it something.


5027834 and XXXXXXX stand for the given pages?
For instance, in my case, I better hit the name of the pages instead?

Thank you.

Each widget you add to a page has a class name.
.sm-page-widget-5027834 is the one on your home page which should show on every page.
.sm-page-widget-XXXXXXX is the new one you'd add. Numbers not known yet so used X's

.sm-page-node-z6sNB is your specific wedding page. All pages have one of these in the
body class which you can find in the page source.

hamasin

Thank you.
I understand the node on Chrome. But how can I find out the widget id?

DanCarl97

hamasin wrote: »

Thank you.
I understand the node on Chrome. But how can I find out the widget id?

Basically, you'll need to dig into the code. You should find the second logo's widgit ID below the first so if you look for the first, then the next element after should be the logo (it should highlight the logo).

hamasin

I did change like below;

.sm-page-node-k9h9B .sm-page-widget-i-Jt7ndHL {display:none}
.sm-page-node-z6sNB .sm-page-widget-i-9p7QMcs {display:block}

Home and other pages must be like comp logo


Wedding site only put the given logo


I found that home page node is k9h9B. Then, I retype it onto first class node.
Then, I retype widget id 9p7QMcs...

But it seems not to work.... Did I do wrong? Or, the code or widget is wrong???

Sorry, bothering guys several time....

Thank you.

DanCarl97

hamasin wrote: »

I did change like below;

.sm-page-node-k9h9B .sm-page-widget-i-Jt7ndHL {display:none}
.sm-page-node-z6sNB .sm-page-widget-i-9p7QMcs {display:block}

Home and other pages must be like comp logo


Wedding site only put the given logo


I found that home page node is k9h9B. Then, I retype it onto first class node.
Then, I retype widget id 9p7QMcs...

But it seems not to work.... Did I do wrong? Or, the code or widget is wrong???

Sorry, bothering guys several time....

Thank you.

If you look at the top line in the dev tools you have open in each screenshot, I believe those are the widget IDs that should work.

If they don't help, try adding '!important' to the styles.

.sm-page-node-k9h9B .sm-page-widget-i-Jt7ndHL {display:none}
.sm-page-node-z6sNB .sm-page-widget-i-9p7QMcs {display:block}

Allen

Those are not the correct widget numbers. Using WebDev here's the ancestors of the image. Look for a number like that

• div#sm-page-widget-rd2NZQF2.sm-page-widget.sm-page-widget-logo.sm-page-widget-5027834
• div#yui_3_8_0_1_1392818293050_643.sm-page-widget-content
• div#sm-page-widget-BGBph8W8.sm-page-widget-body
• div#yui_3_8_0_1_1392818293050_651.sm-page-widget-logo-container.sm-page-widget-logo-align-left.sm-page-widget-logo-pos-left
• a#yui_3_8_0_1_1392818293050_650

You have right click protection on so can not use Firebug inspect element.


From your page source.



<div id="sm-page-widget-rd2NZQF2" class="sm-page-widget
sm-page-widget-logo sm-page-widget-5027834" data-typeid="5027834">
<div class="sm-page-widget-content"><div class="sm-page-widget-header"></div>


When you add another site wide there will be another set like this for the new image. With the two

plugged into the CSS you'll define where both show.

hamasin

Thank you guys,
I've tried these, but still doesn't work.

Allen,
I've just uncheck the light click protection on both that page and the folder including the header.
Would you define the CSS and html code for me?
the page
and the item
Thank you in advance.

Allen

hamasin wrote: »

Thank you guys,
I've tried these, but still doesn't work.

Allen,
I've just uncheck the light click protection on both that page and the folder including the header.
Would you define the CSS and html code for me?
the page
and the item
Thank you in advance.

I had managed to get the info using page source instead.
Is your header image a logo or single photo box?

hamasin

Thank you for your help.
It should be a logo.

thank you.

hamasin

I have being withing.
Guess, I have to change my mind to replace header on that given page.

Allen

hamasin wrote: »

I have being withing.
Guess, I have to change my mind to replace header on that given page.

You have a link to the new image you want to use? And also a link to the page?

This hides the current logo everywhere. I used it below playing with your about page.

.sm-page-widget-5027834 .sm-page-widget-logo-img {
background:none !important;
}

Instead of "background:none !important"
you would define your new image.
background: url(image link) no-repeat !important;

But you'd also have to add the specific page to apply this on.
It's in the body class of your page source. Every page has a different XXXXX
.sm-page-node-XXXXX

Playing with your about page (XXXXX = sfXnM) this worked. All you have to do is replace the page node and image link.

.sm-page-node-sfXnM .sm-page-widget-5027834 .sm-page-widget-logo-img {
background: url(http://www.go2amami.com/photos/i-9p7QMcs/0/320x58/i-9p7QMcs-320x58.png) no-repeat !important;
}

hamasin

Thanks Allen,
I read your thread.
What I understand was;
1. find out the page number after node-
2.copy and past each url of images
3.set the code one by one.

Is that correct?

Monetville

Just started to learn CSS for SM. Need help on how to get a Header that stays fixed in place as navigating through pages (it is never reloaded).

Hikin' Mike

@Monetville said:
Just started to learn CSS for SM. Need help on how to get a Header that stays fixed in place as navigating through pages (it is never reloaded).

No need for CSS. Go to the Customizer 'Entire Site > Layout > Pinning' and select 'Header'.

Monetville

Thank you for your response. That's works well. I noticed that the pinned Header (residing in My Entire Site section) reloads when I click to a new page. Is there a way for the Header section not to reload every time I leave my Homepage to view other pages. Here is an example (not my site) https://www.hugedomains.com/index.cfm
Your help is much appreciated.

Hikin' Mike

I don't understand. Your example looks the same on every page.

Monetville

Thanks for your patience. I guess I have a hard time explaining what I am trying to acheive. My site is at https://marccholette.smugmug.com/ (password Marc (I'll change later)). Everytime I click on a menu item, the whole site reloads including the header. I was wonderng if it is possible to have the header not reload but only what is underneath the header. By the way, your customizing tutorials are really helpful. Thanks for that. Marc

Hikin' Mike

I can see what your talking about now after I scrolled. I'm not sure how it's done, but I think there may be Javascript involved and SmugMug doesn't allow it.

Monetville

Right Javascript. Thanks for clearing that up for me.