Esta guía está elaborada para usuarios que desean mejorar el encabezado de su sitio añadiendo enlaces, iconos o menús. Tanto si utiliza componentes de temas sencillos como si opta por personalizaciones más intrincadas, este manual proporciona instrucciones claras paso a paso para ayudarle a realizar los cambios deseados, independientemente de su nivel de conocimientos técnicos.
Nivel de usuario requerido: Administrador
La forma fácil (Componentes de temas)
Cada componente de tema es diferente, así que lea los temas relacionados con los diversos componentes antes de elegir el que mejor se adapta a su sitio.
-
Custom Header Links crea un menú dentro del encabezado, junto a la lupa
-
Custom Header Links (icons) crea iconos en los que se puede hacer clic junto a la lupa
-
Brand Header crea un menú encima del encabezado
-
Header Submenus crea un menú encima del encabezado con submenús
Cada componente se puede personalizar aún más en una hoja de estilo separada para que, cuando se actualicen los componentes, sus cambios no se sobrescriban. Todo lo que necesita saber es un poco de CSS y podrá diseñar su encabezado como prefiera.
La ventaja de estas soluciones es que todos estos componentes son gestionados, mantenidos y actualizados por el equipo de Discourse y ya funcionan para dispositivos móviles.
La forma difícil
Cree sus propias personalizaciones.
Para hacerlo, deberá leer al menos la Beginner's guide to using Discourse Themes y la Developing Discourse Themes & Theme Components.
Una vez que se familiarice con los temas de Discourse, puede empezar a crear el suyo.
Pruébalo
Seleccione la pestaña common y luego añada su HTML personalizado en la pestaña Before Header. Las pestañas desktop y mobile también están disponibles bajo el interruptor “Show Advanced” si necesita personalizaciones específicas de la plataforma, pero se recomienda common como punto de partida.
Como ejemplo, puede empezar a añadir la parte HTML de su menú en la pestaña Before Header
<div>
<span id="top-navbar-links">
<a href="http://example.com">Home</a>
<a href="http://example.com/about/">About</a>
<a href="http://example.com/news/">News</a>
<a href="http://example.com/products/">Products</a>
<a href="http://blog.example.com/blog">Blog</a>
<a href="http://forums.example.com/">Forums</a>
</span>
</div>
Esto creará su menú básico:
Ahora puede añadir el CSS apropiado para dar estilo al encabezado.
Añada su CSS en la pestaña CSS, ej.
//Alinear el menú con el logotipo del sitio
#top-navbar {
margin-right: auto;
margin-left: auto;
margin-top: 10px;
max-width: 1110px;
//Puede mover el menú a la izquierda, al centro o a la derecha
text-align: center;
}
Y empiece a personalizar su menú:
#top-navbar-links a {
font-size: larger;
color: #CD0604;
border-top: 1px solid;
border-bottom: 1px solid;
padding: 0 3px;
margin-right: 10px;
//y así sucesivamente
}
Consejos y trucos
Mostrar su menú solo a los visitantes (o solo a los usuarios registrados)
Puede mostrar el menú solo a los visitantes no registrados y ocultarlo a los usuarios registrados.
Simplemente añada este display: none; dentro de su CSS
#top-navbar {
[...]
display: none;
}
y añada una nueva regla:
.anon #top-navbar {
display: block;
}
Puede hacer lo contrario invirtiendo las reglas de la propiedad display:
#top-navbar {
[...]
display: block;
}
.anon #top-navbar {
display: none;
}
De esta forma solo los usuarios ya registrados verán el menú
Mostrar su menú solo a los miembros de un grupo
¡Esto solo funcionará para los grupos primarios!
body:not(.primary-group-GROUP-NAME) #top-navbar {
display: none;
}
Cambie GROUP-NAME por el nombre del grupo que podrá ver el menú.
Abrir enlaces en una pestaña externa
En su código HTML añada la propiedad
target="_blank"
Por ejemplo:
<div>
<span id="top-navbar-links">
<a href="http://example.com" target="_blank">Home</a>
[...]
</span>
</div>
Recuerde que los enlaces internos están permitidos (incluso usando rutas relativas) y que también pueden abrirse en pestañas externas.
<div>
<span id="top-navbar-links">
[...]
<a href="/c/site-feedback" target="_blank">Forums</a>
</span>
</div>
Temas relacionados: