Cómo ajustar la barra de navegación en un theme

Wigao · 20 Abr 2010

Sucede que ando buscando un bonito theme para mi blog Noticias Guatemala, Eventos y Cultura | Guate Agenda

Encontré el meganews que me gustó mucho y pienso que se adapta perfectamente al blog. El problema es que no logro hacer que encaje mi logo a la perfección. Necesito ayuda para "bajar" la barra de navegación de mi blog y que así se mire mi logotipo.

El código de mi header.php es el siguiente:

Insertar CODE, HTML o PHP:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">

<!-- BEGIN html head -->
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php bloginfo('name'); ?> <?php wp_title(); ?></title>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" />
<!--[if lte IE 6]><link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/ie.css" /><![endif]-->
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/scripts.js"></script>
<?php if (function_exists('wp_enqueue_script') && function_exists('is_singular')) : ?>
<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
<?php endif; ?>
<?php wp_head(); ?>

</head>
<!-- END html head -->

<body>

<!-- BEGIN wrapper -->
<div id="wrapper">

	<!-- BEGIN header -->
	<div id="header">
		
		<!-- begin logo -->
		<h1><a href="<?php echo get_option('home'); ?>"><?php bloginfo('name'); ?></a></h1>
		<!-- end logo -->
                </br></br></br></br>
		
		<!-- begin advertisement -->
		<div class="ad"><a href="#"><img src="<?php bloginfo('template_url'); ?>/images/ad468x60.jpg" alt="Advertisement" /></a></div>
		<!-- end advertisement -->
		
                <!-- begin navigation -->
		<ul>
		<li><a href="<?php echo get_option('home'); ?>">Home</a></li>
		<?php dp_list_pages(); ?>
		</ul>
		<!-- end navigation -->
	
	</div>
	<!-- END header -->

En donde modifico para bajar la barra de navegación?

FabricioV · 20 Abr 2010

mmm, a mi me paso lo mismo pero lo solucione desde la hoja de estilos, puse unos pixeles mas y quedo perfecto. fijate en el style.css o algo parecido en Header.

Saludos.

rockoco · 20 Abr 2010

asi es me parece que es en la hoja de estilo, tal como lo dice fabriciov

Wigao · 20 Abr 2010

Ya modifique el alto del header en la hoja de estilos, ahora me queda desalineado el blog, en donde tendré que hechar mano para que quede perfecto amigos?

El código de la hoja de estilos es este:

HTML:

/*
Theme Name: Meganews Theme
Author: Chiq Montes
Author URI: http://www.wpthemedesigner.com/
*/

* {
	margin: 0; padding: 0;
}
body {
	text-align: center;
	font: 11px Verdana;
	color: #000000;
	background: #ECECEC;
}
a {
	text-decoration: none;
	color: #0000ff;
}
a:hover {
	text-decoration: underline;
	color: #ff0000;
}
img {
	border: 0;
}

.break {
	font-size: 0;
	width: 0; height: 0;
	clear: both;
}
.alignleft {
	float: left;
	margin: 4px 10px 5px 0;
}
.alignright {
	float: right;
	margin: 4px 0 5px 10px;
}
.aligncenter {
	text-align: center;
}
.hidden {
	display: none;
}

/** BEGIN wrapper **/
#wrapper {
	width: 980px;
	margin: auto auto;
	text-align: left;
}
/** END wrapper **/

/** BEGIN header **/
#header {
	height: 105px;
}
	#header h1 {
		font-size: 0;
		float: left;
		padding: 30px 0 35px;
	}
		#header h1 a {
			display: block;
			width: 386px; height: 105px;
			text-indent: -9999px;
			outline: none;
			background: url(images/logo.gif) no-repeat 0 0;
		}
	#header .ad {
		float: right;
		padding: 15px 0;
	}
	#header ul {
		clear: both;
		list-style-type: none;
		background-color: #7EA700;
		height: 30px;
	}
		#header ul li {
			float: left;
			font-weight: bold;
		}
		#header ul li a {
			color: #ffffff;
			display: block;
			padding: 8px 10px 9px;
		}
		#header ul li a:hover {
			background-color: #404618;
			text-decoration: none;
		}
/** END header **/

