Different Logos on Different Pages

vividvisuals

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

vividvisuals

website is www.alexanderstephanphotography.com

Hikin' Mike

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

vividvisuals

Hey Mike, here are the pages in question:
https://www.alexanderstephanphotography.com/BangkokHeadshots
https://www.alexanderstephanphotography.com/BangkokPortraits

Thanks as always for your help

Allen

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.

Hikin' Mike

@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 */
}

Allen

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

vividvisuals

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' Mike

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

I fixed the links.

vividvisuals

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' Mike

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>

vividvisuals

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

-Alex