Please upgrade here. These earlier versions are no longer being updated and have security issues.

CSS Question - Hiding one element of #Panel...Still shows up in Mobile Browser

I'm hiding the 'Sign In' button on the Guest Box on the main discussions controller so that only 'Register' appears. I found this to be redundant with the Sign In link on the toolbar. My CSS code is as follows:

To hide the 'Sign In' button:

body.Discussions a.Button.SignInPopup {
display: none;
}

This hides the button for my desktop and for an iPad, but the 'Sign In' button still appears on my mobile Android browser. Hiding the entire Guest Box using div.Box.GuestBox { display: none; } hides everything in the mobile browser.

Does anyone know why I cannot seem to hide individual elements like this for just mobile displays? I have tried everything.




Using Vanilla v.2.0.18.8

hgtonight

Comments

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    You need to change the css in the mobile theme to affect the mobile view. Use a user agent switcher to look at the mobile view in your browser and pick those selectors out.

    The selectors may be called something else.

    .Banner ul li.SignInItem a

    kirkpa31
  • Thanks! I had never heard of a user agent switcher before - really helpful!

    vrijvlinder
  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    try this one

    http://chrispederick.com/work/user-agent-switcher/help/#install

    then download the user agent list and install it . It is very helpful for sure.

  • kirkpa31kirkpa31 ✭✭
    edited July 2013

    EDIT

    Using Google Chrome User Agent Switcher The selectors are unfortunately titled the same in both the mobile view and my default view - I will continue to play around with this switcher and css - hopefully something clicks!

    but i will download your recommendation and see what happens

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    this one has more variety of all existing agents and OS versions of those.

    If the selectors are the same just apply the same rule but add display: none!important;

  • kirkpa31kirkpa31 ✭✭
    edited July 2013

    My issue is that the 'Sign In' button is labeled as a.Button and the 'Register' button is labeled as a.Button.ApplyButton according to the mobile browser switching agent

    So setting a.Button to display:none removes both of them.

    I'm currently trying to figure out how to change the class name of the 'Sign In' button from just Button to perhaps Button SignIn which works when I type it into Firebug - then setting display: none for a.Button.SignIn

  • ShadowdareShadowdare Moderator

    Would you post the HTML code of the GuestBox of your mobile theme?

    Add Pages to Vanilla with the Basic Pages app

  • vrijvlindervrijvlinder Papillon-Sauvage MVP
    edited July 2013

    no you don't need to change the class, simply include the other selectors before it like the example I gave above.

    look at the class of li or ul the links are in

    then you would use something for this

    <li class="SignInItem"><a href="/forum/entry/signin" class="SignIn">Sign In</a></li>

    the css

    li.SignInItem a.SignIn{
    display:none!important;
    }
    
    kirkpa31
  • My code is as follows:

    <div class="Box GuestBox">
    <h4>Welcome!</h4>
    <p>Sign in below or register for free instant access!</p>
    <div class="P">
    <a class="Button" href="/entry/signin?Target=discussion%2F195%2Fsample-discussion-">Sign In</a>
    <a class="Button ApplyButton" href="/entry/register?Target=discussion%2F195%2Fsample-discussion-">Register for Free</a>
    </div>
    </div>
    

    The Sign In and Register links are not part of a list - just separate classes - so I cannot unfortunately separate them further that way

  • vrijvlindervrijvlinder Papillon-Sauvage MVP
    edited July 2013

    another example

    <li class="NonTab"><a class="SignInPopup" href="/forum/entry/signin?Target=discussions"></a></li>

    the css

    li.NonTab a.SignInPopup,  {
    display:none!important;
    }
    

    another example

    <div class="Box GuestBox">
       <h4>Welcome</h4>
       <p>Please Register To Post </p>
    

    <div class="P">< a href="/forum/entry/signin?Target=discussions" class="Button SignInPopup">Sign In</a></div >

    .Box.GuestBox .P a.Button.SignInPopup{
    display:none!important;
    }
    
    kirkpa31
  • Thank you for the examples!

    However - the class given in your examples is "Button SignInPopup" whereas the class with my element is just "Button"

    That successfully hides it from all browsers except mobile - where the class is just "Button"

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    for this I think you could use

    <div class="P">
    <a class="Button" href="/entry/signin?Target=discussion%2F195%2Fsample-discussion-">Sign In</a>
    

    the css

    .Box.GuestBox .P a.Button{
    display:none!important;
    }
    
    kirkpa31
  • ShadowdareShadowdare Moderator

    To select only the sign in button, use this:

    .GuestBox a:first-child { display: none; }
    

    Add Pages to Vanilla with the Basic Pages app

    kirkpa31vrijvlinder
  • kirkpa31kirkpa31 ✭✭
    edited July 2013

    @vrijvlinder That unfortunately removed both of the buttons. Thank you for your persistence though!

    @shadowdare That worked perfectly! I had no idea that was even a command! Very useful.

    Thank you both!

    Shadowdarevrijvlinder
  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    shadowdare is the Bomb !! I was going to suggest that but I had to go out.

    this one would also work but you need to add display:block!important on the one you would want to be seen . I like shadowdare's soution much more :)

    .Box.GuestBox .P a.Button{
    display:none;
    }
    
    .Box.GuestBox .P a.Button.ApplyButton{
    visibility:visible; 
    display:block!important;
    }
    
    kirkpa31
  • learning never stops with this forum...Thanks!

    vrijvlinder
  • Hello,
    .css for mobile is set to

    .RandomImage {display:none !important;}

    RandomImage {display:none !important;}

    Yet it still shows in mobile view , the RANDOM IMAGE plugin shows images outside of viewport in MOBILE - so I am using .css to remove them but it's not working...

    The element image falls outside the viewport.

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    when you say css is set to display none on mobile, do you mean you added that to the mobile theme css?

    Plugin css has priority over themes css. You need to add some code so it does not display on mobile, css is not enough...

    something like this for every controller that displays the images

    public function DiscussionsController_Render_Before($Sender) {
    if(IsMobile()){
     return;
    }else{
    $this->_AddResources($Sender);
    }
    
    public function CategoriesController_Render_Before($Sender) {
    if(IsMobile()){
     return;
    }else{
    $this->_AddResources($Sender);
    }
    
Sign In or Register to comment.