Jump to content


Can't tweak .squareCard width on #loginPage

css login profile photo tweak

  • Please log in to reply
1 reply to this topic

#1 computerprep OFFLINE  


    Advanced Member

  • Members
  • 341 posts
  • Local time: 09:12 AM
  • LocationCentral Florida

Posted 30 June 2016 - 12:27 AM

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&amp;tag=?????&amp;quality=90');"></div>
    <div class="cardFooter">
      <div class="cardText">admin</div>
      <div class="cardText">Last seen a minute ago</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?






current live display:

Attached File  Screen Shot 2016-06-30 at 12.24.06 AM.png   650.3KB   1 downloads


desired display:

Attached File  Screen Shot 2016-06-30 at 12.24.27 AM.png   240.39KB   1 downloads

Edited by computerprep, 30 June 2016 - 12:29 AM.

#2 Happy2Play OFFLINE  


    Trial and Error

  • Moderators
  • 17103 posts
  • Local time: 06:12 AM
  • LocationWashington State

Posted 30 June 2016 - 03:46 AM

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%)
Your code just make giant icons.

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, 30 June 2016 - 06:12 AM.

Also tagged with one or more of these keywords: css, login, profile, photo, tweak

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users