4 April 2018, 21:32
3
En esta guía voy a dejar la manera de crear un menú que siempre este disponible para el usuario y una cómoda navegación, debido a que me lo ha preguntado muchas veces.
La guía es para el tema default de mybb, pero aplica lo mismo para todos.
1.- Localizamos el id de nuestra barra de navegacion del usuario, en este caso es:
#panel y casi siempre es el mismo, de lo contrario ver en mi plantilla header cual seria el correcto.
Y agregaremos en nuestro global este estilo, si existe simplemente lo cambiamos por este:
Pero si no, que es lo normal simplemente agregamos esto:
2.- Localizamos en nuestro global el identificador logo
Y le agregamos un margen adecuado, por defecto son 80px de altura, habría que ver su imagen logo para ver sus dimensiones y de ahi basarse:
Yo agregaré que me deje un margen de 80px y que me elimine el borde que iba a dar con la parte de el menú de usuario que subimos, quedando de este modo:
Listo guardamos la hoja de estilo y probamos.
Es simple y sencillo, porque de este modo las partes que requieren alguna estillización extra como el editor en modo full deben acomodarse perfectamente si lo acomodamos de este modo únicamente ya que no romperemos herencias ni nada por el estilo y se super pondrán los elementos para el funcioamiento adecuado.
Esto sería todo
Simple y sencillo y el resultado es este:
La guía es para el tema default de mybb, pero aplica lo mismo para todos.
1.- Localizamos el id de nuestra barra de navegacion del usuario, en este caso es:
#panel y casi siempre es el mismo, de lo contrario ver en mi plantilla header cual seria el correcto.
Y agregaremos en nuestro global este estilo, si existe simplemente lo cambiamos por este:
Pero si no, que es lo normal simplemente agregamos esto:
Código: ( Seleccionar Todo )
#panel{
position: fixed;
top: 0;
margin: auto auto;
}
2.- Localizamos en nuestro global el identificador logo
Código: ( Seleccionar Todo )
#logo {
background: #fff;
padding: 10px 0;
border-bottom: 1px solid #263c30;
}
Y le agregamos un margen adecuado, por defecto son 80px de altura, habría que ver su imagen logo para ver sus dimensiones y de ahi basarse:
Yo agregaré que me deje un margen de 80px y que me elimine el borde que iba a dar con la parte de el menú de usuario que subimos, quedando de este modo:
Código: ( Seleccionar Todo )
#logo {
background: #fff;
padding: 10px 0;
margin-top: 80px;
}
Listo guardamos la hoja de estilo y probamos.
Es simple y sencillo, porque de este modo las partes que requieren alguna estillización extra como el editor en modo full deben acomodarse perfectamente si lo acomodamos de este modo únicamente ya que no romperemos herencias ni nada por el estilo y se super pondrán los elementos para el funcioamiento adecuado.
Esto sería todo
Simple y sencillo y el resultado es este:
Última modificación: 5 April 2018, 03:02 por Whiteneo.