Advertisement:

Author Topic: [TUT!] CBI (Custom Board Icons) personalizado !!  (Read 65066 times)

Offline #jsDotx3

  • Full Member
  • ***
  • Posts: 532
  • Gender: Male
  • Think Different
    • jsDotx3 on GitHub
    • @jsDotx3 on Twitter
    • K! Mundo
[TUT!] CBI (Custom Board Icons) personalizado !!
« on: May 13, 2009, 09:13:43 PM »
[TUT!] CBI (Custom Board Icons) con una personalización extra

Para empezar, necesitaremos el archivo BoardIndex.template.php de nuestro tema, buscamos desde el siguiente código:

Code: [Select]
/* Each board in each category's boards has:
new (is it new?), id, name, description, moderators (see below), link_moderators (just a list.),
children (see below.), link_children (easier to use.), children_new (are they new?),
topics (# of), posts (# of), link, href, and last_post. (see below.) */

Hasta el siguiente código dado:

Code: [Select]
// Has it outstanding posts for approval?
Remplazaremos el desde - hasta códigos dados por el siguiente:

Quote
 /* Each board in each category's boards has:
	
	
	
new (is it new?), id, name, description, moderators (see below), link_moderators (just a list.),
	
	
	
children (see below.), link_children (easier to use.), children_new (are they new?),
	
	
	
topics (# of), posts (# of), link, href, and last_post. (see below.) */
	
	
	
foreach (
$category['boards'] as $board)
	
	
	
