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

Soul Gaze Photography · August 1, 2013

.
.
ATTENTION!!! You can continue to read the thread, but the current and updated code/ tutorial can now be found on my website:
http://www.soulgazephotography.com/Store/Other/SmugMug-Customizations/New-SmugMug-Customizations

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?

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.
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.
Insert:

.sm-page-powered-by a { display: None; }
Then save the block. Now the SmugMug link is gone, but what if you want to keep the login link?
Just add a text content block and the word 'login' (or whatever) and link either to SmugMug's homepage or to:

https://secure.smugmug.com/login?goTo=http://www.smugmug.com/

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:

https://secure.smugmug.com/signup.mg?Coupon=XfVyhOovRyp4o

Your custom referral link can be found via 'account settings' > Stats.

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

SmugMug | Login

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!

Cambyses · August 1, 2013

Thanks for the instructions...

A bit off topic, but may I ask how did you embed your contact form?

Thanks...

brandofamily · August 1, 2013

There's no real need for both the Smugmug link AND the login link... clicking the smug mug link will allow you to login... That's what Ive done on my sites...

Soul Gaze Photography · August 1, 2013

Cambyses wrote: »

Thanks for the instructions...

A bit off topic, but may I ask how did you embed your contact form?

Thanks...

You're welcome! My contact form is from my main 'website' and not hosted on SmugMug. I worked really hard to attempt to match both of my sites. Do you need help creating a contact form?

Soul Gaze Photography · August 1, 2013

brandofamily wrote: »

There's no real need for both the Smugmug link AND the login link... clicking the smug mug link will allow you to login... That's what Ive done on my sites...

The SmugMug link is my referral link. Technically it goes to SmugMug so there is no need for the login link, but the login link takes you directly to the login page so one less click.

Dima · August 1, 2013

Drop Down Menus
Soul, how did you create the drop down menus with the new SmugMug?

Cambyses · August 1, 2013

Soul Gaze Photography wrote: »

You're welcome! My contact form is from my main 'website' and not hosted on SmugMug. I worked really hard to attempt to match both of my sites. Do you need help creating a contact form?

Well, I will be happy with the default Smugmug pop-up Contact Form. It is just that I cannot figure out how to link to it from within our custom navbar (created via custom CSS/HTML).

Soul Gaze Photography · August 1, 2013

Dima wrote: »

Soul, how did you create the drop down menus with the new SmugMug?

Start inside 'customize' > 'customize site'. Then select 'entire site'. If you don't already have a menu there, add one using the content block 'menu' under navigation. Once it's on your page, click the wrench tool to edit it. You will see 'Basic' and 'Links'. Click 'links' Once you add the pages you want, just drag them below and to the right of the top-level link you wish to use and they will be dropped down.

See attached photo. Good luck!

Soul Gaze Photography · August 1, 2013

Cambyses wrote: »

Well, I will be happy with the default Smugmug pop-up Contact Form. It is just that I cannot figure out how to link to it from within our custom navbar (created via custom CSS/HTML).

If you used custom CSS/HTML to create your navbar, you'll need the link to the SmugMug pop-up. Same for if you used the menu contact block and need to add it to the page.

EDIT: If using the content block menu, there is a 'contact form' link option that links to the pop-up SmugMug contact form. Click the tool icon, 'links' > 'link to contact form'.

Can you please add your SmugMug site link to your Dgrin signature so I can better help you?

JBHotShots · August 1, 2013

Thank you!!!

Cambyses · August 1, 2013

Thanks... That is exactly my question: how would I link to the SmugMug pop-up contact form from our custom navbar? For the default menu contact block, I would not need to enter any direct URL link or anything. All I would have to do is to set the link to "Contact Form", and be done with it. Obviously that would not work with our custom navbar.

As for our page, unfortunately you won't be able to see our new page as we have not yet "unveiled" it (pending resolution of the contact form issue). But here is our old/legacy site: www.nourifyphotography.com and we are just trying to replicate our navbar in our new SM page. To get the pop-up contact form on our legacy site, we had to add the Javascript code as explained here), which unfortunately is no longer supported in the new SM.

Soul Gaze Photography · August 1, 2013

LouDoggsRuca wrote: »

Thank you!!!

You're welcome!

Soul Gaze Photography · August 1, 2013

Cambyses wrote: »

Thanks... That is exactly my question: how would I link to the SmugMug pop-up contact form from our custom navbar? For the default menu contact block, I would not need to enter any direct URL link or anything. All I would have to do is to set the link to "Contact Form", and be done with it. Obviously that would not work with our custom navbar.

As for our page, unfortunately you won't be able to see our new page as we have not yet "unveiled" it (pending resolution of the contact form issue). But here is our old/legacy site: www.nourifyphotography.com and we are just trying to replicate our navbar in our new SM page. To get the pop-up contact form on our legacy site, we had to add the Javascript code as explained here), which unfortunately is no longer supported in the new SM.

Ok, understood! Give me a few and I'll get you a resolution.

Cambyses · August 1, 2013

Soul Gaze Photography wrote: »

Ok, understood! Give me a few and I'll get you a resolution.

Would certainly appreciate that

Soul Gaze Photography · August 1, 2013

Cambyses wrote: »

Would certainly appreciate that

I'm still playing around, but it's seeming like it's going to be hard to replicate without javascript. Before I started using my main site & SmugMug merged, I used to use Wufoo for my contact form. Here is a link to my old contact form: http://soulgazephotography.wufoo.com/forms/contact-soul-gaze-photography/
I liked Wufoo because the form was fully customizable regarding text, fields and tips. I also made other forms to use for clients to fill out for questions.

I'll keep trying to find out if there is a way to link to the popup without javascript. In the meantime, let me know if you like and prefer WuFoo. Atleast that's a good contact form for now!

Cambyses · August 1, 2013

Soul Gaze Photography wrote: »

I'll keep trying to find out if there is a way to link to the popup without javascript. In the meantime, let me know if you like and prefer WuFoo. Atleast that's a good contact form for now!

Thanks... Yes, I just created a WuFoo contact form. What I don't like about that is that when you click on Contact in our navbar, it takes you to a completely separate page (WuFoo form page). Also I just created a Free account with WuFoo, and, with the free account, not sure if I can get rid of WuFoo logo on top of our contact form, and I really like to avoid having to pay for WuFoo

Soul Gaze Photography · August 1, 2013

Cambyses wrote: »

Thanks... Yes, I just created a WuFoo contact form. What I don't like about that is that when you click on Contact in our navbar, it takes you to a completely separate page (WuFoo form page). Also I just created a Free account with WuFoo, and, with the free account, not sure if I can get rid of WuFoo logo on top of our contact form, and I really like to avoid having to pay for WuFoo

Awesome. Use this as your link code inside the HTML box and it will open in a new window. It's not exactly what you had with SmugMug's contact form, but works temporarily.

<a href="http://soulgazephotography.wufoo.com/forms/z7x3k1/" target='blank'>Contact</a>
Change the RED text to your Wufoo form link.

I also agree about the Wufoo logo, but until we can find another option, at least you will have a nice custom contact form, that opens in a new window (keeping visitors on your site).

I'll keep trying!

Cambyses · August 1, 2013

Soul Gaze Photography wrote: »

Awesome. Use this as your link code inside the HTML box and it will open in a new window. It's not exactly what you had with SmugMug's contact form, but works temporarily.

<a href="http://soulgazephotography.wufoo.com/forms/z7x3k1/" target='blank'>Contact</a>
Change the RED text to your Wufoo form link.

I also agree about the Wufoo logo, but until we can find another option, at least you will have a nice custom contact form, that opens in a new window (keeping visitors on your site).

I'll keep trying!

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.

Soul Gaze Photography · August 1, 2013

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.

At least there are options for now. Hopefully, javascript will return soon!

I truly wish I knew a quick fix for you as I understand your frustration!

