Change/replace logo on 1 page only

IlyaVishnyakovIlyaVishnyakov Registered Users Posts: 19 Big grins
edited November 21, 2016 in SmugMug Customization
Now this one is tricky :D . 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.

Comments

  • AllenAllen Registered Users Posts: 10,008 Major grins
    edited November 18, 2016
    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;
    }
    
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • IlyaVishnyakovIlyaVishnyakov Registered Users Posts: 19 Big grins
    edited November 18, 2016
    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 */
    }
  • mikblikmikblik Registered Users Posts: 3 Beginner grinner
    edited November 19, 2016
    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
  • IlyaVishnyakovIlyaVishnyakov Registered Users Posts: 19 Big grins
    edited November 21, 2016
    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.
  • mikblikmikblik Registered Users Posts: 3 Beginner grinner
    edited November 21, 2016
    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' MikeHikin' Mike Registered Users Posts: 5,448 Major grins
    edited November 21, 2016
    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.
  • mikblikmikblik Registered Users Posts: 3 Beginner grinner
    edited November 21, 2016
    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' MikeHikin' Mike Registered Users Posts: 5,448 Major grins
    edited November 21, 2016
    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.
  • ShimaShima Registered Users Posts: 2,547 Major grins

    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.

  • AllenAllen Registered Users Posts: 10,008 Major grins

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

    Al - Just a volunteer here having fun
    My Website index | My Blog
Sign In or Register to comment.