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:
/* 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: /* 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.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,
Lokitox.