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í:

[Imagen: 4797331_1281768288_index_.jpg]

La estructura del header es esta:

[Imagen: 585cabeza_loquete_thecure.png]

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:

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

[Imagen: 958cabeza_loquete_thecure.png]

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:

#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:

<a name="top" id="top"></a>
<div id="header">
		{$welcomeblock}
		<div id="content">
			{$pm_notice}
			{$bannedwarning}
			{$bbclosedwarning}
			{$unreadreports}
			{$pending_joinrequests}
			<navigation>
			<br />

Header_welcomeblock:

<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:

#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:

<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:

<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:

#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:

#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:

#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