Cambio en The Cure: Logo entre clases

Torrecus_mybb_import8215 4 Mar, 2011, 12:00 pm

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.

nocktis21 4 Mar, 2011, 12:05 pm

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.

wsoulrc 4 Mar, 2011, 12:05 pm

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.

Torrecus_mybb_import8215 4 Mar, 2011, 12:15 pm

@ 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?

wsoulrc 4 Mar, 2011, 12:19 pm

¿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

Torrecus_mybb_import8215 4 Mar, 2011, 12:21 pm

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.

nocktis21 4 Mar, 2011, 6:35 pm

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.

Torrecus_mybb_import8215 4 Mar, 2011, 7:59 pm

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?

nocktis21 4 Mar, 2011, 8:01 pm

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;

}

Torrecus_mybb_import8215 4 Mar, 2011, 8:12 pm

#10

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.

[Error] Cambio en The Cure: Logo entre clases