Different Logos on Different Pages

vividvisualsvividvisuals Registered Users Posts: 30 Big grins

Hey guys,

I'm wanting separate logos on different pages of my site. Basically, I am creating sub-brands for corporate headshots and portraits...so I'd like my homepage to have my normal logo and for the sub pages for headshots and portraits respectively to have their own logos.

So it would be like "Bangkok Headshot | Alexander Stephan Photography" but only viewable at www.alexanderstephanphotography.com/headshots

The plan is to have www.bangkokheadshots.com point to this page.

Is this possible? If so, how can I do it?

Thanks for your expertise as always!

-Alex

Comments

  • vividvisualsvividvisuals Registered Users Posts: 30 Big grins
  • Hikin' MikeHikin' Mike Registered Users Posts: 5,467 Major grins

    Yes it's possible. You will hide/show your logos on the specific pages using CSS. Can't help until the pages are visible.

  • vividvisualsvividvisuals Registered Users Posts: 30 Big grins
  • AllenAllen Registered Users Posts: 10,013 Major grins
    edited February 16, 2021

    I have a bunch of different logos/headers but I added it to the page header. Then just assigned a different background for each.

    A blank html box in header.

    Al - Just a volunteer here having fun
    My Website index | My Blog
  • Hikin' MikeHikin' Mike Registered Users Posts: 5,467 Major grins
    edited February 17, 2021

    @Allen said:
    I have a bunch of different logos/headers but I added it to the page header. Then just assigned a different background for each.

    A blank html box in header.

    Never thought about that.

    @vividvisuals - Allen's idea is much easier. All you need to do is put a blank HTML/CSS Block where you want your logos to be. All you need to do is locate the .sm-page-widget number for the blank HTML/CSS Block (https://gallery.imagesinthebackcountry.com/Smugmug-customization/Locating-Your-SmugMugs-Node-or-Widget-Number ) and substitute the .sm-page-widget-xxxxxxxx to yours. Change the logo-here for your logos. Then add this to your Theme's Custom CSS Section (https://gallery.imagesinthebackcountry.com/Smugmug-customization/Adding-CSS-to-your-SmugMug-Website ) :

    /* Logo for Headshots */
    .sm-page-node-hqdXzW .sm-page-widget-xxxxxxxx {
      background: url('logo-here') no-repeat;
      height: 72px; /* Change the logo height to match */
    }
    
    /* Logo for Portraits */
    .sm-page-node-vq5SGW .sm-page-widget-xxxxxxxx {
      background: url('logo-here') no-repeat;
      height: 72px; /* Change the logo height to match */
    }
    
  • AllenAllen Registered Users Posts: 10,013 Major grins
    edited February 16, 2021

    Here's a part of my CSS covering site wide and one of the trees.
    "parentmode" is for flow down and "node" is for single top folder page.
    Flow down does not cover starting point like top folder.
    BTW, i entered size as I have a few different size headers

    Order is important as all override ones above.
    You can flow down from any folder even within a flow down.

    Edit: added last CSS rule that shows one header image used on many different parts of my site.

    **____ ____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 */
    ____ ____ 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;
    }
    
         /* birds */
    ____ ____ birds ____ ____,
    .sm-page-node-ZKwCt .sm-page-widget-12536016,
    .sm-page-node-gF9bt .sm-page-widget-12536016, ____ videos ____,
    .sm-page-node-6Hc2F .sm-page-widget-12536016, ____ Recent Upload ____,
    .sm-page-search     .sm-page-widget-12536016, ____ search ____,
    .sm-page-node-6dSMX .sm-page-widget-12536016, ____ Public Index ____,
    .sm-page-node-J7sdG .sm-page-widget-12536016, ____ keywords ____,
    .sm-page-node-J6gc5 .sm-page-widget-12536016, ____ MyKeyword ____,
    .sm-page-parentnode-Qm7v4 .sm-page-widget-12536016,
    .sm-page-node-Qm7v4 .sm-page-widget-12536016 {
       background: url(/photos/i-TCFHsP7/1/XL/i-TCFHsP7.jpg) no-repeat; 
       height: 130px;  max-width: 1024px;
       position:relative;
       margin: 0 auto !important;
       background-size: contain !important;
    }**
    

    Now if I could figure out what page this is on. Didn't label in CSS, oops.
    .sm-page-node-ZKwCt

    Al - Just a volunteer here having fun
    My Website index | My Blog
  • vividvisualsvividvisuals Registered Users Posts: 30 Big grins

    Thank everyone for your input.

    @Mike, the links to instructions don't work unfortunately.

    So, in a nutshell just for the headshots section for the sake of clarity:
    1. I add a blank HTML/CSS section at the top of the page
    2. I add the following for the theme CSS not for the webpage itself (is that right?):
    /* Logo for Headshots /
    .sm-page-node-hqdXzW .sm-page-widget-xxxxxxxx {
    background: url('logo-here') no-repeat;
    height: 72px; /
    Change the logo height to match */
    }

    Then if I decide to add others (you already found the .sm-page-widget for Headshots and Portraits?) I would need to follow instructions on the link you provided.

    Is that right?

    Thanks again,

    -Alex

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,467 Major grins

    Yes, I already added your headshots and portrait page nodes. Yes, you can add more just follow the example.

    I fixed the links.

  • vividvisualsvividvisuals Registered Users Posts: 30 Big grins

    Hey guys, thanks again for your advice.

    So in the end I think an easier solution and one that probably works a bit better is to simply add the logo above the header text. Unfortunately, every time I put the logo above the text, it ends up going off center. I can only have it centered when the logo is below the text.

    Any easy fix here?

    Thanks,

    -Alex lex

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,467 Major grins

    You don't need all of that "hero" CSS. Your HTML is this:

    <div class="hero">
      <h1>BANGKOK<br>HEADSHOTS
        <div class="photo">
          <img src="https://photos.smugmug.com/photos/i-KMdTVV5/0/bfe17bcb/X2/i-KMdTVV5-X2.png" width="200px">
          <div></div>
        </div>
      </h1>
    </div>
    

    Change it to this:

    <div class="hero">
      <h1>BANGKOK<br>HEADSHOTS</h1>
      <div class="photo">
        <img src="https://photos.smugmug.com/photos/i-KMdTVV5/0/bfe17bcb/X2/i-KMdTVV5-X2.png" width="200px">
      </div>
    </div>
    

    Remove the .hero CSS and use this only.

    .hero {
        text-align: center;
    }
    

    Change your current h1 to this:

    h1 {
      color: #fff;
      margin: 0;
      font-size: 35px;
      font-weight: 300;
      letter-spacing: 3px;
    }
    

    If you want the logo above your text use this:

    <div class="hero">
      <div class="photo">
        <img src="https://photos.smugmug.com/photos/i-KMdTVV5/0/bfe17bcb/X2/i-KMdTVV5-X2.png" width="200px">
      </div>
      <h1>BANGKOK<br>HEADSHOTS</h1>
    </div>
    
  • vividvisualsvividvisuals Registered Users Posts: 30 Big grins

    Works like a charm. Thank you so much, Mike!

    -Alex

Sign In or Register to comment.