Options

Conditional Hidden

gatorussgatoruss Registered Users Posts: 27 Big grins
edited September 24, 2015 in SmugMug Customization
Is it possible to have an menu item that is hidden when I am not logged in - so that visitors wouldn't see it or be able to click on it, But if I was logged in, I could see it and click on it?

Comments

  • Options
    AllenAllen Registered Users Posts: 10,012 Major grins
    edited September 23, 2015
    Put this in "entire site" CSS. Replace the XXXXXXX with the widget number.

    .sm-page-widget-XXXXXXX {display:none}
    .sm-user-loggedin.sm-user-owner .sm-page-widget-XXXXXXX {display:block}

    In this post explains how to get widget number using "Inspect Element".
    http://www.dgrin.com/showpost.php?p=2009781&postcount=16
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • Options
    gatorussgatoruss Registered Users Posts: 27 Big grins
    edited September 23, 2015
    Allen wrote: »
    Put this in "entire site" CSS. Replace the XXXXXXX with the widget number.

    .sm-page-widget-XXXXXXX {display:none}
    .sm-user-loggedin.sm-user-owner .sm-page-widget-XXXXXXX {display:block}

    In this post explains how to get widget number using "Inspect Element".
    http://www.dgrin.com/showpost.php?p=2009781&postcount=16

    Thank you, Allen.

    I assume that I am looking for the widget number of the menu item that I want hidden when not logged in, correct?
  • Options
    RichardRichard Administrators, Vanilla Admin Posts: 19,931 moderator
    edited September 23, 2015
    Are those widget numbers stable or do they change when SM updates things?
    My Pics
  • Options
    AllenAllen Registered Users Posts: 10,012 Major grins
    edited September 23, 2015
    Widget numbers are unique. Every widget has a different number.
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • Options
    gatorussgatoruss Registered Users Posts: 27 Big grins
    edited September 23, 2015
    Allen wrote: »
    Put this in "entire site" CSS. Replace the XXXXXXX with the widget number.

    .sm-page-widget-XXXXXXX {display:none}
    .sm-user-loggedin.sm-user-owner .sm-page-widget-XXXXXXX {display:block}

    In this post explains how to get widget number using "Inspect Element".
    http://www.dgrin.com/showpost.php?p=2009781&postcount=16

    I added a menu item (for testing purposes called "Test Link"). But when I use the "inspector Element," the new menu item ("Test Link") is not assigned a class with ".sm-page-widget_XXXXXXX." Instead, it is contained in a <a> that is nested in a <li> (see bolded red text in code snippet below). The parent element with a ".sm-page-widget_XXXXXXX" class is the entire navigation block containing all the menu items (see bolded blue text in code snippet below).

    In order to do what I have in mind, do I need to create a custom nav block with custom html and custom css?
    [B][COLOR=Blue]<div id="sm-page-widget-WfWmNfmP" class="sm-page-widget sm-page-widget-nav sm-page-widget-12334915" data-typeid="12334915">[/COLOR][/B]<div class="sm-page-widget-content">
<div class="sm-page-widget-header"></div>

<div id="sm-page-widget-LNTj9zcB" class="sm-page-widget-body">
<div class="sm-page-widget-nav-popover  sm-page-widget-nav-vertical sm-page-widget-nav-color-default  sm-page-widget-nav-l sm-page-widget-nav-left  sm-page-widget-nav-toplinks-lowercase  sm-page-widget-nav-sublinks-regular  sm-page-widget-nav-sublinks-separator">
<ul class="vertical">
<li class="sm-page-widget-nav-toplink sm-page-widget-nav-activepage">

<li class="sm-page-widget-nav-toplink">

<li class="sm-page-widget-nav-toplink">

[B][COLOR=Red]<li class="sm-page-widget-nav-toplink">[/COLOR][/B]
[B][COLOR=Red]<a href="http://www.google.com">Test Link</a>[/COLOR][/B]


[B][COLOR=Red]</li>[/COLOR][/B]


</ul>


</div>


</div>
  • Options
    AllenAllen Registered Users Posts: 10,012 Major grins
    edited September 23, 2015
    gatoruss wrote: »
    I added a menu item (for testing purposes called "Test Link"). But when I use the "inspector Element," the new menu item ("Test Link") is not assigned a class with ".sm-page-widget_XXXXXXX." Instead, it is contained in a <a> that is nested in a <li> (see bolded red text in code snippet below). The parent element with a ".sm-page-widget_XXXXXXX" class is the entire navigation block containing all the menu items (see bolded blue text in code snippet below).

    In order to do what I have in mind, do I need to create a custom nav block with custom html and custom css?
    [B][COLOR=Blue]<div id="sm-page-widget-WfWmNfmP" class="sm-page-widget sm-page-widget-nav sm-page-widget-12334915" data-typeid="12334915">[/COLOR][/B]<div class="sm-page-widget-content">
<div class="sm-page-widget-header"></div>

