Header question

hamasinhamasin Registered Users Posts: 103 Major grins
edited March 4, 2014 in SmugMug Customization
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.

Comments

  • DanCarl97DanCarl97 Registered Users Posts: 139 Major grins
    edited February 18, 2014
    It may be possible by using this CSS:
    .sm-page-layout-region.sm-page-layout-region-header {
    display:none;
    }
    
  • hamasinhamasin Registered Users Posts: 103 Major grins
    edited February 18, 2014
    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!
  • DanCarl97DanCarl97 Registered Users Posts: 139 Major grins
    edited February 18, 2014
    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;
    }
    
  • hamasinhamasin Registered Users Posts: 103 Major grins
    edited February 18, 2014
    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!!
  • DanCarl97DanCarl97 Registered Users Posts: 139 Major grins
    edited February 18, 2014
    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.
  • hamasinhamasin Registered Users Posts: 103 Major grins
    edited February 18, 2014
    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.
  • AllenAllen Registered Users Posts: 10,008 Major grins
    edited February 18, 2014
    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;}
    
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • hamasinhamasin Registered Users Posts: 103 Major grins
    edited February 18, 2014
    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.
  • AllenAllen Registered Users Posts: 10,008 Major grins
    edited February 18, 2014
    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.
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • hamasinhamasin Registered Users Posts: 103 Major grins
    edited February 19, 2014
    Thank you.
    I understand the node on Chrome. But how can I find out the widget id?
  • DanCarl97DanCarl97 Registered Users Posts: 139 Major grins
    edited February 19, 2014
    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).
  • hamasinhamasin Registered Users Posts: 103 Major grins
    edited February 19, 2014
    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
    page1-X3.jpg

    Wedding site only put the given logo
    page2-X3.jpg

    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.
  • DanCarl97DanCarl97 Registered Users Posts: 139 Major grins
    edited February 19, 2014
    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
    page1-X3.jpg

    Wedding site only put the given logo
    page2-X3.jpg

    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}
    
  • AllenAllen Registered Users Posts: 10,008 Major grins
    edited February 19, 2014
    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.
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • hamasinhamasin Registered Users Posts: 103 Major grins
    edited February 19, 2014
    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.
  • AllenAllen Registered Users Posts: 10,008 Major grins
    edited February 19, 2014
    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?
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • hamasinhamasin Registered Users Posts: 103 Major grins
    edited February 19, 2014
    Thank you for your help.
    It should be a logo.

    thank you.
  • hamasinhamasin Registered Users Posts: 103 Major grins
    edited March 2, 2014
    I have being withing.
    Guess, I have to change my mind to replace header on that given page.
  • AllenAllen Registered Users Posts: 10,008 Major grins
    edited March 2, 2014
    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;
    }
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • hamasinhamasin Registered Users Posts: 103 Major grins
    edited March 4, 2014
    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?
  • MonetvilleMonetville Registered Users Posts: 4 Big grins
    edited May 13, 2021
    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' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    @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'.

  • MonetvilleMonetville Registered Users Posts: 4 Big grins
    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' MikeHikin' Mike Registered Users Posts: 5,448 Major grins
  • MonetvilleMonetville Registered Users Posts: 4 Big grins
    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' MikeHikin' Mike Registered Users Posts: 5,448 Major grins
    edited May 14, 2021

    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.

  • MonetvilleMonetville Registered Users Posts: 4 Big grins
    Right Javascript. Thanks for clearing that up for me.
Sign In or Register to comment.