• 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

#1
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.
 

Brogan

XenForo moderator
Staff member
#2
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
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
 
#5
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:

Steve F

Well-known member
#6
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: