Help Fixing Wordpress theme

**MicrotechXP** · 09-11-2009 07:57 PM

Alright, I just bought a wordpress theme and I want to make some changes to it to suit me. I messed around with the code and I wanted the menu's to be on top and it became like this: http://www.ddrun.x10hosting.com

I want it to look like this:

Here is the website URL: http://www.ddrun.x10hosting.com

and here is the source code from the header.php:

PHP Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
    <head>
        <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
        <!-- Title -->
        <title><?php wp_title('&laquo;', true, 'right'); ?><?php bloginfo('name'); ?></title>

        <!-- Link REL / CSS -->
        <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" />
        <link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
        <link rel="alternate" type="application/atom+xml" title="<?php bloginfo('name'); ?> Atom Feed" href="<?php bloginfo('atom_url'); ?>" />
        <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

        <!-- Javascript -->
        <script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery-1.3.2.min.js"></script>
        <script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/common.js"></script>
        
        <!--[if lt IE 7]><script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script><![endif]-->
        <?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
        <?php wp_head(); ?>
    </head>
    <body>
        <!--[if lt IE 7]>
        <div class="ie6-notice"><strong>Notice:</strong><br />Please upgrade your browser to at least Internet Explorer 7 to properly view this website.</div>
        <![endif]-->
        <a name="top" id="top"></a>
        <!-- Header // -->
        <div class="wpn_header">
            <!-- Logo -->
            <a class="wpn_logo" href="<?php echo get_option('home'); ?>/"><img src="<?php bloginfo('stylesheet_directory'); ?>/img/logo-trans.png" alt="" /></a>
            
            <!-- Search // -->
            <div class="wpn_search">
                <form id="searchform" action="<?php echo get_option('home') ?>" />
                    <input type="text" name="s" value="Search the blog..." onfocus="if(this.value==this.defaultValue)this.value='';" /><input type="image" src="<?php bloginfo('stylesheet_directory'); ?>/img/spacer.gif" />
                </form>
            </div>
            <!-- // Search -->
            
            <!-- Menu // -->
            <ul class="wpn_menu">
                <li><a href="<?php echo get_option('home'); ?>"><span>Home</span></a></li>
                <?php wp_list_pages('sort_column=menu_order&title_li=&link_before=<span>&link_after=</span>&depth=0&include='.get_wpn_config('menu_include').'&exclude_tree='.get_wpn_config('menu_exclude')); ?>
            </ul>
            <!-- // Menu -->
            
            <!-- Submenu // -->
            <ul class="wpn_submenu">
                <?php wp_list_categories('sort_column=menu_order&title_li=&show_count=0&include='.get_wpn_config('submenu_include').'&exclude='.get_wpn_config('submenu_exclude')); ?>
            </ul>
            <!-- // Submenu -->
        </div>
        <!-- // Header -->
        
        <!-- Wrapper // -->
        <div class="wpn_wrapper">

This is the source code before I messed with it.

What's wrong? Thanks.

**xav0989** · 09-11-2009 08:51 PM

the header logo is outside the header div.

The 'a' link element with a class of wpn_logo should be inside the div with the wpn_header class.

**MicrotechXP** · 09-11-2009 09:01 PM

Originally Posted by xav0989

the header logo is outside the header div.

The 'a' link element with a class of wpn_logo should be inside the div with the wpn_header class.

It is in the header class.

This is the code when I try to make it go up there.

PHP Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>

    <head>

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

        <!-- Title -->

        <title><?php wp_title('&laquo;', true, 'right'); ?><?php bloginfo('name'); ?></title>



        <!-- Link REL / CSS -->

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

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

        <link rel="alternate" type="application/atom+xml" title="<?php bloginfo('name'); ?> Atom Feed" href="<?php bloginfo('atom_url'); ?>" />

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



        <!-- Javascript -->

        <script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery-1.3.2.min.js"></script>

        <script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/common.js"></script>

        

        <!--[if lt IE 7]><script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script><![endif]-->

        <?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>

        <?php wp_head(); ?>

    </head>

    <body>

        <!--[if lt IE 7]>

        <div class="ie6-notice"><strong>Notice:</strong><br />Please upgrade your browser to at least Internet Explorer 7 to properly view this website.</div>

        <![endif]-->

        <a name="top" id="top"></a>

        <!-- Header // -->

        <div class="wpn_header">

        <!-- Menu // -->

            <ul class="wpn_menu">

                <li><a href="<?php echo get_option('home'); ?>"><span>Home</span></a></li>

                <?php wp_list_pages('sort_column=menu_order&title_li=&link_before=<span>&link_after=</span>&depth=0&include='.get_wpn_config('menu_include').'&exclude_tree='.get_wpn_config('menu_exclude')); ?>

            </ul>

            <!-- // Menu -->

            

            <!-- Submenu // -->

            <ul class="wpn_submenu">

                <?php wp_list_categories('sort_column=menu_order&title_li=&show_count=0&include='.get_wpn_config('submenu_include').'&exclude='.get_wpn_config('submenu_exclude')); ?>

            </ul>

            <!-- // Submenu -->

        </div>

            <!-- Logo -->

            <a class="wpn_logo" href="<?php echo get_option('home'); ?>/"><img src="<?php bloginfo('stylesheet_directory'); ?>/img/logo-trans.png" alt="" /></a>

            

            <!-- Search // -->

            <div class="wpn_search">

                <form id="searchform" action="<?php echo get_option('home') ?>" />

                    <input type="text" name="s" value="Search the blog..." onfocus="if(this.value==this.defaultValue)this.value='';" /><input type="image" src="<?php bloginfo('stylesheet_directory'); ?>/img/spacer.gif" />

                </form>

            </div>

            <!-- // Search -->

        </div>

        <!-- // Header -->

        

        <!-- Wrapper // -->

        <div class="wpn_wrapper">

