Jump to content

Welcome to Warez Box V2
Register now to gain access to all of our features. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, post status updates, manage your profile and so much more. If you already have an account, login here - otherwise create an account for free today!

Estilos de Grupos

  • Please log in to reply
Este tópico ainda não possui respostas



    🔨 The Judger 🔨

  • Tópicos
  • Posts:
  • Membro nº:
  • Registo:
    03-junho 12
  •  Local:
    WB Bunker
  •  Sexo:
  •  País:
    Country Flag
  •  Clube:


Styling can be applied to user titles and user names via user group settings.
There is also a separate .staff CSS class which allows message elements related to Administrators and Moderators to be styled.
The examples that follow are intended as a guide only. For further reading and information relating to CSS and HTML, refer to the W3Schools site.
User Group Styling[/size]

If a user is a member of more than one user group, the styling applied will be from the group with the highest Display Styling Priority. This is configured in the user group settings as indicated in the following image.
The user name [/size]and user title styling will be present in the following areas:[/size]

  • Staff Online Now block in the sidebar
  • Message user info in posts and conversations
  • Conversation Participants block in the sidebar
  • Member list
  • Current visitors
  • In addition, user title styling will also appear in the following locations:[/size]

  • Dropdown menu under the user name on the navigation bar
  • Member card
  • Profile page
  • Related Style Elements

When applying styling it may be necessary to adjust other elements to achieve the desired effect. In the following examples, the message content has had 8px padding applied using [/size]Style Properties.[/size]
If images are used, further style-related changes may be required, depending on the size of the images, existing font sizes, line heights, and other aspects of the style.[/size]
All images must be uploaded to your server and the correct path configured in the CSS.[/size]
User Name Styling[/size]

To apply styling to a user name, use the [/size]User Name CSS field in the user group settings. Basic styling can consist of a single property to change the text colour, like so.[/size]
The user names of any members in the Administrative user group will then appear in thread posts as follows.
The CSS can be as basic or complex as you wish. The following example adds an image to the left of the user name, in addition to the red text.
The result is as shown below.
As user groups are global, it is not possible to use the Style Property variables in the CSS. 
User Title Styling[/size]

To apply styling to a user title, set User Title Override to Use the following user title. Basic styling can be entered inline.
With the user title appearing as follows.
As there is a maximum limit of 100 characters permitted in the user title field, for more complex styling you must use a CSS class. This has one other advantage as the Style Property variables can be used. Enter the class in the User Title Override field as indicated below.user-title-advanced-css.png 
Ensure you use a class name which is not currently in use elsewhere. 
The class must then be defined in the EXTRA.css template.

.custom-title-admin {
background-color: @primaryMedium;
border: 1px solid @primaryDarker;
border-radius: 4px;
padding: 4px;
margin: 4px 0;
text-align: center;
color: white;

.sidebar .custom-title-admin {
margin-left: 43px;
max-width: 80px;
The second rule-set is to ensure the user title displays correctly in the sidebar.

As can be seen below, using a class enables much more complex styling to be applied.
Any member-defined custom user titles will override the CSS, resulting in titles being displayed in plain text with none of the styling attributes applied. 
Sidebar Display[/size]

In a default installation, user group styling does not apply to the [/size]Staff Online Now and[/size]Members Online Now blocks in the sidebar.[/size]
To enable styling to show in these locations, the [/size]sidebar_online_users template must be edited.[/size]
Look for this line of code in the template:[/size]

class="username{xen:if '!{$user.visible}', ' invisible'}{xen:if {$user.followed}, ' followed'}">{$user.username},
Replace it with this:

class="username{xen:if '!{$user.visible}', ' invisible'}{xen:if {$user.followed}, ' followed'}">{xen:helper richUserName, $user},
Styling is then present in both of the blocks.
Staff Styling[/size]

A separate CSS class exists for staff, which allows message elements related to Administrators and Moderators to be styled.
In all of the following examples, the code has been added to the EXTRA.css template. The resulting styling is displayed in each case.
Post text:[/size]

.staff {
color: @primaryMedium;
The post text color will be overridden by any explicit color applied in the message.

Post background:[/size]

.staff .messageContent {
background-color: @primaryLighterStill;

Message user block:[/size]

.staff .messageUserBlock {
background-color: @primaryLightish;

Avatar holder:[/size]

.staff .avatarHolder {
background-color: @primaryLighter !important;

.staff .messageUserBlock {
background-color: @primaryLightish;
border-color: @primaryLightish;

.staff .messageUserBlock .arrow {
border-left-color: @primaryLightish;

.staff .messageUserBlock .arrow span {
border-left-color: @primaryLighter;

Combining all of the above elements gives the following effect.


Posted Image Posted Image