Wordpress Layout Question [Archive]

View Full Version : Wordpress Layout Question

aqaz69

07-17-2008, 08:50 AM

Hi,

My wordpress blog uses the theme fourWPTPv2. For some reason when I replace the default logo with my own gif logo it is no longer centered from top to bottom of the header. How can I get it to move down a little. My site is mmavideopost.com and my header.php looks like:

<!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">

<head profile="http://gmpg.org/xfn/11">

<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

<title><?php if(function_exists("UTW_ShowTagsForCurrentPost")) : ?><?php bloginfo('name'); ?><?php if ( is_single() ) { ?> : Blog Archive <?php } ?><?php if (is_tag()) { echo ' : '; UTW_ShowCurrentTagSet('tagsettextonly'); } ?><?php wp_title(':'); ?><?php else: ?><?php wp_title(); ?> <?php bloginfo('name'); ?>: <?php bloginfo('description'); ?><?php endif; ?></title>

<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> 

<meta name="keywords" content="wordpress theme, wpthemesplugin, wordpress skin, 4 column wordpress theme, red and white wordpress theme, seo friendly wordpress theme, white wordpress theme" />
<meta name="designer" content="Moses Francis" />
<meta name="coder" content="rkcorp" />
<meta name="support" content="http://www.wpthemesplugin.com" />

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />

<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

<?php wp_head(); ?>

</head>

<body>

<div id="wrap_fixed">

<div id="container_fixed">

<div id="header_fixed">
<div class="right_header_fixed"></div>
<div class="left_header_fixed"></div>

<div class="middle_header_fluid">
<div class="top_header">

<div id="banner_468_60"><img src="<?php bloginfo('stylesheet_directory');?>/images/banner_placement.gif" alt="banner" /></div>
<div id="logo_placement"><a href="<?php echo get_settings('home'); ?>"><img src="<?php bloginfo('stylesheet_directory');?>/images/mmavideopost_trans.gif" alt="logo" border="0" /></a></div>
</div>

<div class="header_navigator">
<div class="rssfeeds"><a href="<?php bloginfo('rss2_url'); ?>"><img src="<?php bloginfo('stylesheet_directory');?>/images/rssfeed.gif" alt="feeds" width="85" height="24" border="0" /></a></div>

<div id="searchbox">
<form method="get" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<p><input name="s" type="text" class="searchfield" value="<?php the_search_query(); ?>"/></p>
<p><input name="search" type="image" src="<?php bloginfo('stylesheet_directory');?>/images/search.gif" class="sbmbutton" alt="search" /></p>
</form>
</div>

<div id="main_nav">
<ul>
<li><a href="<?php echo get_settings('home'); ?>">Home</a></li>
<li><a href="http://mmavideopost.com/about/">About</a></li>
<li><a href="http://mmavideopost.com/instructional-videos/">Instructional Vids</a></li>
<li><a href="http://mmavideopost.com/Contact-Us">Contact Us</a></li>
</ul>
</div>

</div>

</div>
</div>

THANKS!

Swelly

07-17-2008, 11:32 AM

Can you post the css for the header class?

aqaz69

07-17-2008, 04:57 PM

I think this is it:

/* body init css */

#wrap_fixed {
width: 950px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#container_fixed {
margin: 0px;
float: left;
width: 950px;
}
#header_fixed {
width: 950px;
float: left;
}
#header_fixed img {
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
}

.right_header_fixed {
background-image: url(images/right_h.gif);
background-repeat: no-repeat;
float: right;
height: 140px;
width: 15px;
}
.left_header_fixed {
background-image: url(images/left_h.gif);
background-repeat: no-repeat;
float: left;
height: 140px;
width: 15px;
}
.middle_header_fluid {
background-image: url(images/mid_h.gif);
background-repeat: repeat-x;
height: 140px;
float: left;
width: 920px;
}
#banner_placement468_60 {
height: 60px;
width: 468px;
}
.top_header {
float: left;
width: 920px;
}
#banner_468_60 {
float: right;
width: 468px;
position: relative;
text-align: center;
padding-top: 20px;
}
#logo_placement {
float: left;
height: 96px;
width: 422px;
position: relative;
}
.header_navigator {
float: left;
width: 920px;
padding-top: 12px;
}
.rssfeeds {
float: right;
height: 24px;
width: 85px;
}
#searchbox {
float: right;
width: 300px;
padding-right: 10px;
}
#searchbox form {
float: left;
width: 300px;
margin: 0px;
}
#searchbox p {
padding: 0px;
float: left;
margin-top: 0px;
margin-right: 5px;
margin-bottom: 0px;
margin-left: 0px;
}
.searchfield {
background-image: url(images/s_box.gif);
background-repeat: no-repeat;
width: 200px;
float: left;
margin-top: 2px;
padding-top: 1px;
padding-bottom: 1px;
border: 1px solid #FFFFFF;
}
.sbmbutton {
margin-top: 3px;
}
#main_nav {
margin: 0px;
float: left;
width: 510px;
}
#main_nav ul {
text-align: left;
margin: 0px;
padding: 0px;
float: left;
width: 510px;
list-style-type: none;
}
#main_nav li {
padding: 0px;
float: left;
height: 24px;
width: auto;
margin-top: 0px;
margin-right: 15px;
margin-bottom: 0px;
margin-left: 0px;
font-size: 1.1em;
line-height: 22px;
color: #FFFFFF;
display: inline;
}
#main_nav li a:link, #main_nav li a:visited {
color: #FFFFFF;
text-decoration: none;
}
#main_nav li a:hover, #main_nav li a:active {
color: #CCCCCC;
text-decoration: underline;

Swelly

07-17-2008, 04:59 PM

Whats the link to the blog?

Also the logo position is relative, I would take that out and play with that class a bit.

foobic

07-17-2008, 07:08 PM

It looks like just adding a top margin to the logo placement div would work (styles.css line 163).

aqaz69

07-17-2008, 09:24 PM

mmavideopost.com is the site

Arrgh I tried deleting "relative" and messing with the css but nothing happens no matter what values I enter! And to make matters worse my navigation dissapeared when I added my own logo!!

I'm gonna rip my hair out...:(

aqaz69

07-17-2008, 09:32 PM

foobic- do I add just the line you highlighted or also what's under it? I can't see the rest in your screenshot..

BTW thanks for your help ppl so far..

foobic

07-17-2008, 09:59 PM

It's just that one line added to the section shown. IDK how you lost the navigation though.

If you're not comfortable changing the css you might find it easier to leave everything unchanged and just replace the logo image with one that's exactly the same size - pad your image out to fit.

aqaz69

07-18-2008, 04:13 PM

I got it! The logo is now centered (I was looking at the wrong line in your screenshot)lol.

However the navigation links are still missing and I can't seem to bring it down further that 11px...

If you're not too annoyed maybe someone has a solution??

thanks!