This describe a customization that allows you to hide any menu item in the style menu (to only offer certain viewing styles) or in the Share menu (to only offer certain sharing options) or the Buy menu (particularly to hide the Buy All Digital Downloads menu item).

For example, you could change the style menu from this:



to this:




To use this, there are simply two steps:

Step 1

Copy this code into your bottom javascript:

//------------------------------------------------------------------------------------------------------------------------------------------
// Script to allow you to use CSS to hide any individual menu items in the Share or Style menus
// This script will add a class name to each top level menu item in the Share and Style menus.
// That class name will be of the form "buttonname_menuitemname_menuitem".
// The class name will be all lowercase and any spaces or other non-alpha numeric chars in it will be converted to underscores.
// Here are some examples of class names:
//    share_be_social_menuitem
//    share_social_bookmarking_menuitem
//    style_traditional_menuitem
//
// And some example CSS to hide a menu item would look like this:
//    .share_be_social_menuitem {display:none;}
//    .style_traditional_menuitem {display:none;}
//
// You can also hide menu items only in certain contexts using all the normal Smugmug CSS classifiers. 
// To hide social bookmarking only in your vacation category, you would use CSS like this:
//    .category_Vaction .share_be_social_menuitem {display:none;}
//
// Version 1.1
//------------------------------------------------------------------------------------------------------------------------------------------

YE.onContentReady("viewingStylesButton", TagMenuItemsSetup);
YE.onContentReady("shareButton", TagMenuItemsSetup);
YE.onContentReady("buyButton", TagMenuItemsSetup);

function TagMenuItemsSetup()
{
    // now that the object is created, we can register an interest in the beforeShowEvent
    // we can't modify the menu until then because of lazyLoading
    var button = YAHOO.widget.Button.getButton(this.id);
    var menu = button.getMenu();
    if (!menu) return;
    var menuName = button.get("label");
    menu.beforeShowEvent.subscribe(TagMenuItems);
    
    function TagMenuItems(event, args, data)
    {
        // called in the context of the menu
        try
        {
            // get the list of menu items in our menu
            var menuItems = this.getItems();
            
            // look through each menu item to see if it matches anything in our stylesToRemove array
            for (var i = 0; i < menuItems.length; i++)
            {
                // get the text value from the menu item and make it into a new class name
                var newClassName = menuItems[i].cfg.config.text.value;
                newClassName = menuName + "_" + newClassName + "_menuitem";
                newClassName = newClassName.replace(/\s+|\&[a-z]+;|[^_a-zA-Z0-9-]/g, "_");    // replace illegal CSS chars with underscore
                // add the new class name to the menu item so we can hide/style it with pure CSS
                YD.addClass(menuItems[i].id, newClassName.toLowerCase());
                
                // if this item itself is a sub-menu, then register for it's show event too
                var submenu = menuItems[i].cfg.getProperty("submenu");
                if (submenu)
                {
                    submenu.beforeShowEvent.subscribe(TagMenuItems);
                }
            }
            // no need to call this again everytime we show the menu
            this.beforeShowEvent.unsubscribe(TagMenuItems);
        } catch (e) {}        // catch any exceptions and ignore them - errors will just cause the styles not to get removed, but not affect any other scripts
    }
}

Step 2

Add the appropriate CSS to hide whatever menu items you want. This code adds a unique classname to every menu item and submenu item in the Share and Style menus. You can then use that classname in a CSS rule to hide whatever menu items you don't want to display. You can do this globally or combine it with any other CSS modifiers to only do it in a category, in a subcategory, in a gallery, etc...

The CSS to hide a menu item looks like this:

.share_get_a_link_menuitem {display:none;}

The name of the menu button comes first. Then, the name of the menu item that you want to hide is next, then the text menuitem is last. Any spaces or non-alpha numeric chars in the menu item are converted to underscores. It is always all lowercase regardless of what is in the menu.

To hide the StumbleUpon menu item in the Social Bookmarking submenu of the share button, you would use this:

.share_stumbleupon_menuitem {display:none;}

To hide the slideshow view from the Style menu, you would use this:

.style_slideshow_menuitem {display:none;}

To hide the slideshow view from the Style menu, but only when you are not logged in, you would use this:

.notLoggedIn .style_slideshow_menuitem {display:none;}

To hide the Buy All Digital Downloads menu item, you would add this:

.buy_all_digital_downloads_menuitem {display: none;}

And so on...

This customization is more flexible than the previous version here, so I would suggest using this new one instead.

great tool, but is there a way to hide the "Get a link" option from visitors, and keep it when I am logged in as the admin?

thank you.

