Download | Liam Buckle | Antonio Cayonne

Jump to content

Foto

Estilos de Grupos


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

#1
Enigma

Enigma
  • Título: 🔨 The Judger 🔨
  • Grupo: Membros Veteranos
  • Membro n°: 4
  • Respostas: 7.703
  • Reputação: 2.565
  • Tópicos: 5.733
  • Fãn Desde: 03 Jun 2012
  • País: País
  • Clube: Clube
  • Masculino
  • Local: WB Bunker

Humor actual: Insomnious

...:::Prémios:::...

           
Contribuidor
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.
display-styling-priority.png
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
[/size]

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]
user-name-basic-css.png
The user names of any members in the Administrative user group will then appear in thread posts as follows.
mui-block-user-name-basic-styling.png
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.
 user-name-advanced-css.png 
The result is as shown below.
 mui-block-user-name-advanced-styling.png 
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.
user-title-basic-css.png
With the user title appearing as follows.
mui-block-user-title-basic-styling.png
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.

Code:
.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.
mui-block-user-title-advanced-styling.pn
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]

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

Code:
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-members-online-now.png
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]

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

Post background:[/size]

Code:
.staff .messageContent {
background-color: @primaryLighterStill;
}
staff-message-background.png

Message user block:[/size]

Code:
.staff .messageUserBlock {
background-color: @primaryLightish;
}
staff-mui-block-basic.png

Avatar holder:[/size]

Code:
.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;
}
staff-mui-block-advanced.png

Combining all of the above elements gives the following effect.

staff-styling.png

v3n3HEw.gif