Cambio en The Cure: Logo entre clases

URL del foro: http://www.loquete.com
Versión del foro: 1.6
Actualización: Ninguna

Que tal.

Estoy probando el tema 'The Cure', sin embargo tengo un detalle con el header que intento modificar. Originalmente el tema viene configurado así:

La estructura del header es esta:

Como puede verse, las imágenes vienen en 3 partes:

- header_left
- header_main
- header_right

El logo no lo incluyo aqui, ya que se encima con el header_left, pero originalmente es el que se vé en la primera imagen y es un archivo jpg. sin clase en el CSS, únicamente se incluye al principio del XML:

Código:
<?xml version="1.0" encoding="UTF-8"?>

<theme name="The Cure" version="1502">

    <properties>

        <templateset><![CDATA[2]]></templateset>

        <editortheme><![CDATA[Office_2007]]></editortheme>

        <imgdir><![CDATA[images/thecure]]></imgdir>

        <logo><![CDATA[images/thecure/logo.jpg]]></logo>

        <tablespace><![CDATA[6]]></tablespace>

        <borderwidth><![CDATA[0]]></borderwidth>

    </properties>

    <stylesheets>

        <stylesheet name="global.css" version="1502"><![CDATA[body {

    background: #112435;

    color: #5286b8;

    text-align: center;

    line-height: 1.4;

    margin: 0;

    padding: 0;

    font-family: Tahoma, Verdana, Arial, Sans-Serif;

    font-size: 100%;

Ahora, lo que yo pretendo es reemplazar este logo con uno que abarca todo el ancho del header, en png y con fondo transparente. Algo como esto:

Pero esto provoca que desplaze hacia abajo los gif's del guest_links

¿Como debo modificar el CSS para que el cambio quede correctamente? Es decir el logo encima de las imágenes del header pero debajo de los gifts 'guest_link'

Última modificación: 4 Mar, 2011, 12:01 pm por SamyMan.

Copia las plantillas header y header_welcomeblock_guest y el css de header_left, header_main, header_right.

¿Porque quieres conservar los botones de "Registro" y "Iniciar sesión"? Están en ingles y en la barra azul también vienen esos enlaces, me parece necesario tenerlo dos veces.

con los parametros float de css te deberia servir Tongue

PD: ojala todos preugnten como tu

Última modificación: 4 Mar, 2011, 12:05 pm por Invanit.

@ Wsoul: No estoy seguro a que te refieres. El float viene incluído de hecho en el CSS:

Código:
#header .logo {

    float: left;

}

#header .guest_links {

    float: right;

    padding: 40px 30px 0 0;

}

#header .guest_links ul {margin: 0;padding:0;list-style:none;background:url(images/thecure/style/guest_links.gif) 0 -50px no-repeat;width: 320px;height:50px}

#header .guest_links ul li {margin:0;padding:0;float:left}

#header .guest_links ul li.guest_or {width: 52px; height: 50px;display:block}

#header .guest_links a {display:block}

#header .guest_links a.register_button {width:162px;height:50px;background:url(images/thecure/style/guest_links.gif) 0 0 no-repeat;}

#header .guest_links a.login_button {width:100px;height:50px;background:url(images/thecure/style/guest_links.gif) -214px 0 no-repeat;}

#header .guest_links a:hover.register_button, #header .guest_links a:hover.login_button {background: 0}

@ Survivor: Me gustaría incluirlos porque quiero modificarlos más adelante por otra presentación. Estas son las plantillas que indicas:

Header:

Código:
<a name="top" id="top"></a>

<div id="header">

        {$welcomeblock}

        <div id="content">

            {$pm_notice}

            {$bannedwarning}

            {$bbclosedwarning}

            {$unreadreports}

            {$pending_joinrequests}

            <navigation>

            <br />

Header_welcomeblock:

Código:
<div class="mainwrap">

<div class="top_bar"></div>

        <div class="header_main"><div class="header_left"><div class="header_right">

            <div class="logo"><a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a></div>

            <div class="guest_links">

                <ul>

                    <li><a href="{$mybb->settings['bburl']}/member.php?action=register" class="register_button"></a></li>

                    <li class="guest_or">&nbsp;</li>

                    <li><a href="{$mybb->settings['bburl']}/member.php?action=login" class="login_button"></a></li>

                </ul>

            </div>

            <div class="clear"></div>

        </div></div></div>

        <div id="navbar">

            <ul id="nav">

                <li><a href="{$mybb->settings['bburl']}">Home</a></li>

                <li><a href="{$mybb->settings['bburl']}/memberlist.php">{$lang->toplinks_memberlist}</a></li>

                <li><a href="{$mybb->settings['bburl']}/calendar.php">{$lang->toplinks_calendar}</a></li>

                <li><a href="{$mybb->settings['bburl']}/misc.php?action=help">{$lang->toplinks_help}</a></li>

            </ul>

            <div id="search">

            <form action="{$mybb->settings['bburl']}/search.php" method="post">

                <div class="search_input_wrap"><input name="keywords" class="nav_search_input" title="Enter your search keywords" type="text" /></div>

                <input value="" name="submit-search" class="nav_search_button" type="submit" />

                <input type="hidden" name="action" value="do_search" />

            </form>

            </div>

            <div class="clear"></div>

        </div>

    </div>

</div>

<div id="container"><div class="container_wrap">

    <div class="mainwrap">

        <div class="subnav">

        <script type="text/javascript">

        <!--

            lang.username = "{$lang->login_username}";

            lang.password = "{$lang->login_password}";

            lang.login = "{$lang->login}";

            lang.lost_password = " &mdash; <a href=\"{$mybb->settings['bburl']}/member.php?action=lostpw\">{$lang->lost_password}<\/a>";

            lang.register_url = " &mdash; <a href=\"{$mybb->settings['bburl']}/member.php?action=register\">{$lang->welcome_register}<\/a>";

            lang.remember_me = "{$lang->remember_me}";

        // -->

</script>

            <div class="float_right"><a href="{$mybb->settings['bburl']}/search.php">Advanced {$lang->toplinks_search}</a></div>

            <span id="quick_login">{$lang->welcome_guest} <a href="{$mybb->settings['bburl']}/member.php?action=login" onclick="MyBB.quickLogin(); return false;">{$lang->welcome_login}</a> &mdash; <a href="{$mybb->settings['bburl']}/member.php?action=register">{$lang->welcome_register}</a></span>

        </div>

CSS Headers:

Código:
#header .header_main {

    background: #104d83 url(images/thecure/style/header_main.jpg) 0 0 repeat-x;

    height: 126px;

    width: 960px;

}

