Editando Footer, más bonito...

Este es un tuto que surgio por la consulta de Lucas Guerrero, para modificar el footer. La modificación me parecio interesante asi que decidí hacer este mini tutorial, que involucrá solo mover algunas partes del footer y crear algunas etiquetas HTML, espero que les guste.

Imagen de como queda el resultado final:
Dibujo.jpg

Entonces, primero ir: Estilos y plantillas > administrar estilos > "el estilo" > Plantillas comunes > Footer

Busca:

Código PHP:

<form action="{vb:raw vboptions.forumhome}.php" method="get" id="footer_select" class="footer_select">

            
        <vb:if condition="$show['quickchooser']">
            <select name="styleid" onchange="switch_id(this, 'style')">
                <optgroup label="{vb:rawphrase quick_style_chooser}">
                    {vb:raw quickchooserbits}
                </optgroup>
            </select>    
        </vb:if>
        
        <vb:if condition="$show['languagechooser']">
            <select name="langid" onchange="switch_id(this, 'lang')">
                <optgroup label="{vb:rawphrase quick_language_chooser}">
                    {vb:raw languagechooserbits}
                </optgroup>
            </select>
        </vb:if>
    </form> 


Y lo mueves para dejarlo antes del siguiente div:

Código PHP:

<div id="footer" class="floatcontainer footer"> 


Entonces para mover los selectores sobre el cuadrado, como la imagen.

Ahora busca:

Código PHP:

<ul id="footer_links" class="footer_links"> 


Y antes de eso pega lo siguiente:

Código PHP:

<table width="100%" heigh="100%">
<tr>
<td><img src="ruta de tu logo" align="left"></td>
<td align="right"> 


Antes de esto: ....

Código PHP:

<vb:if condition="$show['dst_correction']"> 


Cerrar la tabla:

Código PHP:

</td></tr></table> 


Ahora Busca:

Código PHP:

    <!-- Do not remove this copyright notice -->
    {vb:rawphrase powered_by_vbulletin}
    <!-- Do not remove this copyright notice --> 


Cortalo, elimina las etiquetas div que lo envuelven (<div id="footer_copyright" class="shade footer_copyright"></div>).

Ahora pegalo despues de:

Código PHP:

</ul> 


Busca:

Código PHP:

    <!-- Do not remove cronimage or your scheduled tasks will cease to function -->
    {vb:raw cronimage}
    <!-- Do not remove cronimage or your scheduled tasks will cease to function -->
    {vb:raw vboptions.copyrighttext} 


Cortalo y elimina las div que lo envuelven al igual que el anterior.

Y lo pegas despues del copyright movido anteriormente:

Código PHP:

<!-- Do not remove this copyright notice -->
    {vb:rawphrase powered_by_vbulletin}
    <!-- Do not remove this copyright notice --> 


Ahora finalmente debemos achicar la letra del copyright para que no se confunda con los links, para esto envolveremos los 2 codigos agregados despues de </ul> y envolverlos con la siguiente etiqueta div:

Código PHP:

<p style="font-size:x-small;"></p> 


Quedando así:

Código PHP:

<p style="font-size:x-small;">
<!-- Do not remove this copyright notice -->
    {vb:rawphrase powered_by_vbulletin}
    <!-- Do not remove this copyright notice -->
<!-- Do not remove cronimage or your scheduled tasks will cease to function -->
    {vb:raw cronimage}
    <!-- Do not remove cronimage or your scheduled tasks will cease to function -->
    {vb:raw vboptions.copyrighttext}
</p> 


Para los bordes redondeados nos dirigeremos, ahora, a editar el CSS:

Editar Plantillas > CSS Plantillas > vbulletin-chrome.css

Buscar: .footer {

Y agregar:

Código PHP:

    -moz-border-radius: 10px;
 -webkit-border-radius: 10px; 


Para solucionar el siguiente error: http://i51.tinypic.com/2djyoaf.jpg

Vamos a agregar una nueva variable a nuestro CSS: Abrir vbulletin-chrome.css y buscamos .footer justo sobre ella vamos a agregar:

Código PHP:

.footer2 {
    clear:both;
    text-align:{vb:stylevar right};
    display:block;
    width: 100%;
} 


Ahora nos dirigimos a Plantillas comunes > Footer ; nuevamente y nos situamos en:

Código PHP:

<form action="{vb:raw vboptions.forumhome}.php" method="get" id="footer_select" class="footer_select"> 


Justo sobre eso agregamos la siguiente div:

Código PHP:

<div id="footer2" class="floatcontainer footer2"> 


Y para cerrar esta agregamos despues de:

Código PHP:

</vb:if>
    </form> 


La etiqueta </div>; quedando de esta manera:

Código PHP:

</vb:if>
    </form></div> 


Eso es todo para solucionar el problema

Lista ya deberia estar funcionando a la perfección la modificación.