Iconos personalizados con estilo único.

Iconos personalizados.

Muchos han querido dar un estilo único a su foro, bueno con esté tip podrás tener los iconos personalizados y un estilo único, algo que tal vez poco visto entre las comunidades y en internet.



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:

 /* 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.themixure.com/index.php?board=[/url]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, Lokitox.

Muchas gracias por el tutorial, preferentemente yo usaría alguno de los mods que te permiten hacer esto mas fácil y rápido pero bueno nunca esta de mas la opción manual
Saludos

Muchas gracias por el tutorial, preferentemente yo usaría alguno de los mods que te permiten hacer esto mas fácil y rápido pero bueno nunca esta de mas la opción manual
Saludos

Obviamente tampoco está demás, en este caso es manual y da un diseño único..

Me gusta este tip la verdad es muy util y le da una buena vista a los foros

Buen aporte se agradece (y)

Aunque si hay mods que hacen esto; la realidad es que solo ponen un icono, en cambio este da un toque lindo al foro.

Muy buen aporte!