Originally Posted by Foques great tool, but is there a way to hide the "Get a link" option from visitors, and keep it when I am logged in as the admin? thank you.

After installing the script, use the CSS:

.notLoggedIn .share_get_a_link_menuitem {display:none;}

not that its a big shock or anything, but it worked.

thank you very much!

Could this code be modified to add the Old Journal style back into the drop-down list? Thanks.

Originally Posted by ChancyRat Could this code be modified to add the Old Journal style back into the drop-down list? Thanks.

I wish Smug would add it back. It is used many times and the new journal
style just doesn't do it for html type pages.

Originally Posted by Allen I wish Smug would add it back. It is used many times and the new journal style just doesn't do it for html type pages.

But, if you are doing an HTML page, you just set it to journal (old) in gallery settings. You don't need it in the Style menu, do you?

Originally Posted by ChancyRat Could this code be modified to add the Old Journal style back into the drop-down list? Thanks.

I don't know. Code would have to be written to try it.

Concerning this thread:

http://www.dgrin.com/showthread.php?t=163966

Would also like to have "get a Link" option when logged in ...Is that
possible with changes noted in above thread.
Bill

Originally Posted by pillman Concerning this thread: http://www.dgrin.com/showthread.php?t=163966 Would also like to have "get a Link" option when logged in ...Is that possible with changes noted in above thread. Bill

The entire Share button can be hidden when not logged in and shown when logged in very easily. Just turn Easy Sharing on in the desired galleries and then add this CSS:

.notLoggedIn #shareButton {display:none;}

Thanks

Can this code be used to hide items from the Buy menu?

I gave it a try as best I could, which was limited to adding the following to the CSS instead of something share or style menu related.

.buy_this_photo_menuitem {display:none;}

It doesn't appear to have worked and I'm clueless as to what would need to change in the java to make it work...?

Originally Posted by CWSkopec Can this code be used to hide items from the Buy menu? I gave it a try as best I could, which was limited to adding the following to the CSS instead of something share or style menu related. .buy_this_photo_menuitem {display:none;} It doesn't appear to have worked and I'm clueless as to what would need to change in the java to make it work...?

No. This code doesn't operate on the Buy menu. What exactly are you trying to accomplish? You can turn off print ordering for a specific gallery in gallery options.

Originally Posted by jfriend No. This code doesn't operate on the Buy menu. What exactly are you trying to accomplish? You can turn off print ordering for a specific gallery in gallery options.

I've got my galleries set to the Thumbnail view because it's the most visually appealing to me and to keep things simplified for visitors I don't give them access to change the style (which can be debated good or bad, but at the moment it's how I prefer to present my photos). The problem, as minor as it is, the "This Photo" option is greyed out under the Buy menu. I've added a feature request to the Uservoice site to allow it and to have it trigger a drop down asking which photo similar to the share menu, but was hoping to remove it from the list in the meantime as it looks odd being there but not selectable.

Not a major problem, but if it was possible to take it out, I'd prefer it not there!

Tweaked this code slightly to work with the Buy menu too. The code in the first post will now work with the Buy menu, the Share menu and the Style menu. Items can be removed or formatted from any of those menus or their resulting sub-menus.

Originally Posted by jfriend But, if you are doing an HTML page, you just set it to journal (old) in gallery settings. You don't need it in the Style menu, do you?

Hi,

I'm trying to hide the "Create a Card" item from the 'Buy' menu. I've created this CSS code:

.buy_create_a_card_menuitem {display: none;}

but it doesn't appear to be working. Any suggestions? The gallery I'm working from is http://www.michaellockhartphoto.com/Galleries/Waterfalls/15171536_d7dUv#1177472851_iJiDQ

Thanks!

Michael

Originally Posted by MichaelLockhart Hi, I'm trying to hide the "Create a Card" item from the 'Buy' menu. I've created this CSS code: .buy_create_a_card_menuitem {display: none;} but it doesn't appear to be working. Any suggestions? The gallery I'm working from is http://www.michaellockhartphoto.com/Galleries/Waterfalls/15171536_d7dUv#1177472851_iJiDQ Thanks! Michael

Because you've changed the text in the Buy menu and that script runs first, you would need this CSS:

.click_here_to_buy_create_a_card_menuitem {display: none;}

Ah, makes perfect sense. Thank you sir!

Michael

Originally Posted by jfriend The entire Share button can be hidden when not logged in and shown when logged in very easily. Just turn Easy Sharing on in the desired galleries and then add this CSS: .notLoggedIn #shareButton {display:none;}

Can the entire Share button be hidden when logged out as well as when logged in?

Thank you.