**xav0989** · 09-11-2009 09:07 PM

Well it is not when I look at your site in the firebug window...

**xav0989** · 09-11-2009 09:09 PM

HTML Code:

        <!-- Header // -->
        <div class="wpn_header">
        <!-- Menu // -->
            <ul class="wpn_menu">
                <li><a href="<?php echo get_option('home'); ?>"><span>Home</span></a></li>
                <?php wp_list_pages('sort_column=menu_order&title_li=&link_before=<span>&link_after=</span>&depth=0&include='.get_wpn_config('menu_include').'&exclude_tree='.get_wpn_config('menu_exclude')); ?>
            </ul>
            <!-- // Menu -->
            
            <!-- Submenu // -->
            <ul class="wpn_submenu">
                <?php wp_list_categories('sort_column=menu_order&title_li=&show_count=0&include='.get_wpn_config('submenu_include').'&exclude='.get_wpn_config('submenu_exclude')); ?>
            </ul>
            <!-- // Submenu -->
             <!-- Logo -->
             <a class="wpn_logo" href="<?php echo get_option('home'); ?>/"><img src="<?php bloginfo('stylesheet_directory'); ?>/img/logo-trans.png" alt="" /></a>
        </div>

Try this instead...

**MicrotechXP** · 09-11-2009 09:14 PM

Originally Posted by xav0989

Well it is not when I look at your site in the firebug window...

The code that you just posted does not work. It reverts the bar back to where it was originally.

Here is what it looks like when I mess with it:

**xav0989** · 09-12-2009 11:46 AM

got it to work:

here is my html

HTML Code:

<div class="wpn_header">
		<!-- Menu // -->
			<ul class="wpn_menu">
				<li><a href="http://ddrun.x10hosting.com"><span>Home</span></a></li>
				<li class="page_item page-item-2"><a href="http://ddrun.x10hosting.com/?page_id=2" title="About"><span>About</span></a></li>
			</ul>
			<!-- // Menu -->
			
			<!-- Submenu // -->
			<ul class="wpn_submenu">
					<li class="cat-item cat-item-3"><a href="http://ddrun.x10hosting.com/?cat=3" title="View all posts filed under Test2">Test2</a>
</li>
			</ul>
			<!-- // Submenu -->
<!-- Logo -->
			<div class="wpn_logo" style="bottom: 0px; margin-top: 23px;"><a class="wpn_logo" href="http://ddrun.x10hosting.com/"><img src="http://ddrun.x10hosting.com/wp-content/themes/Elements/img/logo-trans.png" alt=""/></a>
			</div>
		</div>

Here is the CSS I edited:

Code:

.wpn_header {
height:249px;
margin:auto;
position:relative;
width:960px;
z-index:298;
}

.wpn_menu {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(img/menu_bg.gif) repeat scroll 0 0;
border-left:1px solid #000000;
border-right:1px solid #000000;
height:48px;
left:0;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
width:958px;
}

.wpn_submenu {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(img/submenu_bg.gif) repeat scroll 0 0;
height:32px;
left:0;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
padding-top:1px;
width:960px;
}

**MicrotechXP** · 09-13-2009 01:02 AM

I did exactly what you posted and it does not give me what you did.

**MicrotechXP** · 09-14-2009 11:07 PM

bump.

**xav0989** · 09-15-2009 07:09 PM

I'll go check it.
Edit:
Change this CSS:

Code:

.wpn_header {
height:249px;
margin:auto;
width:960px;
z-index:298;
}

.wpn_menu {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(img/menu_bg.gif) repeat scroll 0 0;
border-left:1px solid #000000;
border-right:1px solid #000000;
height:48px;
left:0;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
width:958px;
}

.wpn_submenu {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(img/submenu_bg.gif) repeat scroll 0 0;
bottom:0;
height:32px;
left:0;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
padding-top:1px;
width:960px;
}

Thread: Help Fixing Wordpress theme

LinkBack

Thread Tools

Display

Help Fixing Wordpress theme

Re: Help Fixing Wordpress theme

Re: Help Fixing Wordpress theme

Re: Help Fixing Wordpress theme

Re: Help Fixing Wordpress theme

Re: Help Fixing Wordpress theme

Re: Help Fixing Wordpress theme

Re: Help Fixing Wordpress theme

Re: Help Fixing Wordpress theme

Re: Help Fixing Wordpress theme

Similar Threads

Please check out my wordpress theme

wordpress theme

Download my new free wordpress theme

Download my free wordpress theme

[REQ] Wordpress Theme -Digg

Posting Permissions