That's why I added the ability to open the contact form in a new window. Similar to a pop-up, but the visitor can close the window when they are done and be back at your website.

You can customize the message they see upon submission and add your url for a backup plan.

You can also customize the theme to match your website. I just updated mine:
http://soulgazephotography.wufoo.com/forms/contact-soul-gaze-photography/

dave.turley · August 2, 2013

Oops

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?
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.

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.

Insert:

Then save the block. Now the SmugMug link is gone, but what if you want to keep the login link?

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,
I was following your instruction and was daft enough to log out half way through and now my site sits there and I have no way of logging back in because I removed the header and added the CSS for the footer. Can you help me? Am I missing something silly?
Thanks
Dave

denisegoldberg · August 2, 2013

dave.turley wrote: »

I was following your instruction and was daft enough to log out half way through and now my site sits there and I have no way of logging back in because I removed the header and added the CSS for the footer. Can you help me? Am I missing something silly?

You can always log in at www.smugmug.com.

--- Denise

dave.turley · August 2, 2013

Oops
I had a brain fart. Apologies. Why wouldn't I google Smugmug login?

aschendel · August 2, 2013

dave.turley wrote: »

Hi,
I was following your instruction and was daft enough to log out half way through and now my site sits there and I have no way of logging back in because I removed the header and added the CSS for the footer. Can you help me? Am I missing something silly?
Thanks
Dave

getting back to Logged In can be done from the smugmug site (or actually, any smugmug site,

)...

http://www.smugmug.com/

a.s.

Soul Gaze Photography · August 2, 2013

dave.turley wrote: »

Hi,
I was following your instruction and was daft enough to log out half way through and now my site sits there and I have no way of logging back in because I removed the header and added the CSS for the footer. Can you help me? Am I missing something silly?
Thanks
Dave

It's ok! I know your question has been answered already, but I am also responding as I feel responsible for assisting you with my tutorial. You can sign-in from http://www.smugmug.com

To add a login link:

Go to your customize mode. Click 'entire website' (the red box).
Scroll down to the 'Text' menu in the contact box area and add a text box.
Type 'login' and put: https://secure.smugmug.com/login?goTo=http://www.smugmug.com/
Save content box. You can also just put this on your homepage. This way you can login quickly.

If you need detailed help with my tutorial, please let me know. I'm sorry I was away today!

dave.turley · August 4, 2013

Soul Gaze Photography wrote: »

It's ok! I know your question has been answered already, but I am also responding as I feel responsible for assisting you with my tutorial. You can sign-in from http://www.smugmug.com

To add a login link:
Go to your customize mode. Click 'entire website' (the red box).

Scroll down to the 'Text' menu in the contact box area and add a text box.

Type 'login' and put: https://secure.smugmug.com/login?goTo=http://www.smugmug.com/

Save content box. You can also just put this on your homepage. This way you can login quickly.

If you need detailed help with my tutorial, please let me know. I'm sorry I was away today!

Thanks for replying despite me stumbling on the answer

ramdisk · August 4, 2013

Soul...I like your new site, what basic design did you start out with?

anonymouscuban · August 4, 2013

Do appreciate you posting this up. Unveiled my site last night, just after adding this tweak.

Alex

Soul Gaze Photography · August 4, 2013

dave.turley wrote: »

Thanks for replying despite me stumbling on the answer

You're welcome! No worries, I'm glad you figured it out.

Soul Gaze Photography · August 4, 2013

ramdisk wrote: »

Soul...I like your new site, what basic design did you start out with?

Thank you! I started out with NYX and customized via the content boxes until I was satisfied.

Soul Gaze Photography · August 4, 2013

anonymouscuban wrote: »

Do appreciate you posting this up. Unveiled my site last night, just after adding this tweak.

Alex

Awesome! Your site looks great too. I'm glad the tutorial was helpful.

Ferguson · August 4, 2013

Login and Logout, right justified
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.

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

Was this tutorial helpful? 13 votes

Comments