[!TUT] Nuevo estilo del footer
Muchas veces hemos querido innovar nuestro foro SMF y no hemos sabido como , hoy les traigo un simple manual de un footer flotable con la tecnología de web 2.0 , CSS3 que dará un aspecto mas profesional a nuestro foro y así se vea algo mucho mejor de lo acostumbrado.
Caracteristicas:o Nuevo diseño del footer
(flotable).o Incorporación del CSS3.
o Fácil edición y textos del footer
(tiene altura y ancho exacto, mucho texto lo desconfigura)Edición de códigos.
index.template.php:Buscas por:
// Show the "Powered by" and "Valid" logos, as well as the copyright. Remember, the copyright must be somewhere!
echo '
<div id="footer_section"><div class="frame">
<ul class="reset">
<li class="copyright">', theme_copyright(), '</li>
<li><a id="button_xhtml" href="http://validator.w3.org/check?uri=referer" target="_blank" class="new_win" title="', $txt['valid_xhtml'], '"><span>', $txt['xhtml'], '</span></a></li>
', !empty($modSettings['xmlnews_enable']) && (!empty($modSettings['allow_guestAccess']) || $context['user']['is_logged']) ? '<li><a id="button_rss" href="' . $scripturl . '?action=.xml;type=rss" class="new_win"><span>' . $txt['rss'] . '</span></a></li>' : '', '
<li class="last"><a id="button_wap2" href="', $scripturl , '?wap2" class="new_win"><span>', $txt['wap2'], '</span></a></li>
</ul>';
Sustituyes por:
// Show the "Powered by" and "Valid" logos, as well as the copyright. Remember, the copyright must be somewhere! - New Style Footer by JTX3.
echo '<div id="footer"><b><a href="', $scripturl, '">'.$context['forum_name'].' ©</a> |
', theme_copyright(), ' |
<a href="http://validator.w3.org/check?uri=referer" target="_blank">XHTML</a> |
<a href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank">CSS</a></b></div>';
css/index.css:Agregas al final del archivo:
#footer {
z-index: 1;
position: fixed;
float: left;
padding: 10px;
width: 980px;
background-image: url(../images/theme/footer.png);
height: auto;
padding-bottom: 0;
bottom: 0;
font-size:11px;
font-weight: 700;
color:#666;
text-decoration: none;
font-family:Verdana, Arial, Helvetica, sans-serif;
margin:0;
-moz-border-radius: 7px 7px 0 0;
border-radius: 7px 7px 0 0;
-webkit-border-radius: 7px 7px 0 0;
-ms-border-radius: 7px 7px 0 0;
-o-border-radius: 7px 7px 0 0;
border-right: 1px solid #CCC;
border-left: 1px solid #CCC;
border-top: 1px solid #CCC;
z-index: 0;
}
#footer a:link, #footer a:visited {
font-size:11px;
font-weight: 700;
color:#666;
text-decoration: none;
font-family:Verdana, Arial, Helvetica, sans-serif;
margin:0 0 10 0;
}
#footer a:hover {
font-size:11px;
font-weight: 700;
color:#666;
text-decoration: none;
font-family:Verdana, Arial, Helvetica, sans-serif;
margin:0 0 10 0;
}
Finalmente guardamos el footer.png en default/images/theme y tendremos el siguiente resultado:
Próximamente empaquetaré la modificación y estará todo listo, prontamente les dejo la edición manual
.
Saludos
, JTX3.