<div id="sm-page-widget-LNTj9zcB" class="sm-page-widget-body">
<div class="sm-page-widget-nav-popover  sm-page-widget-nav-vertical sm-page-widget-nav-color-default  sm-page-widget-nav-l sm-page-widget-nav-left  sm-page-widget-nav-toplinks-lowercase  sm-page-widget-nav-sublinks-regular  sm-page-widget-nav-sublinks-separator">
<ul class="vertical">
<li class="sm-page-widget-nav-toplink sm-page-widget-nav-activepage">
<li class="sm-page-widget-nav-toplink">
<li class="sm-page-widget-nav-toplink">
[B][COLOR=Red]<li class="sm-page-widget-nav-toplink">[/COLOR][/B]
[B][COLOR=Red]<a href="http://www.google.com">Test Link</a>[/COLOR][/B]
[B][COLOR=Red]</li>[/COLOR][/B]
</ul>
</div>
</div>


    There's always a way :D Maybe some version of this?

    .sm-page-widget-12334915 .sm-page-widget-nav-toplink li:nth-child(4) {display:none}

    .sm-user-loggedin.sm-user-owner .sm-page-widget-12334915 .sm-page-widget-nav-toplink li:nth-child(4) {display:block}

    EDIT: If you are in sandbox and have not went public you can not test this because you can not see a logged out version.
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • Options
    gatorussgatoruss Registered Users Posts: 27 Big grins
    edited September 23, 2015
    Allen wrote: »
    There's always a way :D Maybe some version of this?

    .sm-page-widget-12334915 .sm-page-widget-nav-toplink li:nth-child(4) {display:none}

    .sm-user-loggedin.sm-user-owner .sm-page-widget-12334915 .sm-page-widget-nav-toplink li:nth-child(4) {display:block}

    EDIT: If you are in sandbox and have not went public you can not test this because you can not see a logged out version.

    I figured out a way! clap.gifclap

    From the "Add Content" section of the fly-out in Customize Mode, I created a "one item" nav block and then I dragged that to the existing nav block and it allowed me to add it to the existing nav block (prompting me with arrows to add it "above," "right," "below" or "left"). I added it below and it looks like just another item in the existing nav block. But since it is its own widget, it has a ".sm-page-widget_XXXXXXX" class and can be separately styled.

    Works just as I had hoped! :D

    Thanks for helping me think this thru.

    BTW - Not sure what the "sandbox" is?headscratch.gif
  • Options
    AllenAllen Registered Users Posts: 10,012 Major grins
    edited September 24, 2015
    gatoruss wrote: »
    ...
    BTW - Not sure what the "sandbox" is?headscratch.gif
    Have you converted your site to the NewSmug? In the transition period between OldSmug (Legacy) and
    NewSmug, before the NewSmug site is Publish the site is in "sandbox".
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • Options
    AllenAllen Registered Users Posts: 10,012 Major grins
    edited September 24, 2015
    gatoruss wrote: »
    ...
    I see the "Test Link" on your site. Did you not add the CSS to hide it?
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • Options
    gatorussgatoruss Registered Users Posts: 27 Big grins
    edited September 24, 2015
    Allen wrote: »
    Have you converted your site to the NewSmug? In the transition period between OldSmug (Legacy) and
    NewSmug, before the NewSmug site is Publish the site is in "sandbox".

    I didn't have an active "OldSmug." At one time I had had one, but it lapsed years ago. I recently signed up for a new account. So, although my dgrin membership dates back a few years, SmugMug treats me as a new user.
    Allen wrote: »
    I see the "Test Link" on your site. Did you not add the CSS to hide it?

    The "Test Link" that was showing on my site (I just removed it) is the first one that I added to my existing nav block -- the one that I was having trouble applying CSS to independently of the rest of the menu items in that nav block. When I added the new, one item nav block that I dragged into the existing nav block (as described in my prior post), I created a new "Test Link" and applied to it the CSS to hide it. I had forgotten to remove the original "Test Link."
  • Options
    gatorussgatoruss Registered Users Posts: 27 Big grins
    edited September 24, 2015
    Allen wrote: »
    There's always a way :D Maybe some version of this?

    .sm-page-widget-12334915 .sm-page-widget-nav-toplink li:nth-child(4) {display:none}

    .sm-user-loggedin.sm-user-owner .sm-page-widget-12334915 .sm-page-widget-nav-toplink li:nth-child(4) {display:block}

    EDIT: If you are in sandbox and have not went public you can not test this because you can not see a logged out version.

    I tried your language as well. It didn't work as written, but the following does work:
    .sm-page-widget-12334915 [COLOR=Red][B][I]li:nth-child(4).sm-page-widget-nav-toplink[/I][/B][/COLOR]  {display:none}

.sm-user-loggedin.sm-user-owner .sm-page-widget-12334915 [I][B][COLOR=Red]li:nth-child(4).sm-page-widget-nav-toplink[/COLOR][/B][/I] {display:block}
    I guess this is because the <li> element isn't a "child" of an element with a class of ".sm-page-widget-nav-toplink", but has a class of ".sm-page-widget-nav-toplink".

    EDIT: Probably don't need ".sm-page'widget-nav-toplink", as "sm-page-widget-12334915" only contains 1 set of <li> elements (all of which have the "sm-page'widget-nav-toplink" class). I will test that tonite.
Sign In or Register to comment.