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

XF 1.4 center username/title

Discussion in 'Styling and Customization Questions' started by EvilSS, Mar 23, 2015.

  1. EvilSS

    EvilSS Member

    hi,

    i have centered username and title, though when using iphone, the username/title is centered to which i guess is normal.
    i used this idea:
    https://xenforo.com/community/threads/how-do-i-center-the-username-custom-title.75233/
    and tried:
    Code:
    .messageUserBlock em.username {
    text-align:center;
    }
    
    .messageUserBlock em.userTitle {
    text-align:center;
    }
    both do the same thing. but...

    im wondering if there is a way around this please. where mobile shows username/title normal (to the left). or mobile view not effected at all. and only show centered on desktop view.
    is this possible?
    thanks.
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

    You can use media queries to alter CSS based on the viewport (browser) width.

    So at the narrow width you can remove the centering.

    There's a link in my signature which has a guide for responsive design.
     
  3. EvilSS

    EvilSS Member

    thanks man.

    so just as a guess, would i add to CSS something like this please.

    Code:
    <xen:if is="@enableResponsive">
        .messageUserBlock em.userTitle {
        float: none;
        }
    </xen:if>
    and same for
    em.username?

    thanks.

    edit nope that dont work. better read more
     
  4. Brogan

    Brogan XenForo Moderator Staff Member

    You need to include the media query element related to the width.
     
  5. EvilSS

    EvilSS Member

    yes, still trying mate thanks.

    edit:

    this seems to work, look ok?
    but the username and title are inline with each other.

    example:

    EvilSSAdmin
    im hoping for:
    EvilSS
    Admin

    Code:
    .messageUserBlock a.username {
    text-align:center;
    }
    
    .messageUserBlock em.userTitle {
    text-align:center;
    }
    
    
    <xen:if is="@enableResponsive">
      @media (max-width:800px) {
      .messageUserBlock em.userTitle {
      float: left !important;
      }
      }
    
      @media (max-width:610px) {
      .messageUserBlock em.userTitle {
      float: left !important;
      }
      }
    
      @media (max-width:480px) {
      .messageUserBlock em.userTitle {
      float: left !important;
      }
      }
    </xen:if>
    
    <xen:if is="@enableResponsive">
      @media (max-width:800px) {
      .messageUserBlock a.username {
      float: left !important;
      }
      }
    
      @media (max-width:610px) {
      .messageUserBlock a.username {
      float: left !important;
      }
      }
    
      @media (max-width:480px) {
      .messageUserBlock a.username {
      float: left !important;
      }
      }
    </xen:if>
    



    EDIT:

    ok i see where i went wrong. Its meant to be text-align:
    Code:
    <xen:if is="@enableResponsive">
      @media (max-width:800px) {
      .messageUserBlock a.username {
      text-align: left;
      }
      }
    
      @media (max-width:610px) {
      .messageUserBlock a.username {
      text-align: left;
      }
      }
    
      @media (max-width:480px) {
      .messageUserBlock a.username {
      text-align: left;
      }
      }
    
      @media (max-width:800px) {
      .messageUserBlock em.userTitle {
      text-align: left;
      }
      }
    
      @media (max-width:610px) {
      .messageUserBlock em.userTitle {
      text-align: left;
      }
      }
    
      @media (max-width:480px) {
      .messageUserBlock em.userTitle {
      text-align: left;
      }
      }
    </xen:if>
    this works, its ok to use, like not messy?
    thank you @Brogan
     
    Last edited: Mar 23, 2015
  6. Steve F

    Steve F Well-Known Member

    No reason to use float when text-align: left should do it.

    Also you can combine CSS

    Code:
    <xen:if is="@enableResponsive">
    @media (max-width: @maxResponsiveNarrowWidth)
    {
    .messageUserBlock em.userTitle,
    .messageUserBlock a.username
    {
            text-align: left;
    }
    }
    </xen:if>
    The narrow width should be enough (unless there is something specific to your style) to do what you want as the other widths should still use the default look in the messageUserBlock.
     
    Last edited: Mar 23, 2015
    maszd and EvilSS like this.
  7. EvilSS

    EvilSS Member

    thank you @Steve F
    ive been going at this for awhile now. and bang, your code works perfect. the last :if> tag sorta caught me but, all good.
    cheers for that code mate.
     
    Steve F likes this.
  8. Steve F

    Steve F Well-Known Member

    Oops, lol typed that on mobile. :p

    Will edit it
     
    EvilSS likes this.
  9. EvilSS

    EvilSS Member

    awesome job on the mobile thats for-sure ;)
    again thank you.
     

Share This Page