/** BEGIN content **/
#content {
	width: 653px;
	float: left;
	border: 1px solid #CCCCCC;
	padding: 5px;
	background-color: #ffffff;
}
	#content a {
		color: #434A1E;
	}
	#content .post {
		float: left;
		width: 150px; height: 440px;
		padding: 6px;
	}
		#content .post h2 {
			font-size: 1em;
			text-transform: uppercase;
			margin-bottom: 5px;
		}
		#content .post .thumb {
			width: 150px; height: 115px;
			overflow: hidden;
			margin-bottom: 5px;
		}
			#content .post .thumb img {
				width: 150px;
			}
		#content .post h3 {
			font-size: 1.2em;
			margin-bottom: 10px;
		}
		#content .post p {
			line-height: 1.4em;
		}
		#content .post .readmore {
			text-indent: -9999px;
			width: 99px; height: 17px;
			outline: none;
			background: url(images/readmore.gif) no-repeat 0 0;
			margin: 10px 0;
			display: block;
		}
	#content h2.title {
		font-size: 1em;
		text-transform: uppercase;
		padding: 10px;
	}
	#content .archive {
		padding: 10px;
		clear: both;
	}
		#content .archive img {
			width: 90px;
			float: left;
			margin: 0 5px 5px 0;
		}
		#content .archive h3 {
			margin-bottom: 5px;
		}
		#content .archive p {
			line-height: 1.5em;
			margin-bottom: 10px;
		}
	#content .single {
		padding: 10px;
	}
		#content .single h2 {
			margin-bottom: 10px;
			font-size: 1.4em;
		}
		#content .single p {
			line-height: 1.5em;
			margin-bottom: 10px;
		}
		#content .single ul, #content .single ol {
			list-style-position: inside;
			margin-bottom: 10px;
		}
		#content .single li {
			line-height: 1.5em;
			padding: 2px 0;
		}
		#content .single blockquote {
			padding: 10px 10px 5px;
			margin-bottom: 10px;
			background-color: #eeeeee;
			border-width: 1px 0;
			border-style: solid;
			border-color: #e0e0e0;
		}
		#content .single h3, #content .single h4, #content .single h5, #content .single h6 {
			font-size: 1.2em;
			margin-bottom: 5px;
		}
	#postnav {
		padding: 10px;
		font-weight: bold;
	}
/** END content **/

/** BEGIN sidebar **/
#sidebar {
	width: 300px;
	float: right;
}
	#sidebar .box {
		
	}
		#sidebar .box h2 {
			color: #3D4418;
			font-size: 1em;
			text-transform: uppercase;
			background-color: #FFFFFF;
			padding: 8px 10px;
			border-bottom: 1px solid #DDDDDD;
		}
		#sidebar .box  {
			border: 1px solid #CCCCCC;
			margin-bottom: 8px;
		}
		#sidebar .search {
			margin-bottom: 0;
			border-bottom: 0;
		}
		#sidebar .box form {
			width: 284px; height: 30px;
			padding: 7px;
			background: #E8E8E8 url(images/search.gif) no-repeat center;
		}
			#sidebar .box form input {
				border: 0;
				float: left;
				font-size: 1.2em;
				font-family: Verdana;
				width: 200px;
				margin: 7px 0 0 5px;
				background-color: transparent;
			}
			#sidebar .box form button {
				border: 0;
				float: right;
				text-indent: -9999px;
				width: 70px; height: 30px;
				background-color: transparent;
			}
		#sidebar .ad {
			background-color: #ffffff;
			text-align: center;
			padding: 5px;
		}
			#sidebar .ad img {
				margin: 5px;
			}
		#sidebar ul {
			list-style-type: none;
			background-color: #ffffff;
			padding: 6px;
		}
			#sidebar ul li {
				font-size: 1.2em;
				border-bottom: 1px dotted #DCDCDC;
				line-height: 1.4em;
				padding: 2px 0;
			}
			#sidebar ul li a {
				color: #3D441B;
			}
			#sidebar ul li a:hover {
				color: #83A604;
				text-decoration: none;
			}
		#sidebar .flickr {
			padding: 5px;
			background-color: #ffffff;
			text-align: center;
		}
			#sidebar .flickr img {
				margin: 5px;
			}
		#sidebar .video {
			background-color: #ffffff;
			padding: 3px;
		}
		#sidebar .l {
			float: left;
			width: 145px;
		}
		#sidebar .r {
			float: right;
			width: 145px;
		}
		#sidebar .l ul li, #sidebar .r ul li {
			font-size: 1em;
			border-bottom: 0;
			padding: 3px 0;
		}
