Tutorial to Remove SM Branding, add referral & login link in New SmugMug

Soul Gaze Photography

Ferguson wrote: »

Inspired by this and assisted by Nicholas Sherlock with some CSS magic, here's an alternative that (a) suppresses the "Powered by smugmug", then (b) replaces it with a fully right justified "Smugmug - Logxxx" which (c) flips from "Logout" to "Login" depending on your current state.

The first piece of code goes in a CSS box in the footer.

.sm-page-powered-by a {
  display: None;
}

.leflogin {
  display: inline;
}

.sm-user-loggedin .leflogin {
  display: none;
}

.leflogout {
  display: none;
}

.sm-user-loggedin .leflogout {
  display: inline;
}

The second goes in an HTML box to the right side of the footer (it doesn't matter how large you make the CSS or this box so long as they are all in the same line as anything else in your footer).

<div style="text-align:right">
  Smugmug - <a class="leflogin" href="https://secure.smugmug.com/login?goTo=http://www.captivephotons.com/">Login</a><a class="leflogout" href="https://secure.smugmug.com/logout?goTo=http://www.captivephotons.com/">Logout</a>
</div>

In the above you replace the www.captivephotons.com with your own site, and the "lef" were my initials just to make things unique, name the class however you like just so they match.

Notice that the alternative CSS cause login to be "done" or "inline" based on whether logged in, and reversed for logout. The same technique can be used for any other controls you want only logged in, or out.

Thanks again to both of you.

Very cool wizardry! I had to modify the HTML code to include my SmugMug referral. It didn't show up via the code you posted.

So the code is now:

<div style="text-align:right">
<a href="https://secure.smugmug.com/signup.mg?Coupon=XfVyhOovRyp4o">Smugmug -</a> <a class="leflogin" href="https://secure.smugmug.com/login?goTo=http://www.soulgazephotography.com/">Login</a><a class="leflogout" href="https://secure.smugmug.com/logout?goTo=http://www.soulgazephotography.com/">Logout</a&gt;
</div>

IF anyone wonders, the difference between the codes: in the first version, you can create the links via the text content box. Text size can be changed easily via the content box. In the second version, you will need CSS to alter the font (text) size. The first version is just the login text. The second version will magically alternate between login or logout depending upon your current state.

Soul Gaze Photography

Cambyses wrote: »

Yes, guess this may be OK for now until we find a way to use SM Contact Form. And I managed to change the theme/logo on our WuFoo form, which is good. But, with the free account, I unfortunately cannot redirect the visitor back to our page after submitting the form.

Here's the instructions to use the SmugMug contact form with the NEW SmugMug site:
http://help.smugmug.com/customer/portal/articles/1248294
I totally forgot about the link option - I'm so sorry!

jdwl

Soul Gaze Photography wrote: »

This covers removing SmugMug branding from the header and footer, removing the 'Photo Sharing by SmugMug' and recreating a custom referral and login link. I thought this might benefit someone as it has me. I've also used the same method to add a 'return to top' function.

First, select 'customize' > 'customize site'. Then select 'settings' from the green bar at the top right.

Here you can turn off SmugMug header and footer. This of course leaves the 'Photo Sharing by SmugMug Login' link in the bottom right.

So now what? How do I remove the text?

1. Select 'entire site' view in customize (red box). When you hover on your footer, the top of the content block should go red and show 'on entire site' so you know you're in the right place.
2. Choose the 'css' content block and add it to the very bottom of your footer so it's out of your way for additional customizations. It's invisible on the live site.
3. Insert:
4. Then save the block. Now the SmugMug link is gone, but what if you want to keep the login link?
5. Just add a text content block and the word 'login' (or whatever) and link either to SmugMug's homepage or to:

What about the referral link?

To keep the text in one line, reopen the text block that has your new login link. Add SmugMug, Photo Hosting or whatever word you want and link to your referral link which looks like this: Your custom referral link can be found via 'account settings' > Stats.

So, I've added this to my text box:

SmugMug is linked to open in a new window so visitors don't leave my site. Login is not since visitors shouldn't be clicking anyway.

If you find that you can't get the text to go to the right, just play with your content block settings via the ruler icon when you hover. These settings will vary according to your content, font size and theme's size, but should give you an idea of what I mean. Basically, you want to have two content blocks, both with different size settings, side by side so you can push the other to the edge if wanted. There may be another way, but this works for me.

You can see the final results here:
http://www.soulgazephotography.smugmug.com
Good luck! I hope this was helpful!

Screenshot has been attached to this tutorial (since I am STILL customizing my footer).


Dear SmugMug, if you see this thread and freak about branding removal: Please don't block this option. Especially for business and pro users. We're paying money to deserve to be 'smug' with our websites. Most prefer to not show that they are 'hosted', but look more professional as if we are doing it all ourselves. At the least, require that we create a custom link such as I have done to lead viewers back to SmugMug either via a discreet link of our choosing or a link in the navbar, on a credits page, etc. Please?? Besides, the forced text was distracting and also didn't line up correctly with the website theme. Thanks for being awesome!

hi there, I really had a lot of troubles with this CSS stuff etc. in the legacy smugmug and was hoping it will get better with the new one....

but now i tried to remove the footer and failed again....how can I add CSS? where the f is the advanced CSS now?

richpepp

jdwl wrote: »

where is the advanced CSS now?

Seems to be two places. Either go to customise/entire site - then edit Active Site, Advanced Tab then Edit Custom CSS

or

Go to customise/entire site and drag a css block up to the top of the page and put the stuff in there. That's my preferred method in case I change the theme later (unless of course you want the css to be theme specific)

jdwl

richpepp wrote: »

Seems to be two places. Either go to customise/entire site - then edit Active Site, Advanced Tab then Edit Custom CSS

or

Go to customise/entire site and drag a css block up to the top of the page and put the stuff in there. That's my preferred method in case I change the theme later (unless of course you want the css to be theme specific)

okay, the first one I can not do. I can say customize, than customise site. I than can click on entire site (with the globe and red icon) and than? I can just choose from content, theme, layout...

the second I did... smug mug footer is not killed...

oh dear oh dear....

richpepp

jdwl wrote: »

okay, the first one I can not do. I can say customize, than customise site. I than can click on entire site (with the globe and red icon) and than? I can just choose from content, theme, layout...

My fault - I missed a step. Choose 'Theme' then click on the spanner next to 'Active Theme' which should be at the top.

I don't know why it isn't working with the other method though as all of my customisation is working there although I'm not trying to remove the footer, I'm just removing the 'buy' buttons. It should work equally with either method or at least it does on my site. Do you have the css content block right at the top of the 'entire site' so it is red when you hover over it (or when you select CSS in the list of content blocks on the entire site)

aschendel

jdwl wrote: »

okay, the first one I can not do. I can say customize, than customise site. I than can click on entire site (with the globe and red icon) and than? I can just choose from content, theme, layout...

the second I did... smug mug footer is not killed...

oh dear oh dear....

See these screenshots for clarification on where to find the Hide Header and Footer settings.








After that you can add the CSS to the Theme | Advanced | Custom CSS field:









Andy

jdwl

aschendel wrote: »

See these screenshots for clarification on where to find the Hide Header and Footer settings.








After that you can add the CSS to the Theme | Advanced | Custom CSS field:









Andy

thanks, I have already found it...but the codes does not work anyway....

the hover funktion (underline) in my navbar neither...

hmmmm....mucho work ahead....

southeasternphotography

Soul Gaze your menu drop downs - not all are
Wonderful job (Hero to be) on your New website. I see your drop down menus are working fine. However, maybe it is on your gallery page, the menu items do not drop down. Was that intentional? They seem to be drop downs everywhere else.

jdwl

jdwl wrote: »

thanks, I have already found it...but the codes does not work anyway....

the hover funktion (underline) in my navbar neither...

hmmmm....mucho work ahead....

well whatever I do, the SM footer etc. is still there...other CSS works...

aschendel

Did you turn off the footer in the global settings (post #38 in this thread I think)? After that the CSS should take care of what's left.

Andy

jdwl

aschendel wrote: »

Did you turn off the footer in the global settings (post #38 in this thread I think)? After that the CSS should take care of what's left.

Andy

i iturned it on and off and started with independent website ON and turned it off again.
now it worked, thanks!

Andy

Does anyone have the proper CSS to remove just the login link?

aschendel

Andy wrote: »

Does anyone have the proper CSS to remove just the login link?

.sm-page-powered-by A:last-child
{
   display: none;
}

Andy

aschendel wrote: »

.sm-page-powered-by A:last-child
{
   display: none;
}

Thanks!

Soul Gaze Photography

jdwl wrote: »

hi there, I really had a lot of troubles with this CSS stuff etc. in the legacy smugmug and was hoping it will get better with the new one....

but now i tried to remove the footer and failed again....how can I add CSS? where the f is the advanced CSS now?

Hello! I hope this helps:

1. For my site, I signed in to my account. Then went to 'Customize' > 'Customize Site'.
2. From there, I clicked on 'entire site' (red box) to enable that view.
3. I selected the content block 'CSS' from the 'HTML & CSS' content block menu.
4. Then I clicked and dragged the content block over to my footer.
5. From there I inputted the CSS code from the tutorial.

I choose to do it this way to ensure it would always be easy to find and cover my entire site.
Good luck! Let me know if you need better details.

Soul Gaze Photography

southeasternphotography wrote: »

Wonderful job (Hero to be) on your New website. I see your drop down menus are working fine. However, maybe it is on your gallery page, the menu items do not drop down. Was that intentional? They seem to be drop downs everywhere else.

Thank you (hopefully!!) very much! Yes, it is currently intentional. I've not completed merging both my main website and the 'new SmugMug'. I'm currently considering whether or not I will keep my drop downs, or go more minimalist. Thank you for asking - in case I'd forgotten!

Soul Gaze Photography

jdwl wrote: »

thanks, I have already found it...but the codes does not work anyway....

the hover funktion (underline) in my navbar neither...

hmmmm....mucho work ahead....

I would love to help you figure out what's wrong. Do you have the 'new SmugMug' unveiled yet or is your legacy currently live? That might make a difference.

Let me know a few things: In site settings, I have both the SmugMug header and footer 'off'. If you do, the only thing you should see related to SmugMug is the 'Photo Sharing by SmugMug Login' text link. For me, it was at the bottom right of my page. It may be different with a different theme.

1. To remove it, you will need to enter 'Customize' > 'Customize Site' and select the entire site (red box).
2. Once selected, click and drag the content block for CSS onto the bottom of the site. Click the content box once it is visible on your page. It will be red.
3. Then enter the following in the CSS box:

.sm-page-powered-by a {
display: None;
}

.leflogin {
display: inline;
}

.sm-user-loggedin .leflogin {
display: none;
}

.leflogout {
display: none;
}

.sm-user-loggedin .leflogout {
display: inline;
}

4. Once you've done this, click 'done'. Then drag an HTML content block to where you want the SmugMug refferal link and login/logout link to be.
5. Once you've done that, add this code:

<div style="text-align:right">
<a href="https://secure.smugmug.com/signup.mg?Coupon=XfVyhOovRyp4o">Smugmug -</a> <a class="leflogin" href="https://secure.smugmug.com/login?goTo=http://www.soulgazephotography.smugmug.com/">Login</a><a class="leflogout" href="https://secure.smugmug.com/logout?goTo=http://www.soulgazephotography.smugmug.com/">Logout</a&gt;
</div>

6. Don't forget to remove: https://secure.smugmug.com/signup.mg?Coupon=XfVyhOovRyp4o and insert your referral code instead. You can find yours via your 'Account Settings' > 'Stats'. Scroll down to referrals.

Now, just click 'done' in the HTML content block. Click 'done' in customize and 'publish site'. Please let me know if you need additional details or photo clarification. The code I provided in this reply is exactly what is inside my boxes currently. Good luck!

Don't worry, we'll figure this out!

Soul Gaze Photography

jdwl wrote: »

i iturned it on and off and started with independent website ON and turned it off again.
now it worked, thanks!

I'm so glad you figured it out! I replied to your earlier question and re-posted instructions so it helps someone else.

hendie

Hi, I did the custom SmugMug | Login footer just like it is demonstrated on this thread but somehow I cant get it to center, it just wont stick. Anybody got any clue?
http://www.photobyhendy.com
Thanks

juanheredia

Soul Gaze Photography wrote: »

I'm so glad you figured it out! ....

Great tip Soul Gaze. You rock!!!! I've visited your site and you have a really amazing work there

juanheredia

hendie wrote: »

Hi, I did the custom SmugMug | Login footer just like it is demonstrated on this thread but somehow I cant get it to center, it just wont stick. Anybody got any clue?
http://www.photobyhendy.com
Thanks

Try this.

Instead of:

<div style="text-align:right">

Use:

<div style="display: table; margin: 0 auto;">

hendie

juanheredia wrote: »

Try this.

Instead of:

<div style="text-align:right">

Use:

<div style="display: table; margin: 0 auto;">

Where would you put this code in?

Soul Gaze Photography

hendie wrote: »

Hi, I did the custom SmugMug | Login footer just like it is demonstrated on this thread but somehow I cant get it to center, it just wont stick. Anybody got any clue?
http://www.photobyhendy.com
Thanks

Sure! Just change the word 'right' to 'center' in the CSS box.

HTML BOX

<div style="text-align:center">
<a href="https://secure.smugmug.com/signup.mg?Coupon=XfVyhOovRyp4o">Smugmug -</a> <a class="leflogin" href="https://secure.smugmug.com/login?goTo=http://www.soulgazephotography.smugmug.com/">Login</a><a class="leflogout" href="https://secure.smugmug.com/logout?goTo=http://www.soulgazephotography.smugmug.com/">Logout</a&gt;
</div>

ALSO make sure there isn't a content box on the same line or it won't be fully centered.
This worked for my site. It should for yours unless there is a conflict with the theme style.

hendie

Thanks much, it is centered now. I didnt know how to use it in CSS box as I was using TEXT box, but I pasted the code anyways and it worked. But now the login still says login even when I am logged in, aint it supposed to say logout?

Uncle Bum

Soul Gaze:
Thanks for the code! It worked flawlessly once I substituted my own website for yours in the Login / Logout addresses.

Hope SmugMug hires you!

Soul Gaze Photography

juanheredia wrote: »

Great tip Soul Gaze. You rock!!!! I've visited your site and you have a really amazing work there

You're welcome! Glad to have helped. Thank you SO much for the compliment. Much appreciated!

Soul Gaze Photography

hendie wrote: »

Thanks much, it is centered now. I didnt know how to use it in CSS box as I was using TEXT box, but I pasted the code anyways and it worked. But now the login still says login even when I am logged in, aint it supposed to say logout?

You're welcome! Glad it worked. Let's double check that the code is in the correct locations and entered exactly. Even missing an element can alter it. Let me know if this doesn't fix the issue:

This goes in the CSS content block. I selected 'entire site' and added my CSS content block to the bottom of my footer. It's hidden, but easier for me to remember the location.

CSS

.sm-page-powered-by a { display: None; } .leflogin { display: inline; } .sm-user-loggedin .leflogin { display: none; } .leflogout { display: none; } .sm-user-loggedin .leflogout { display: inline; }

This goes in the HTML content block. Don't forget to change the referral url. Get the link via Account Settings > Stats (scroll down to referral). Also change the login/logout link to your website.

HTML

<div style="text-align:center">
<a href="YOUR REFERRAL LINK GOES HERE">Smugmug -</a> <a class="leflogin" href="https://secure.smugmug.com/login?goTo=http://www.soulgazephotography.com/">Login</a><a class="leflogout" href="https://secure.smugmug.com/logout?goTo=http://www.soulgazephotography.com/">Logout</a&gt;
</div>

I hope it worked this time!

Soul Gaze Photography

Uncle Bum wrote: »

Thanks for the code! It worked flawlessly once I substituted my own website for yours in the Login / Logout addresses.

Hope SmugMug hires you!

You're very welcome! I'm very happy for you! thumb

Thank you, that would be quite awesome.

:jonah

Hi Amber, Great work here. I was looking at your site and I wanted to put in Shopping cart link. How did you do that?
Thanks,