#header .header_left {

    background: url(images/thecure/style/header_left.jpg) 0 0 no-repeat;

    height: 126px;

}

#header .header_right {

    background: url(images/thecure/style/header_right.jpg) 100% 0 no-repeat;

    height: 126px;

}

¿Si buscara eliminar esos gifts, bastaría con borrarlos del CSS?

¿Si buscara eliminar esos gifts, bastaría con borrarlos del CSS?
no,

creo que entonces no entendí tu pregunta

pensaba que decías que bajo lo de login, register y eso

Si vaya, esa es la idea. Lo de borrarlo los gifts iba a cuento con el comentario de Survivor, sobre tener la misma información 2 veces.

Uf, me la pase bastante tiempo modificandolo xD, esta medio confuso Confused

Hice las modificaciones de modo que pudieses tener el "logo" en 2 partes, el fondo del "logo" en una imagen y el "logo" con solo texto en otra Smile

Sustituye todo en la plantilla header_welcomeblock_guest por:

Código:
<div class="mainwrap">

<div class="top_bar"></div>

<div class="header_rounded">&nbsp;</div>

        <div class="header_main">

            <div class="logo"><a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a></div>

            <div class="guest_links">

                <ul>

                    <li><a href="{$mybb->settings['bburl']}/member.php?action=register" class="register_button"></a></li>

                    <li class="guest_or">&nbsp;</li>

                    <li><a href="{$mybb->settings['bburl']}/member.php?action=login" class="login_button"></a></li>

                </ul>

            </div>

        <div class="clear"></div>

        </div>

        <div id="navbar">

            <div id="search">

            <form action="{$mybb->settings['bburl']}/search.php" method="post">

                <div class="search_input_wrap"><input name="keywords" class="nav_search_input" title="Enter your search keywords" type="text" /></div>

                <input value="" name="submit-search" class="nav_search_button" type="submit" />

                <input type="hidden" name="action" value="do_search" />

            </form>

            </div>

            <ul id="nav" style="margin-top:-15px;">

                <li><a href="{$mybb->settings['bburl']}">Home</a></li>

                <li><a href="{$mybb->settings['bburl']}/memberlist.php">{$lang->toplinks_memberlist}</a></li>

                <li><a href="{$mybb->settings['bburl']}/calendar.php">{$lang->toplinks_calendar}</a></li>

                <li><a href="{$mybb->settings['bburl']}/misc.php?action=help">{$lang->toplinks_help}</a></li>

            </ul>

            <div class="clear"></div>

    </div>

</div>

<div id="container"><div class="container_wrap">

    <div class="mainwrap">

        <div class="subnav">

        <script type="text/javascript">

        <!--

            lang.username = "{$lang->login_username}";

            lang.password = "{$lang->login_password}";

            lang.login = "{$lang->login}";

            lang.lost_password = " &mdash; <a href=\"{$mybb->settings['bburl']}/member.php?action=lostpw\">{$lang->lost_password}<\/a>";

            lang.register_url = " &mdash; <a href=\"{$mybb->settings['bburl']}/member.php?action=register\">{$lang->welcome_register}<\/a>";

            lang.remember_me = "{$lang->remember_me}";

        // -->

</script>

            <div class="float_right"><a href="{$mybb->settings['bburl']}/search.php">Advanced {$lang->toplinks_search}</a></div>

            <span id="quick_login">{$lang->welcome_guest} <a href="{$mybb->settings['bburl']}/member.php?action=login" onclick="MyBB.quickLogin(); return false;">{$lang->welcome_login}</a> &mdash; <a href="{$mybb->settings['bburl']}/member.php?action=register">{$lang->welcome_register}</a></span>

        </div>

