Show Posts
31
Tutoriales y Tips SMF / Iconos personalizados con estilo único.
« on: November 14, 2013 - 05:31 17:31 » 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:
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!!elseecho '<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.
