• ¡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

lms

Administrador
Mensajes
7.741
Puntuación de reacciones
2.163
Puntos
2.613
Sitio web
xenfacil.com
País
España
Versión de XenForo
2.1.x
PayPal
Donar dinero a este usuario
Página web
Web
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í:
35297631.png
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í:
60080633.png
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:
27077619.png
Los gráficos adjuntos han sido creados por Shelley y nos ha permitido amblemente reutilizarlos.

Artículo en inglés Por Brogan

Salud2
 

Adjuntos

  • shelley_snow_c.png
    shelley_snow_c.png
    1,5 KB · Visitas: 15
  • shelley_snow_l.png
    shelley_snow_l.png
    2,7 KB · Visitas: 13
  • shelley_snow_r.png
    shelley_snow_r.png
    1,6 KB · Visitas: 13
descaro

descaro

Activo
Mensajes
353
Puntuación de reacciones
129
Puntos
43
es una idea para ir decorando santa2.gif navideñamente nuestras webs.. gracias lms .. nos ponemos a tono :)

05-12-2010 14-14-47.jpg​
 
lms

lms

Administrador
Mensajes
7.741
Puntuación de reacciones
2.163
Puntos
2.613
Sitio web
xenfacil.com
País
España
Versión de XenForo
2.1.x
PayPal
Donar dinero a este usuario
Página web
Web
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
 
Patricks Galvis

Patricks Galvis

Miembro
Mensajes
32
Puntuación de reacciones
11
Puntos
8
a que te refieres con que La clase helper está por defecto en la plantilla navigation en Beta 4??? no entendi...
 
lms

lms

Administrador
Mensajes
7.741
Puntuación de reacciones
2.163
Puntos
2.613
Sitio web
xenfacil.com
País
España
Versión de XenForo
2.1.x
PayPal
Donar dinero a este usuario
Página web
Web
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

lms

Administrador
Mensajes
7.741
Puntuación de reacciones
2.163
Puntos
2.613
Sitio web
xenfacil.com
País
España
Versión de XenForo
2.1.x
PayPal
Donar dinero a este usuario
Página web
Web
Justo abajo del todo de la plantilla navigation tienes:
Insertar CODE, HTML o PHP: 
</div>

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

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

Salud2
 
lms

lms

Administrador
Mensajes
7.741
Puntuación de reacciones
2.163
Puntos
2.613
Sitio web
xenfacil.com
País
España
Versión de XenForo
2.1.x
PayPal
Donar dinero a este usuario
Página web
Web
Me alegro de que se solucionara.

Salud2
 
Galli

Galli

Nuevo
Mensajes
16
Puntuación de reacciones
1
Puntos
3
exelente !! me viene al pelo y combina con la de los avatares. gracias
 
lms

lms

Administrador
Mensajes
7.741
Puntuación de reacciones
2.163
Puntos
2.613
Sitio web
xenfacil.com
País
España
Versión de XenForo
2.1.x
PayPal
Donar dinero a este usuario
Página web
Web
AppleTree dijo:
Para quitarlos solo hemos de "revertir"?
:D
Hacer clic para expandir...
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
 
AppleTree

AppleTree

Activo
Mensajes
199
Puntuación de reacciones
31
Puntos
28
... q torpe fuí, era de lógica!!.
Gracias nuevamente, master!
 
Hay que estar conectado o registrado para responder aquí.
Arriba