• ¡Bienvenido a XenFácil!

    Estás viendo el sitio como Invitado. Para poder participar en este sitio

    y obtendrás privilegios adicionales, acceso a otras áreas y mucho mas.

    ¡Es gratis!


    ¿Ya eres miembro? Inicia sesión

Mod.Plantilla Cómo añadir imágenes de nieve a la barra de navegación

lms

Administrador
#1
La clase helper está por defecto en la plantilla navigation en Beta 4.
Si ejecutas Beta 3 o menor versión, debes añadirlo añadiendo un spam casi al final y dejarlo como sigue:
Busca esto al final de la plantilla
Insertar CODE, HTML o PHP:
</div>
        </nav>
    </div>
</div>
Y reemplázalo con esto:
Insertar CODE, HTML o PHP:
</div>
<span class="helper"></span>
        </nav>
    </div>
</div>
Tras ello, añade este CSS relevante en la plantilla EXTRA.css como sigue..
Necesitas cambiar los atributos para que se adapten a la imagen que uses.
También necesitas cambiar la ruta de la imagen si no lo colocas en el directorio predeterminado styles.

Para añadir la imagen a la izquierda, añade esto a la plantilla EXTRA.css:
Insertar CODE, HTML o PHP:
#navigation .helper {

background: transparent url(styles/default/shelley_snow_l.png) no-repeat;
display: block;
height: 25px;
left: -5px;
position: absolute;
top: -16px;
width: 250px;
}
Te quedará así:
Para añadir una imagen a la derecha y a la izquierda, añade esto a EXTRA.css:
Insertar CODE, HTML o PHP:
#navigation .helper {
background: url(styles/default/shelley_snow_l.png) no-repeat 0% 0%, url(styles/default/shelley_snow_r.png) no-repeat 100% 0%;
display: block;
height: 25px;
left: -5px;
padding: 0px 5px;
position: absolute;
top: -16px;
width: 100%;
}
Te quedará así:
Para añadir la imagen a la izquierda, centro e izquierda, añade esto a EXTRA.css:
Insertar CODE, HTML o PHP:
#navigation .helper {
background: url(styles/default/shelley_snow_l.png) no-repeat 0% 0%, url(styles/default/shelley_snow_c.png) no-repeat 50% 0%, url(styles/default/shelley_snow_r.png) no-repeat 100% 0%;
display: block;
height: 25px;
left: -5px;
padding: 0px 5px;
position: absolute;
top: -16px;
width: 100%;
}
Cuyo resultado es:
Los gráficos adjuntos han sido creados por Shelley y nos ha permitido amblemente reutilizarlos.

Artículo en inglés Por Brogan

Salud2
 

Adjuntos

lms

Administrador
#3
Si usamos @imagePath y colgamos una carpeta navidad (en este caso) en cada carpeta de estilo con las imágenes del primer post, el código vale para cualquier estilo que haya instalado.
Quedaría el código para las imágenes izquierda, centro y derecha así:
Insertar CODE, HTML o PHP:
#navigation .helper {
background: url(@imagePath/xenforo/navidad/shelley_snow_l.png) no-repeat 0% 0%, url(@imagePath/xenforo/navidad/shelley_snow_c.png) no-repeat 50% 0%, url(@imagePath/xenforo/navidad/shelley_snow_r.png) no-repeat 100% 0%;
display: block;
height: 25px;
left: -5px;
padding: 0px 5px;
position: absolute;
top: -16px;
width: 100%;
}
Salud2
 

lms

Administrador
#7
Según Brogan está. No voy a discutirlo cuando funciona y además indica como añadirlo en la betas anteriores a la 4.

Si ves como se añade, está claro que está implementada en la plantilla en algún lugar.

Salud2
 

lms

Administrador
#9
Justo abajo del todo de la plantilla navigation tienes:
Insertar CODE, HTML o PHP:
</div>

<span class="helper"></span>

        </nav>
    </div>
</div>
Salud2
 

lms

Administrador
#15
Para quitarlos solo hemos de "revertir"?
:D
No, sólamente comentar el css. Quedaría así:
Rich (BB code):
/*#navigation .helper {
background: url(@imagePath/xenforo/navidad/shelley_snow_l.png) no-repeat 0% 0%, url(@imagePath/xenforo/navidad/shelley_snow_c.png) no-repeat 50% 0%, url(@imagePath/xenforo/navidad/shelley_snow_r.png) no-repeat 100% 0%;
display: block;
height: 25px;
left: -5px;
padding: 0px 5px;
position: absolute;
top: -16px;
width: 100%;
}*/
Salud2
 
Arriba