XF 1.5 Couple of CSS Questions

Skisma

Member
Hi,

There are two things I'd like to fix on my site, one is for mobile and the other is for both mobile and desktop.

1. When viewing my site on mobile my header logo re-scales in width, but not in height. At least this is what I think is happening. An easy was to see this in action is to visit my site, http://forgehaven.com/forums/, then resize the window to be that of a mobile device. You'll see that the height never changes. Is there something I can modify for this to scale down in both width and height?

2. I have rank icons setup on my site that are simply user groups with cusom css instead of a banner. Since these are acting as a custom banner, they display in the post-bit area and a users profile page. They look great in the post-bit, but create a completely new row on profile pages. Here's the link to see that: http://forgehaven.com/members/skisma.1/

Ideally, I would like them to remain the same as they are in the post-bit area, but display directly to the right of the username/user title/banners. I've attached screenshots of what it currently looks like, as well as a concept of what I want that I whipped up in ms paint.

Here's the code I'm currently using that is in EXTRA.css

Code:
.silverGrade3 {
background: url("http://forgehaven.com/FHimages/Ranks/SilverG3.png") no-repeat;
height: 100px;
width: 100px;
text-indent: -10000em;
display: block;
margin-left: auto;
margin-right: auto;
}
 

Attachments

  • Rank-reposition.webp
    Rank-reposition.webp
    29.6 KB · Views: 17
  • Rank-repositionCONCEPT.webp
    Rank-repositionCONCEPT.webp
    28.9 KB · Views: 14
1. for your logo you may want to add max-height: 100% also, if that is the look your going for.

2. if you remove the "width" statement it falls under your staff banner...
 
1. for your logo you may want to add max-height: 100% also, if that is the look your going for.

2. if you remove the "width" statement it falls under your staff banner...

max-height: 100%; didn't do anything, I think it's because it never went greater than the normal height to begin with. It was just scaling down in width, but not height....so the result makes it appear to have a bunch of extra padding on top and bottom.

Removing width: 100px; did make it fall under my banner, which is a start, but I would like to have it display as I show in my concept image. Also, this caused it to no longer be centered in the post-bit area.
 
you may have to use a separate class for each template?

SilverGrade3_pbit for postbit template to center image
SilverGrade3_mv for Member view template to align image left.


as far as your logo perhaps adding
min-height:50%; or keep increasing up to your liking....
 
Last edited:
you may have to use a separate class for each template?

SilverGrade3_pbit for postbit template to center image
SilverGrade3_mv for Member view template to align image left.


as far as your logo perhaps adding
min-height:50%; or keep increasing up to your liking....


The min-height didn't work either. Regarding having seperate classes, that would be perfect if I can achieve this! Is it possible to have one user group reference multiple classes?
 
Does anyone know if it's possible to assign more than one css class to a user group? Since it's currently only tied to one class, the result looks great in the post bit, but ugly on user profiles. See comments/attachments above to see the issue.
 
where are you adding the classes for your usergroups ex.(.bronzeGrade5) to display these images? Are you adding them to username css within the usergroups?
 
Top Bottom