/** END sidebar **/

/** BEGIN footer **/
#footer {
	clear: both;
	padding: 2px 10px;
	color: #ffffff;
	background-color: #7EA700;
	margin-top: 10px;
}
	#footer .l {
		float: left;
	}
	#footer .r {
		float: right;
	}
	#footer a {
		color: #ffffff;
		text-decoration: underline;
	}
/** END footer **/

/** BEGIN miscellaneous **/
#comments {
	padding: 10px;
}
	#comments a {
		text-decoration: none;
	}
	#comments h2 {
		font-size: 1.4em;
		margin: 10px 0;
	}
	#comments p {
		margin-bottom: 10px;
		line-height: 1.6em;
	}
	#comments form {
		
	}
	#comments form p {
		margin-bottom: 5px;
	}
		#comments form input {
			margin-right: 5px;
		}
		#comments form input, textarea {
			border: 1px solid #cccccc;
			font-size: 0.9em;
			font-family: Verdana;
			padding: 4px;
			background-position: 4px 4px;
			background-repeat: no-repeat;
		}
		#comments form input {
			width: 260px;
			border: 1px solid #cccccc;
		}
		#comments form textarea {
			width: 350px;
			padding: 4px 4px !important;
			border: 1px solid #cccccc;
		}
		#comments form button {
			border: 1px solid #a0a0a0;
			font-size: 1em;
			font-family: Verdana;
			padding: 2px 6px;
		}
	.commentdetails {
		margin-top: 25px;
	}
	.commentauthor {
		margin-bottom: 5px !important;
		font-weight: bold;
	}
	.commentdate {
		font-size: 0.8em;
		margin-bottom: 5px;
		color: #909090;
	}
	.required {
		color: #ff0000;
	}
h2.title {
	font-size: 1em !important;
	text-transform: uppercase;
	padding: 10px;
	color: #565656;
}
.notfound {
	padding: 40px;
}
	.notfound h2 {
		font-size: 18px;
		font-weight: normal;
		margin-bottom: 10px;
	}
/** END miscellaneous **/

/** BEGIN wordpress 2.7 comments **/
#comments ol {
	list-style-type: none;
	clear: both;
	padding: 0;
	margin: 0;
}
	#comments .buffer {
		padding: 10px;
	}
	#comments h2 {
		
	}
	#comments ol li {
		margin-bottom: 10px;
	}
	#comments ol li ul li {
		border: 1px solid #e0e0e0;
		padding: 10px;
	}
	#comments ol li .avatar {
		float: right;
	}
	#comments ol li .comment-author {
		
	}
		#comments ol li .comment-author .fn {
			font-weight: bold;
			font-size: 1.2em;
		}
	#comments ol li .comment-meta {
		font-size: 0.9em;
		color: #999999;
		margin: 5px 0 10px;
	}
	#comments ol li .reply {
		font-size: 0.9em;
		font-weight: bold;
		padding-bottom: 10px;
	}
	#comments .children {
		list-style-type: none;
	}
#comments .navigation {
	padding: 0 10px 20px;
	font-size: 0.9em;
}
	#comments .navigation a {
		color: #999999;
		padding: 3px 8px;
		border: 1px solid #cccccc;
	}
	#comments .navigation a:hover {
		color: #000000;
		border-color: #000000;
		text-decoration: none;
	}
#comments .says {
	display: none;
}
/** END wordpress 2.7 comments **/

#wptd_footer { line-height:33px; }
#wptd_footer .wptd_logo { display:inline-block; width:30px; height:33px; text-indent:-9999px; text-align:left; background:url(images/wptd_logo/30.png) no-repeat; cursor:pointer; }

electrox · 20 Abr 2010

hola Wigao lo que tienes que hacer es esto:

de la hoja de estilo cambia

#header {
height: 105px;
}

por este otro

#header {
height: 220px;
}

Cómo ajustar la barra de navegación en un theme

Wigao

FabricioV

rockoco

Wigao

electrox

Temas similares