Jump to content
computerprep

Can't tweak .squareCard width on #loginPage

Recommended Posts

computerprep

I want to change the base width of the div.card.squareCard.bottomPaddedCard on the login page that is used to display avatars that are not hidden during login.

 

This width changes based on @@Media min-width variables, so I also want to change all those so the profile images are smaller across the board, but I can't seem to get the CSS code to take effect.

 

Trying to affect this code (user-id and domain code replaced with question marks)

<div class="card squareCard bottomPaddedCard">
  <div class="cardBox visualCardBox">
    <div class="cardScalable">
      <div class="cardPadder"></div>
      <a class="cardContent" href="#" data-ajax="false" data-haspw="true" data-username="admin" data-userid="?????">
         <div class="cardImage" style="background-image:url('?????/emby/Users/?????/Images/Primary?width=600&tag=?????&quality=90');"></div>
      </a>
    </div>
    <div class="cardFooter">
      <div class="cardText">admin</div>
      <div class="cardText">Last seen a minute ago</div>
    </div>
  </div>
</div>

Looks like the base code for the width of the outer HTML element copied above is only controlled by this, line 307 of card.css

.squareCard {
    width: 50%;
}

I should be able to override this code by declaring the element in addition to its class, but to be safe I'm declaring two of its parents.

#loginPage #divUsers div.squareCard {
    width: 33.333%;
}

And it doesn't work. I've already added some small level of anonymity to the login page by hiding the username and last seen time from display. I use the same method and avoid using any !important shortcuts in the css. (Edit: I apply this code in Settings > Branding > Custom css)

 

I also tried to !important this and it has no effect.

 

Any ideas?

 

--------------------------------------

 

Screenshots...

 

current live display:

post-1756-0-44807400-1467260704_thumb.png

 

desired display:

post-1756-0-87651600-1467260715_thumb.png

Edited by computerprep

Share this post


Link to post
Share on other sites
Happy2Play

What device are your images from? 
 
Your code worked fine for me.  What server version?  Have you tried clearing your browser cache?
 
 
My Default (@@Media (min-width: 1800px) 12.5%)
5774ce1fc6632_default.jpg
 
Your code just make giant icons.
5774ce3882f2a_33.jpg

Tested with 8 user defaulted to 8 user in-line, then changing to 33.33% gave 8 users in your desire display but they were giant images (almost the same a zooming my browser 300%.

Edited by Happy2Play

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...