Muchas veces queremos mostrar el nombre de usuario utilizando la variable de sustitución “APP_USER” y nos encontramos que se muestra siempre en mayúsculas.
Como lo podemos visualizar en este ejemplo:
A suerte de muchos tenemos una clase CSS que nos permite colocar el username en minúscula en la barra de navegación.
Ahora muchos se preguntarán de donde sale esta clase y donde debemos colocarla?
Si inspeccionamos la página, más concretamente el elemento de lista, con las herramientas web de nuestro navegador, podemos ver lo siguiente:
No tenemos asignada ninguna clase CSS en el elemento de lista del username.
Si abrimos el template que usamos para la barra de navegación “Links Link” podemos ver que tiene tres atributos opcionales:
#A01# => Badge Value
#A02# => Link Attributes
#A03# => List Item CSS Classes
Veamos el código del template “List Template Current”
<li class="t-LinksList-item is-current #A03#"><a href="#LINK#" class="t-LinksList-link" #A02#> <span class="t-LinksList-icon"><span class="t-Icon #ICON_CSS_CLASSES#"></span></span> <span class="t-LinksList-label">#TEXT#</span><span class="t-LinksList-badge">#A01#</span></a></li>
En la opción #A02# podemos colocar un estilo CSS para el enlace.
Entonces vamos a ir a nuestra lista de la barra de navegación en nuestra aplicación:
Hacemos clic en el enlace &APP_USER.
Nos dirigimos a la sección “User Defined Attributes” y en el recuadro 2. List Item CSS Classes ingresamos: has-username
Aplicamos los cambios.
Ejecutamos la aplicación y podemos ver que el nombre de usuario ahora aparece en minúsculas.
Volvemos a inspeccionar la página con la herramienta web, y podemos ver la clase has-username, entonces estamos forzando la minúscula con esta clase CSS:
La clase has-username es una clase del core del tema Universal 42 referente al NavigationBar.css
Entonces si queremos mantener el username en mayúscula debemos eliminar la clase CSS has-username del atributo #A02# de la entrada de lista, en caso contrario la mantenemos en la entrada de lista deseada.
Espero esto sea de ayuda!