1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.5 Couple of CSS Questions

Discussion in 'Styling and Customization Questions' started by Skisma, Oct 28, 2015.

  1. Skisma

    Skisma Member


    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

    .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;

    Attached Files:

  2. OUTL4W

    OUTL4W Active Member

    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...
  3. Skisma

    Skisma Member

    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.
  4. OUTL4W

    OUTL4W Active Member

    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: Oct 28, 2015
  5. Skisma

    Skisma Member

    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?
  6. Skisma

    Skisma Member

    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.
  7. OUTL4W

    OUTL4W Active Member

    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?
  8. Skisma

    Skisma Member

    @OUTL4W No, to the custom css option for banners in user groups.

Share This Page