{
	
	
	
	
echo 
'
	
	
	
	
<tr id="board_'
$board['id'], '" class="windowbg2">';
	
	
	
	

	
	
	
	
 
$imagen_foro['local_url'] = $settings['theme_dir'].'/iconos/';
 
$imagen_foro['web_url'] = $settings['theme_url'].'/iconos/';
 
 if(
file_exists($imagen_foro['local_url'].''.(int)$board['id'].'.png'))
  
$imagen_foro['on'] = $imagen_foro['web_url'].''.(int)$board['id'].'.png';
 else
  
$imagen_foro['on'] = $imagen_foro['web_url'].'on.gif';
 
 if(
file_exists($imagen_foro['local_url'].''.(int)$board['id'].'.png'))
  
$imagen_foro['off'] = $imagen_foro['web_url'].''.(int)$board['id'].'.png';
 else
  
$imagen_foro['off'] = $imagen_foro['web_url'].'off.gif';
  echo 
'';
	
	
	
	
// If the board or children is new, show an indicator.
	
	
	
	
if (
$board['new'] || $board['children_new'])
	
	
	
	
	
echo 
'
	
	
	
	
	

	
	
	
	
	
<td class="icon icono_on"'
, !empty($board['children']) ? ' rowspan="2"' '''>
	
	
	
	
	
	
<a href="'
, ($board['is_redirect'] || $context['user']['is_guest'] ? $board['href'] : $scripturl '?action=unread;board=' $board['id'] . '.0;children'), '">
	
	
	
	
	
	
	
<img src="'
.$imagen_foro['on'].'" alt="'$txt['new_posts'], '" title="'$txt['new_posts'], '" /></a></td>';
	
	
	
	

	
	
	
	
// Is it a redirection board?
	
	
	
	
elseif (
$board['is_redirect'])
	
	
	
	
	
echo 
'
	
	
	
	
	
<td class="icon windowbg"'
, !empty($board['children']) ? ' rowspan="2"' '''>
	
	
	
	
	
	
<a href="'
, ($board['is_redirect'] || $context['user']['is_guest'] ? $board['href'] : $scripturl '?action=unread;board=' $board['id'] . '.0;children'), '">
	
	
	
	
	
	
<img src="'
$settings['images_url'], '/'$context['theme_variant_url'], 'redirect.png" alt="*" title="*" /></a></td>';

	
	
	
	
// No new posts at all! The agony!!
	
	
	
	
else
	
	
	
	
	

	
	
	
	
	
echo 
'
	
	
	
	
	
<td class="icon icono_off"'
, !empty($board['children']) ? ' rowspan="2"' '''>
	
	
	
	
	
	
<a href="'
, ($board['is_redirect'] || $context['user']['is_guest'] ? $board['href'] : $scripturl '?action=unread;board=' $board['id'] . '.0;children'), '">
	
	
	
	
	
	
<img src="'
.$imagen_foro['off'].'" alt="'$txt['old_posts'], '" title="'$txt['old_posts'], '" /></a></td>';

	
	
	
	
echo 
'
	
	
	
	
	
<td class="info windowbg2" width="40%">
	
	
	
	
	
	
<a class="subject" href="'
$board['href'], '" name="b'$board['id'], '">'$board['name'], '</a>';

Luego crearemos en la carpeta del tema actual una carpeta llamada iconos donde adentro deben ir las imagenes de cada foro y esto se hace por id, veamos un ejemplo claro.

Deseo poner icono personalizado a Discusión General, su id es 2 lo sabemos por lo siguiente http://www.skinmod.eu/index.php?board=2.0 ese número indica la id del foro y con el entonces nombramos la imagén que deseo que aparezca en ese foro con el nombre de 2.png. Luego así con cada sección.

Pero antes, necesitaremos agregar esto a nuestro css/index.css

Code: [Select]
.icono_on{
   background-color: #D3FFC8;
}

.icono_off{
   background-color: #F9FFD7;
}

Si deseamos un mejor estilo con CSS3 y degradados, ponemos en vez de lo anterior esto:
Code: [Select]
.icono_on{
background: #a9db80; /* Old browsers */
background: -moz-linear-gradient(top, #a9db80 0%, #96c56f 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a9db80), color-stop(100%,#96c56f)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #a9db80 0%,#96c56f 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #a9db80 0%,#96c56f 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #a9db80 0%,#96c56f 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9db80', endColorstr='#96c56f',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #a9db80 0%,#96c56f 100%); /* W3C */
}

.icono_off{
background: #e5e696; /* Old browsers */
background: -moz-linear-gradient(top, #e5e696 0%, #d1d360 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e5e696), color-stop(100%,#d1d360)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #e5e696 0%,#d1d360 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #e5e696 0%,#d1d360 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #e5e696 0%,#d1d360 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e696', endColorstr='#d1d360',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #e5e696 0%,#d1d360 100%); /* W3C */
}

Listo, estaremos completo y obtendremos como mostre arriba. Agradecimientos a @WHK por que brindo el código en su comunidad que tenía anteriormente.

Saludos, JSX3.
« Last Edit: April 01, 2014, 07:55:57 PM by JSX3 »

Solved
(Life would be easy with a simple solution.)

Offline mirahalo

  • SMF Hero
  • ******
  • Posts: 7,692
Re: [Manual] cBi (Custom Board Icons)
« Reply #1 on: May 14, 2009, 01:14:10 PM »
muy buen manual, pero creo que debería de ir en el subforo Tutoriales.

 ;)

Offline Kiel D-04

  • Sr. Member
  • ****
  • Posts: 939
  • Gender: Male
  • El Dios del Nuevo Mundo
Re: [Manual] cBi (Custom Board Icons)
« Reply #2 on: May 14, 2009, 04:01:19 PM »
Muy bueno el tuto jeje
:)

Offline #jsDotx3

  • Full Member
  • ***
  • Posts: 532
  • Gender: Male
  • Think Different
    • jsDotx3 on GitHub
    • @jsDotx3 on Twitter
    • K! Mundo
Re: [Manual] cBi (Custom Board Icons)
« Reply #3 on: May 14, 2009, 04:39:16 PM »
muy buen manual, pero creo que debería de ir en el subforo Tutoriales.

 ;)
No sabía donde ponerlo, contactaré con NIBOGO o algún MOD de castellano y veo la posibilidad ;)!.

Solved
(Life would be easy with a simple solution.)

Offline SPerroud

  • Full Member
  • ***
  • Posts: 542
  • Gender: Male
  • 4 years in SMF
    • DarkDog Studios
Re: [Manual] cBi (Custom Board Icons)
« Reply #4 on: May 14, 2009, 08:30:21 PM »
Buen tuto, ya se acabaran los post "Problema con CBI" xDD

Saludos y gracias
Version SMF: 1.1.11
Theme: Black Default Theme for SMF
CMS (Portal): TinyPortal v0.9.8

- Deja siempre tu versión del foro y el tema que usas para ayudarte mejor.

Preguntas Frecuentes: SMF FAQ


Offline kenet

  • SMF Hero
  • ******
  • Posts: 3,007
  • Gender: Male
    • Skinmod
Re: [Manual] cBi (Custom Board Icons)
« Reply #6 on: May 18, 2009, 02:52:09 PM »
valele para la RC1?

por lo que veo solo pone 2.0 Beta 3.1 Public, aunque editandolo manualmete no creo que tenga problemas.

si algien lo tiene instalado en la RC1  que me lo postee aqui.

saludos


Thomas Alva Edison dijo:

    "No fracasé, sólo descubrí 999 maneras de como no hacer una bombilla."


Offline SPerroud

  • Full Member
  • ***
  • Posts: 542
  • Gender: Male
  • 4 years in SMF
    • DarkDog Studios
Re: [Manual] cBi (Custom Board Icons)
« Reply #7 on: May 18, 2009, 04:57:30 PM »
Si, creo que la instalacion manual es la misma o.O
Version SMF: 1.1.11
Theme: Black Default Theme for SMF
CMS (Portal): TinyPortal v0.9.8

- Deja siempre tu versión del foro y el tema que usas para ayudarte mejor.

Preguntas Frecuentes: SMF FAQ


Offline BOMBERO

  • Semi-Newbie
  • *
  • Posts: 85
  • Gender: Male
    • @@estilosmac on Twitter
    • EstilosMac
Re: [Manual] cBi (Custom Board Icons)
« Reply #9 on: May 23, 2009, 01:54:13 PM »
magnifico mods...cada dia estoy mas sorprendido con smf, ya que yo vengo de tener varios foros ya, unos con xoops otros con nuke y otros con phpbb y me alegro enormemente de haber conocido este, ya que hay una diferencia enorme tanto a la hora de administrar, como a la hora de instalar mods, es increible lo facil que es y la cantidad de trabajo que nos ahorra.
En la actualidad estoy traspasando el foro que tengo a smf asi que esto va para largo, lastima que las tablas de la db no sean las mismas ya que perderé muchísima información....

NOTA: Por casualidad no existirá algo que pueda convertir de xoops a smf??  mil gracias a todos los que haceis posible esta comunidad.... un abrazo.

el foro que quiero traspasar es http://www.clubterracan.net si alguien puede ayudarme se lo agradeceria muchisimo... ;D
« Last Edit: May 24, 2009, 07:50:54 AM by BOMBERO »

Offline mirahalo

  • SMF Hero
  • ******
  • Posts: 7,692
Re: [Manual] cBi (Custom Board Icons)
« Reply #10 on: May 23, 2009, 11:38:27 PM »
hola bombero, por favor no escribas en rojo ;) y en cuanto a xoops, actualmente existe un puente para unir xoops con tu foro smf


http://download.simplemachines.org/?bridges


SMF 1.1 Xoops 2.0.x Bridge 1.1 beta 2


http://www.simplemachines.org/community/index.php?topic=173730.0

saludos !

Offline BOMBERO

  • Semi-Newbie
  • *
  • Posts: 85
  • Gender: Male
    • @@estilosmac on Twitter
    • EstilosMac
Re: [Manual] cBi (Custom Board Icons)
« Reply #11 on: May 24, 2009, 07:52:44 AM »
hola bombero, por favor no escribas en rojo ;) y en cuanto a xoops, actualmente existe un puente para unir xoops con tu foro smf


http://download.simplemachines.org/?bridges


SMF 1.1 Xoops 2.0.x Bridge 1.1 beta 2


http://www.simplemachines.org/community/index.php?topic=173730.0

saludos !
solucionado lo del color rojo, disculpas... ;) , y ahora agradecerte tu respuesta, hoy domingo me pondré manos a la obra aunque supongo que no será nada fácil y me llevará su tiempo, ya os informaré de cmo va el proceso.

Offline fjavier77

  • Semi-Newbie
  • *
  • Posts: 22
Re: [Manual] cBi (Custom Board Icons)
« Reply #12 on: May 28, 2009, 03:05:17 PM »
Muchas gracias por el manual y los datos .J.

Me he permitido hacer un videotutorial que espero
les sirva. Claro, de esto le doy crédito a .J. por que
sin la información que el compartió, estos videos
no hubieran sido posibles.

Gracias de nuevo man.

Videotutorial 1 Poner iconos a foros
http://www.youtube.com/watch?v=vcGTFRv8TB0 [nofollow]

Videotutorial 2 Poner iconos a foros
http://www.youtube.com/watch?v=6f3-EmQTwqo [nofollow]

Saludos

Offline 4KING.GA~

  • Jr. Member
  • **
  • Posts: 153
  • Gender: Male
  • 4KING.GA
    • akozwanek on Facebook
    • 4KING ' TEAM
Re: [Manual] cBi (Custom Board Icons)
« Reply #13 on: June 17, 2009, 10:47:31 PM »
Super bueno en el primer momento no lo entendia & al final es super facil gracias por la explicacion

Offline M-DVD

  • SMF Hero
  • ******
  • Posts: 1,650
  • Gender: Male
  • Step by step will update the mods to SMF 2RC2
Re: [Manual] cBi (Custom Board Icons)
« Reply #14 on: June 21, 2009, 01:53:42 PM »
Hola!.

Bueno muchos han tenido problemás con este MOD, claro está errores aquí les explicaré unas cosas para que se configure bien y puedan hacerlo funcionar.

Muchas gracias por el manual y los datos .J.

Me he permitido hacer un videotutorial que espero
les sirva. Claro, de esto le doy crédito a .J. por que
sin la información que el compartió, estos videos
no hubieran sido posibles.

Felicidades, gran trabajo de ambos, han armado copado el tutorial :D

Offline rusoariel

  • Jr. Member
  • **
  • Posts: 164
    • CLub del palio
Re: [Manual] cBi (Custom Board Icons)
« Reply #15 on: July 14, 2009, 04:05:45 PM »
SI en vez de reemplazar el texto propuesto lo reemplazas por este:
Quote
// If the board is new, show a strong indicator.
if ($board['new']) {
                    if (file_exists($settings['theme_dir'] . '/icons/' . $board['id'] . '/on.png'))
                        $board_new_img=$settings['theme_url']. '/icons/' . $board['id'] . '/imagen.png';


                    else
                        $board_new_img=$settings['theme_url']. '/icons/' . $board['id'] . '/imagen.png';                                            $board_new_img2=$settings['theme_url']. '/icons/' . $board['id'] . '/on.png';
                        echo '<img src="', $board_new_img2,'" alt="', $txt['no_icon'], '" title="', $txt['no_icon'], '" border="0" /><br><img src="', $board_new_img,'"WIDTH=70 HEIGHT=70 alt="', $txt['no_icon'], '" title="', $txt['no_icon'], '" border="0" />';
                } elseif ($board['children_new']) {
                    if (file_exists($settings['theme_dir'] . '/icons/' . $board['id'] . '/on2.png'))
                        $board_new_img=$settings['theme_url']. '/icons/' . $board['id'] . '/imagen.png';


                    else
                        $board_new_img=$settings['theme_url']. '/icons/' . $board['id'] . '/imagen.png';                                            $board_new_img2=$settings['theme_url']. '/icons/' . $board['id'] . '/on.png';
                        echo '<img src="', $board_new_img2,'" alt="', $txt['no_icon'], '" title="', $txt['no_icon'], '" border="0" /><br><img src="', $board_new_img,'"WIDTH=70 HEIGHT=70 alt="', $txt['no_icon'], '" title="', $txt['no_icon'], '" border="0" />';                } else {
                    if (file_exists($settings['theme_dir'] . '/icons/' . $board['id'] . '/off.png'))
                        $board_nonew_img=$settings['theme_url']. '/icons/' . $board['id'] . '/imagen.png';
                    else
                        $board_nonew_img=$settings['images_url']. '/imagen.png';
                        $board_nonew_img2=$settings['images_url']. '/off.png';
        echo '<img src="', $board_nonew_img2,'" alt="', $txt['no_icon'], '" title="', $txt['no_icon'], '" border="0" /><br><img src="', $board_nonew_img,'"WIDTH=70 HEIGHT=70 alt="', $txt['no_icon'], '" title="', $txt['no_icon'], '" border="0" />';        }

El cbi funcionaria con tres imagenes en vez de dos con el siguiente formato: imagen.png (esta seria la imagen que iria por cada foro)
on.png
off.png
Cuando hay mensajes nuevos quedaria asi
on png  (off.png es una imagen transparente vacia)
imagen.png

Si no hay mensajes nuevos quedaria asi:




De esta manera es mas facil cambiar las imagenes, no hay necesidad de reformar todas las imagenes para diferenciarlas en on y off

pd: cambiar WIDTH=70 HEIGHT=70 por las medidas que uno quiera



Offline #jsDotx3

  • Full Member
  • ***
  • Posts: 532
  • Gender: Male
  • Think Different
    • jsDotx3 on GitHub
    • @jsDotx3 on Twitter
    • K! Mundo
Re: [Manual] cBi (Custom Board Icons)
« Reply #16 on: July 25, 2009, 01:30:59 PM »
El on2.png/gif es cuando hay un mensaje en un subforo, eso pasa.

Solved
(Life would be easy with a simple solution.)

Offline ChikaArmy

  • Semi-Newbie
  • *
  • Posts: 60
    • Locura Transitoria
Re: [Manual] cBi (Custom Board Icons)
« Reply #17 on: September 11, 2009, 07:37:12 AM »
hola queria ayuda x favor pues no  me sale, instale el cbi y modifike el

Board.Index.Template.php y el Message.Index.Template.php y algo he debido hacer mal xke hice la carpeta en mi teme esta es mi ruta:

/htdocs/smf/Themes/dynasty_1/icons/

y nada de nada no se me ve no se que debo hacer pues llevo ya 2 dias rallandome y buscando la solucion,muchas gracias
« Last Edit: September 11, 2009, 07:44:30 AM by ChikaArmy »

Offline vicram10

  • SMF Hero
  • ******
  • Posts: 5,814
  • Gender: Male
  • Founding Father of Ultimate Portal
    • vmrm10 on Facebook
    • @vicram_10 on Twitter
    • Noticias Tecnologicas, Tutoriales e Internet
Re: [Manual] cBi (Custom Board Icons)
« Reply #18 on: September 12, 2009, 10:32:06 AM »
y como tienes dentro de la carpeta

icons (carpeta principal)
    1 (subcarpeta con el ID del foro)
        - on.png
        - on2.png
        - off.png

Depende tambien de que extensiones tienen tus archivos, y la extension que le agregaste con el codigo para el CBI

Pd.: hace mucho que no te leia, ChikaArmy, jeje.. coincidimos en algunos foros creo que donde estaba elpropiohechicero como webmaster, asi como tigrep, etc.. :D

Offline ChikaArmy

  • Semi-Newbie
  • *
  • Posts: 60
    • Locura Transitoria
Re: [Manual] cBi (Custom Board Icons)
« Reply #19 on: September 12, 2009, 11:34:52 AM »
Ostras vicrammmm  :D me alegro d verte mucho tiempo sip pos hara mismo lo miro y te digo jejeje saludoss XD


dices k edite el archivo, modification.xml ke esta dentro del packete cbi y le ponga la ruta??
« Last Edit: September 12, 2009, 11:51:13 AM by ChikaArmy »