Jump to content


Photo

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  

computerprep

    Advanced Member

  • Members
  • 303 posts
  • Local time: 11:01 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>
      </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:

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  

Happy2Play

    Trial and Error

  • Moderators
  • 14045 posts
  • Local time: 08:01 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%)
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, 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