Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje24-12-2011, 13:31 (UTC)    
Título del mensaje: [CSS] Imagen antes de cada categoria - Extra Foro

Definitivamente este si es mi regalo de navidad Recorriendo el foro de Noticias, en el post de las llegada de los rangos había contestado una vez a un user como poner rangos en el extra foro, muchos de ustedes han visitado este post:
http://www.paginawebgratis.es/forum/viewtopic.php?t=62487

Mirando ese código se me ocurrió poner una imagen para cada categoría y bueno me salio esto:


Bueno los códigos son simples, primero que nada los códigos deben ser pegados en Extra Foro => Opciones => Texto que va por encima del foro.
Si tienen activado el extra pueden entrar directamente haciendo clic en el siguiente link:
http://www.paginawebgratis.es/extras.php?extra=forum

Bueno pasaremos a los códigos, primero que nada este codigo no debe ser eliminado jamas y deben ser pegados entre las etiquetas <style></style>
Código:
.cat:link, .cat:visited {padding-left:25px;padding-top:9px;}


Ahora pasaremos ha poner la imagen a nuestra categoria para eso usaremos este codigo:
Cita:
/*NOMBRE DE LA CATEGORIA*/
td[width="300"] a[href="cat-1-URL DELA CATEGORIA.htm"]{
margin:0;
background : transparent url("URL DE LA IMAGEN") no-repeat scroll 3px 9px;}

Lo que esta marcado en Color Rojo es la url de la categoria pero OJO solo la TERMINANCION para eso creamos nuestra categoria y una vez guardados los cambios ingresamos a nuestro foro he ingresamos a nuestra categoria y una vez que entramos vemos la url de la categoria y copiamos la ultima parte lo que marque en negrita.
tuweb.es.tl/Foro/cat-1-tucategoria.htm
Lo que esta marcado en Color Azul es la url de nuestra imagen.

Por ejemplo, al crear nuestra categoria la llamamos Facebook y queremos poner esta imagen el codigo quedaria de la siguiente manera:
Cita:
/*FACEBOOK*/
td[width="300"] a[href="cat-1-Facebook.htm"]{
margin:0;
background : transparent url("http://cdn2.iconfinder.com/data/icons/deadsimple/facebook.gif") no-repeat scroll 3px 9px;}


y hacemos lo mismo con las demas categorias, recuerden que para agregar mas imagenes a las categorias solos debemos agregar nuevamente el codigo que les deje al principio.

Vista Previa Online:
http://design-pwg.es.tl/Foro/index.htm

Recuerden que los codigos deben estar con las etiquetas:
Código:
<style> CODIGOS</style>


Saludos!
Moderador Design-PWG.
______________

10 años ayudando a PWG.

Soporte PWG: ayuda@paginawebgratis.es
Reportes: support-es@webme.com


Ultima edición por design-pwg el Sab Dic 24, 2011 10:16 am; editado 3 veces
Mensaje24-12-2011, 13:40 (UTC)    
Título del mensaje:

Uuh extraordinario
______________
[img[/img:872askjd]
Mensaje24-12-2011, 13:47 (UTC)    
Título del mensaje:

Esta bueno, no sabia que se podia hacer eso.

Saludos

S.M.W - S.N.E.S
______________


Super Mario la lleva, es lo mejor en Videojuegos, se los recomiendo
Mensaje24-12-2011, 13:48 (UTC)    
Título del mensaje:

Bueno ese tuto, ahora mismo voy a hacer eso en mi Foro

Saludos
______________

Nuevo Foro Interno: http://donkey-kong-country.es.tl/Foro/index.htm
Mensaje24-12-2011, 14:28 (UTC)    
Título del mensaje:

Muchisimas gracias por todos los comentarios, espero verlos en sus foros.
______________

10 años ayudando a PWG.

Soporte PWG: ayuda@paginawebgratis.es
Reportes: support-es@webme.com
Mensaje24-12-2011, 14:42 (UTC)    
Título del mensaje:

Esta muy bueno , Exelente! 10/10!
Mensaje24-12-2011, 15:36 (UTC)    
Título del mensaje:

Buenísimo el tutorial compadre. Pero tengo una duda al respecto.

Y si modifico el width de mi foro? Debo colocar ese mismo width en el código que nos entregaste, o funciona igual?

Saludos, excelente tutorial
______________
ModaPWG - Formando real opinión: Pronto el mejor sitio web de PWG, con contenido exclusivo y original, y un diseo fenomenal. Shinox está de vuelta, pronto sabrán de mí

Saluda cordialmente,
Santiago Chiong
❂ Webmaster
❂ Diseñador Gráfico
❂ santiago.chiong(@)gmail.com
❂ Si deseas saber de mí, ingresa a http://modapwg.es.tl/ y lee el home.

Antes conocido como ShinoxAyuda - ShinoxWebRox - YonkoChileWebRox - Plan-Ejercicio (todos .es.tl) y ArkAngel - (Admin NixoForo)
Mensaje24-12-2011, 15:44 (UTC)    
Título del mensaje:

modapwg escribió:
Buenísimo el tutorial compadre. Pero tengo una duda al respecto.

Y si modifico el width de mi foro? Debo colocar ese mismo width en el código que nos entregaste, o funciona igual?

Saludos, excelente tutorial


No, no pasa nada ya que es el que viene por defecto en el extra.

Saludos y Gracias por el comentario!
______________

10 años ayudando a PWG.

Soporte PWG: ayuda@paginawebgratis.es
Reportes: support-es@webme.com
Mensaje24-12-2011, 16:27 (UTC)    
Título del mensaje: boo !

exelente trabajo
______________
WebTwo de RadioVijaer.
Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group