Sustituye todo en la plantilla header_welcomeblock_member:

Código:
<div class="mainwrap">

<div class="top_bar">

    <ul>

        <li><a href="{$mybb->settings['bburl']}/member.php?action=logout&amp;logoutkey={$mybb->user['logoutkey']}" class="top_bar_lout"><span>{$lang->welcome_logout}</span></a></li>

        {$admincplink}

        {$modcplink}

        <li><a href="{$mybb->settings['bburl']}/usercp.php" class="top_bar_ucp"><span>{$lang->welcome_usercp}</span></a></li>

    </ul>

</div>

<div class="header_rounded">&nbsp;</div>

<div class="header_main">

            <div class="logo"><a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a></div>

            <div class="header_side"><div id="panel">

<div style="background: transparent url({$mybb->user['avatar']}) 0 0 no-repeat;width:68px;height:68px;float:left"></div>

                <div class="panel_wrap">

                    {$lang->welcome_back}

                </div>

            </div></div>

            <div class="clear"></div>

        </div>

        <div id="navbar">

            <div id="search">

            <form action="{$mybb->settings['bburl']}/search.php" method="post">

                <div class="search_input_wrap"><input name="keywords" class="nav_search_input" title="Enter your search keywords" type="text" /></div>

                <input value="" name="submit-search" class="nav_search_button" type="submit" />

                <input type="hidden" name="action" value="do_search" />

            </form>

            </div>

            <ul id="nav" style="margin-top:-15px;">

                <li><a href="{$mybb->settings['bburl']}">Home</a></li>

                <li><a href="{$mybb->settings['bburl']}/memberlist.php">{$lang->toplinks_memberlist}</a></li>

                <li><a href="{$mybb->settings['bburl']}/calendar.php">{$lang->toplinks_calendar}</a></li>

                <li><a href="{$mybb->settings['bburl']}/misc.php?action=help">{$lang->toplinks_help}</a></li>

            </ul>

            <div class="clear"></div>

        </div>

    </div>

</div>

<div id="container"><div class="container_wrap">

    <div class="mainwrap">

        <div class="subnav">

            <div class="float_right"><a href="{$mybb->settings['bburl']}/search.php">Advanced {$lang->toplinks_search}</a></div>

            <a href="{$mybb->settings['bburl']}/search.php?action=getnew">{$lang->welcome_newposts}</a> | <a href="{$mybb->settings['bburl']}/search.php?action=getdaily">{$lang->welcome_todaysposts}</a> | <a href="#" onclick="MyBB.popupWindow('{$mybb->settings['bburl']}/misc.php?action=buddypopup', 'buddyList', 350, 350);">{$lang->welcome_open_buddy_list}</a> | <a href="{$mybb->settings['bburl']}/private.php">{$lang->welcome_pms}</a> {$lang->welcome_pms_usage}

        </div>

Elimina esto en el archivo global.css ya que no lo vas a necesitar:

Código:
#header .header_left {

    background: url(images/thecure/style/header_left.jpg) 0 0 no-repeat;

    height: 126px;

}

#header .header_right {

    background: url(images/thecure/style/header_right.jpg) 100% 0 no-repeat;

    height: 126px;

}

Sustituye esto en el archivo global.css:

Código:
#header {

    background: #0e1c2a url(images/thecure/style/header_bg.jpg) 0 0 repeat-x;

    height: 207px;

}

#header .header_main {

    background: url(images/thecure/style/header_main.jpg) 0 0 no-repeat;

    height: 113px;

    width: 960px;

}

#header .top_bar {

    height: 33px;

}

#navbar ul#nav {

    padding: 0 10px;

    list-style: none;

    margin: auto 0;

    float:left;

}

Elimina las imagenes "header_right.jpg", "header_left.jpg", sustituye la imagen "logo.jpg" ubicada en la carpeta "images/thecure" y la imagen "header_main.jpg" ubicada en la carpeta "images/thecure/style", por ultimo copia la imagen "logo_rounded.png" en la carpeta "images/thecure/style".

Paquete de imagenes. Tamaño del archivo: 38.76 KB

La imagen del fondo como puedes ver es "header_main.jpg" y la imagen del texto con logo es "logo.jpg", tu cámbialas por las que quieras usar.

Te pasaste amigo. Muchas muchas gracias.

Antes de probarlo sin embargo, tengo una duda: ¿En que parte del CSS declaras la nueva imagen logo_rounded.png?

Se me olvido ponerlo jeje

Es este:

Código:
#header .header_rounded {

    background: url(images/thecure/style/logo_rounded.png) 0 0 no-repeat;

    margin-bottom: -7px;

}

Bueno, ya lo tengo, pero aún me aparece descuadrado. Me parece que mejor me olvidaré de esas cajas como habías comentado y buscaré hacer otro cambio.