News:

Want to get involved in developing SMF, then why not lend a hand on our github!

Main Menu

[TUT!] CBI (Custom Board Icons) personalizado !!

Started by #jsDotx3, May 13, 2009, 09:13:43 PM

Previous topic - Next topic

#jsDotx3

[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:

/* 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:

// 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

.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:
.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.

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

mirahalo

muy buen manual, pero creo que debería de ir en el subforo Tutoriales.

;)

Kiel D-04


#jsDotx3

Quote from: 130860 on May 14, 2009, 01:14:10 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.)

SPerroud

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


kenet

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."


SPerroud

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


BOMBERO

#9
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

mirahalo

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 !

BOMBERO

Quote from: 130860 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 !
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.

fjavier77

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

4KING.GA~

Super bueno en el primer momento no lo entendia & al final es super facil gracias por la explicacion

M-DVD

Quote from: .J. on May 13, 2009, 09:13:43 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.

Quote from: fjavier77 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.

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

rusoariel

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



#jsDotx3

El on2.png/gif es cuando hay un mensaje en un subforo, eso pasa.

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

ChikaArmy

#17
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

vicram10

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

ChikaArmy

#19
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??

Advertisement: