Agregar iconos personalizados a los foros

Hola,

Debido a que esta mejora es muy demandada pasare a explicar paso a paso el procedimiento para personalizar nuestro foro con nuestros propios iconos personalizados en los foros, ejemplo:

1. Lo primero será crear nuestras propias imágenes o bien buscar en internet las que nos gusten pero estas deben tener una medida no más grande a 20px de ancho y 20px de alto y si son más grandes lo que pueden hacer es editarla ya sea en Adobe Photoshop o bien en algún otro programa de edición de imagen.

2. Una ves creadas las imágenes subanlas a el root de su foro en este caso a la carpeta images y creen dentro de ella una nueva carpeta llamada forum-icons que ahí es donde guardaran sus imágenes personalizadas.

3. Ahora agregaremos una modificación a la plantilla display_Forums_item que la encontramos en AdminCP -> Estilos & Plantillas -> Gestor de estilos -> Editar Plantilla -> Y dan doble click en Display templates.

4. Búscan esta línea

Código:

class="forum-item {vb:raw forumCssPrefix} forum-item{vb:raw forumStatus}"

Para versiones vB 5.4.x buscar la siguiente línea:

Código:

class="forum-item {vb:raw forumCssPrefix}" id="forum{vb:raw forum.nodeid}" data-channel-id="{vb:raw forum.nodeid}"

y la remplazan por esta otra

Código:

class="forum-item {vb:raw forumCssPrefix} forum-item{vb:raw forumStatus} iconclass{vb:raw forum.nodeid}"

5. Ahora es tiempo de identificar los ids de los nodes que sería los ids de los foros, para ello van abren una pestaña nueva en su navegador ya sea firefox, crhome u otro que usen y entran nuevamente a su AdminCP y se van a gestor de Foros, ahora le dan clic a Channel manager o gestor de canales y les aparecerá su listado de foros lo que nos interesa es el Node ID como en la siguiente imagen:

Ahí tenemos el ID 31 que corresponde al ID del Node de Tips y tutoriales.

6. Ahora vamos nuevamente al gestor de estilos en nuestro AdminCP -> Estilos& Plantillas -> Gestor de estilos -> Editar plantilla -> Clic en CSS Templates -> Abren el css_additional.css y pegamos nuestro siguiente código

Código:

/* forum icon for forums with no new posts */
.forum-list-container .forum-item.iconclassXXX .cell-forum .icon {
background: transparent url("http://yoursite.com/forum/images/css/car-old2.png") no-repeat;
}

/* forum icon for forums with new posts */
.forum-list-container .forum-item.new.iconclassXXX.cell-forum .icon {
background: transparent url("http://yoursite.com/forum/images/css/car-new3.png") no-repeat;
}

¿Se recuerdan del {vb:raw forum.nodeid}?, pues bien, esa variable nos servira para identificar los IDs de los Nodes e imprimirlos en la plantilla display_Forums_item que editamos al comienzo, en donde se observa en rojo es donde colocaremos los ID de los nodes en nuestro caso identificamos el node de nuestro foro de tips y tutoriales que en este caso era el numero 31 asi que en lugar de las tres equis le agregamos el 31 quedando el código de la siguente manera

Código:

/* forum icon for forums with no new posts */
.forum-list-container .forum-item.iconclass31 .cell-forum .icon {
background: transparent url("https://vbforos.net/images/forum-icons/tu-icono-old.png") no-repeat;
}

/* forum icon for forums with new posts */
.forum-list-container .forum-item.new.iconclass31 .cell-forum .icon {
background: transparent url("https://vbforos.net/images/forum-icons/tu-icono-new.png") no-repeat;
}

Para seguir agregando iconos personalizados a su foro deben seguir los pasos 5 y 6 hasta dar por finalizado su personalización, espero que el tutorial les sea de utilidad y disculpen por si no entendieran algo pero es que soy pésimo explicando, a mi me gusta más poner en practica las cosas

Anuncio

Dejar un comentario:

Dejar un comentario:

Dejar un comentario:

Agregar iconos personalizados a los foros