Change/replace logo on 1 page only

IlyaVishnyakov

Now this one is tricky . I want one of my webpages to have a different logo image, and this page is NOT a homepage.

So one of my pages features a splash image in the background with navigation bar and logo on top of it (header is transparent). I implemented this using the following CSS:

.sm-page {
background-image: url('https://photos.smugmug.com/photos/i-LP2Q2kg/4/X2/i-LP2Q2kg-X2.jpg');
background-repeat: no-repeat;
background-size: 100%;
}

I also changed navigation bar text on this page only using this CSS:

.sm-page-widget-nav-toplink, .yui3-menu-item .yui3-menu-label,
.sm-page-widget-nav-toplink > a {
color: white !important; }

Now the entire site uses a .PNG logo which is black (the background of the entire site is light gray). On this particular page I want the logo to be white (a different .PNG image) because the background is not light grey, it is an image and black logo just doesn't look good. However, when I change logo on this page, it changes logo on every page on the website since the header is specified on "Entire site" page.

I thought maybe it is possible to replace logo on this page using CSS? There are examples online but I couldn't get them to work. The only other way I see is to remove header from entire site completely and add logo + navigation bar on each page separately. Obviously it is a lot of work and I'd rather replace the logo image using CSS or abandon the idea entirely.

You can see the attached screenshots to understand what I am talking about. I want to go from black logo to white on this particular page only. I currently removed all custom CSS from this page.

Allen

For me to change something in the header because it is "entire site" only, I had to change the widget
background image. I used this method to show a different banner/logo for areas of my site.

I added a single photo widget at the top in the header. I left the widget blank, no photo.
Here's an example of a category/newSmug folder I changed. First I added a background for the
site wide widget. Then, after that in CSS, changed the widget background for the unique page
and applied flow down to children.

    /* homepage and flows down, parentnode, to entire site */
.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 and flows down, parentnode, to all children */
.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;
}

IlyaVishnyakov

Allen wrote: »

For me to change something in the header because it is "entire site" only, I had to change the widget
background image. I used this method to show a different banner/logo for areas of my site.

I added a single photo widget at the top in the header. I left the widget blank, no photo.
Here's an example of a category/newSmug folder I changed. First I added a background for the
site wide widget. Then, after that in CSS, changed the widget background for the unique page
and applied flow down to children.

    /* homepage and flows down, parentnode, to entire site */
.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 and flows down, parentnode, to all children */
.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;
}

Thank you so much for the quick reply! While I did not use your solution you did provide me a nice hint.

Instead of a logo content block I will use the following HTML on "Entire site":

<center><img class="banner" src="https://photos.smugmug.com/photos/i-KXcGt8W/4/128x128/i-KXcGt8W-128x128.png&quot; style="width:128px;height:128px;"></center>

I will then place the following CSS on the one page I was talking about to replace the logo:

.banner {
display: block;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: url(https://photos.smugmug.com/photos/i-NNhrhnJ/0/Th/i-NNhrhnJ-Th.png) no-repeat;
background-size: 128px; 128px;
width: 128px; /* Width of new image */
height: 128px; /* Height of new image */
padding-left: 128px; /* Equal to width of new image */
}

mikblik

This is great! I have been looking for the past two days how to do this exact thing. I used Ilya's last suggestion and it worked great! Except I need to go one step further.

Besides having a different logo for a specific page or gallery, I also need to have a different set of top (main) menus for that one place. Would you tell me how I can swipe menus for one page/gallery?

Thanks!
Mihael

IlyaVishnyakov

mikblik wrote: »

This is great! I have been looking for the past two days how to do this exact thing. I used Ilya's last suggestion and it worked great! Except I need to go one step further.

Besides having a different logo for a specific page or gallery, I also need to have a different set of top (main) menus for that one place. Would you tell me how I can swipe menus for one page/gallery?

Thanks!
Mihael

BTW, if you want to make logo (banner) clickable, you can use the following html code to make it a link to homepage:

<center><a href="/"><img class="banner" src="https://photos.smugmug.com/photos/i-KXcGt8W/4/S/i-KXcGt8W-S.png&quot; style="width:128px;height:128px;"></center>

Regarding your question. I believe it will be easier to remove navigation bar (top menu) from "Entire site" section, then add it as a body of the page for "All galleries" and "All folders". For pages you will have to add the navigation bar manually on each page. Then you can open the gallery (folder or page) you want to have a different navigation bar, choose "Just this gallery (page, or folder" from the sidebar and customize it on this page only.

The other way is to use CSS to hide navigation bar text and replace it with another text. CSS can be used to hide text elements and place other text elements before or after the hidden text. There are some caveats:

1. Hidden text will still take up space as if it was here, albeit invisible.

2. It might mess up SEO.

3. You can only place new text BEFORE or AFTER the text hidden, not INSTEAD.

I used the following code to replace "MENU" button text on mobile devices with Russian text "Show menu" (Показать меню). Here is the CSS:

.sm-page-widget-nav-menu-expand .sm-h5 {
visibility: hidden;
}

.sm-page-widget-nav-menu-expand .sm-h5:before {
content: "\00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 ПОКАЗАТЬ МЕНЮ";
visibility: visible;
}

You can ignore the "\00a0", it is a unicode for space ( ), I had to put it to properly center the text because old invisible "Menu" still took up space. I guess you could play around with this code to try and change the navigation bar text.

mikblik

Hi Ilya,

Thanks for your reply!

I like your first idea of removing the main navigation from the Entire Site and then adding a navigation block to the body of the page separately under the homepage, all folders and all galleries. I can then make a particular folder or gallery unique and add its own menu.

When I do it, the navigation block sits below the top banner where the logo and the social icons are. I used negative top margin to move the new (body) menu into the top position. However, because of what I assume is a z-index conflict, I can see the menu but it's faded and not clickable. Do you know how and where I need to put the proper z-index or other CSS trickery to make the body menu clickable again?

Thanks!
Mihael

Hikin' Mike

mikblik wrote: »

Do you know how and where I need to put the proper z-index or other CSS trickery to make the body menu clickable again?

Thanks!
Mihael

I did a quick check at your site and I didn't see any issues. Did you fix it? If not post the url in question.

mikblik

Hi Mike,

Thanks for your reply. I still have the problem, I haven't figured out how to fix it yet.

It's a live site. I can't have a non-working menu, so I reverted back to the original menu. However, I am trying to figure out how to fix the z-index on the "body" menu so I can switch it on.

Do you have any suggestions?

Thanks,
Mihael

Hikin' Mike

Without seeing it live, I can only guess. Adding 'z-index: 1000' should take care of anything if it needs a z-index. If that makes sense.

Shima

Is this still the best way if I want to remove the logo and menu bar I have "on entire site" from a singe gallery only? This thread is 6 years old so perhaps there is a better way these days.

Allen

I have not changed a thing since i added this. All should still work.