Need help editing Wordpress theme header

Discussion in 'WordPress' started by nebraskaemarketing, Mar 27, 2008.

0
  1. #1
    I have a blog located here: vegetarian blog . The blog header has a one row table situation with a background image that's 950x200.

    I would like to change the header to be a two row situation, with the top row containing the title/sub-title, and rss icon...and the bottom row to have three columns so I can place wordpress recent and popular post code. The three columns would probably be spaced into thirds.

    I want the entire header to retain it's origianl size and have the same background image.

    Here's the header code:

    <!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(is_home() || is_search()) { bloginfo('name'); echo ' - '; bloginfo('description'); } else { wp_title('') ;} ?></title>

<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />


<?php wp_get_archives('type=monthly&format=link'); ?>

<?php wp_head(); ?>
</head>
<body>

<div id="page">

<div id="header">
    
    
        <div id="header_left">
            <h1><a href="<?php echo get_settings('home'); ?>"><?php bloginfo('name'); ?></a></h1>
            <div class="description"><?php bloginfo('description'); ?></div>
        </div>
    
        <div id="header_right">
            <div id="subscribe">
                <a href="<?php bloginfo('rss_url'); ?>" title="Subscribe to RSS feed" rel="nofollow"><img src="<?php bloginfo('template_url'); ?>/images/rss-feed-icon.jpg" alt="Subscribe to RSS feed" /></a>
            </div>
        </div>
        <div style="clear:both;"></div>
    
    
</div>
<hr />
    Code (markup):
    and here's the css:

    /*
Theme Name: ProSense-Blue
Theme URI: http://www.doshdosh.com/wordpress-themes/Prosense-Adsense-Ready-SEO-Theme
Description: ProSense-Blue is a fast loading and search engine optimized Adsense Ready Wordpress Theme, specifically designed for all types of niche and professional content.<br /><br />Distributed under the Creative Commons Attribution-ShareAlike 3.0 License.
Author: Dosh Dosh</a> and <a href="http://thewrongadvices.com">The Wrong Advices</a>
Author URI: http://www.doshdosh.com


/*-----------Block Level Elements--------------*/

*{
    margin:0;
    padding:0;
}

body {
    font: 62.5% 'Lucida Grande', Verdana, Arial, Sans-Serif;
    background: #999999;
    margin: 0px;
    padding: 0px;
}

body a, body a:visited {
    color: #466EDB;
    text-decoration: none;
}

body a:hover {
    text-decoration: underline;
}

body p {
    padding: 5px 0px;
    margin: 5px 0px;
}

#page {
    width: 950px;
    margin: 0px auto;
    background: #FFF url('images/page_background.jpg') top center repeat-y;
    padding: 0 10px 0 10px;
}

#header {
    width: 100%;
    background: #000;

    height: 200px;
    background: #FFF url('images/header_footer_img.jpg') top center repeat-y;
}


#header h1 {
    font-size: 3.0em;
    padding: 0;
    margin: 0;
    color: #fff;
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Arial, sans-serif;
    
}

#header h1 a {
    color: #fff;
}

.description {
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Arial, sans-serif;
}

#header #header_right {
    float:right;
    width: 390px;
    text-align: right;
    font-size: 1.2em;
    color: #fff;
    padding: 20px 20px 20px 0;
}

#header #header_left {
    float:left;
    width: 480px;
    text-align: left;
    font-size: 1.2em;
    color: #fff;
    padding: 10px 0px 20px 20px;
}

#subscribe {
    text-align: right;
}

#wrapper {
    width: 100%;
}

#content {
    float: left;
    width: 500px;
    line-height: 1.6em;
    padding-left: 20px;
    padding-top: 20px;
}

#sidebar {
    float: right;
    width: 410px;
    margin-left: 0px;
    padding-top: 0px;
}

#footer {
    color: #fff;
    width: 100%;
    clear: both;
    background: #FFF url('images/header_footer_img.jpg') top center repeat-y;
}

#footer a, #footer a:hover, #footer a:visited {
    color: #fff;
    text-decoration: none;
}

#footer_left {
    padding: 10px 0 10px 20px;
    text-align: left;
    float: left;
    width: 480px;
    line-height: 1.6em;
}

#footer_right {
    padding: 10px 20px 10px 0;
    text-align: right;
    float: right;
    width: 390px;
    margin-left: 0px;
}



/*-------------Headings-------------*/

h1, h2, h3, h4 {
    font-family: Helvetica, Arial, Sans-Serif;
}

h1 {
    font-size: 3.0em;
    line-height: 1.0em;
}

h2 {
    font-size: 2.0em;
}

h3 {
    font-size: 1.5em;
}

h4 {
    font-size: 1.0em;
}


/*-------------The Post-------------*/



.post h2, .post h2 a:hover, .post h2 a:visited, .post h2 a {
    font-size: 1.4em;
    text-decoration: none;
    color: #2B489B;
    margin-bottom: 10px;
    line-height: 1.0em;
}

.post {
    font-size: 1.2em;
    margin-bottom: 30px;
    text-align: justify;
}

.post p {
    padding: 5px 0px;
    margin: 5px 0px;
}

.post ul, .post ol {
    margin: 10px 0 10px 0;
    padding-left: 40px;
}

.post li {
    padding: 2px 0 2px 0;
}

.entry {
    margin-bottom: 10px;
    text-align: justify;
}

.entrytext .postmetadata {
    margin-top: 20px;
    text-align: justify;
}

.postmetadata {
    border-top: 1px dashed #ccc;
    padding-top: 2px;
    margin-bottom: 40px;
    text-align: right;
}

.postmetadata alt {
    border-top: 1px dashed #ccc;
    padding-top: 2px;
    margin-bottom: 40px;
    text-align: left;
}

.navigation {
    display:block;
    margin-bottom: 20px;
}

#nav {
    list-style-type : none;
    text-align : center;
       font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    line-height: 3.15em;
    height : 40px;
}

#nav a {
   margin: 0px;
   width : 94px;
   height : 20px;
   font-weight : bold;
   font-style : normal;
   display : block;
   padding: 0 0 10px 0;
}

#nav a:hover {
    background: #000;
}

#nav li {
    float: right; 
    list-style-type: none;
    margin: 0px;
    border-right: solid 1px #fff;
}
 
.alignleft {
    float:left;
    text-align:left;
}

.alignright {
    float:right;
    text-align:right;
}

.pagetitle {
    font-size: 1.6em;
    margin-bottom: 20px;
}

blockquote {
    margin: 10px 0 10px 0;
    padding: 5px 10px 5px 10px;
    background: #D7E1FF;
    border-top: solid 1px #9DB7FF;
    border-bottom: solid 1px #9DB7FF;
}


code{
    font:1.2em 'Courier New',Courier,Fixed;
    display:block;
    overflow:auto;
    text-align:left;
    margin: 10px 0 10px 0;
    padding: 5px 10px 5px 10px;
    background: #D7E1FF;
    border-top: solid 1px #9DB7FF;
    border-bottom: solid 1px #9DB7FF;
}

a img {
    border: 0;
}


/*--------------Sidebar------------*/

#sidebar ul {
    margin-bottom:20px;
}

#sidebar a {
    color: #2B489B;
}

#sidebar .sidebar_left ul h2 {
    padding-bottom: 10px;
    border-bottom: dashed 1px #9DB7FF;
    font-size: 1.5em;
}

#sidebar .sidebar_right ul h2 {
    padding-bottom: 10px;
    border-bottom: dashed 1px #80A0F6;
    font-size: 1.5em;
}

#sidebar ul li {
    list-style:none;
    line-height:1.6em;
    font-size: 1.1em;
}

#sidebar ul ul {

}

#sidebar .sidebar_left ul ul li {
    border-bottom: dashed 1px #9DB7FF;
}

#sidebar .sidebar_right ul ul li {
    border-bottom: dashed 1px #80A0F6;
}

#sidebar a:hover {
    text-decoration: underline;
}

#sidebar .sidebar_left {
    width: 185px;
    float: left;
    padding: 0 10px 0 10px;
}

#sidebar .sidebar_right {
    width: 185px;
    float: right;
    padding: 0 10px 0 10px;
}

#sidebar .sidebar_left ul ul li ul{ 
      padding-left:20px; 
      margin-bottom:0; 
}

#sidebar .sidebar_left ul ul li ul li{ 
      list-style:none; 
      line-height:1.6em; 
      font-size: 1.1em; 
      border-bottom:0; 
} 
  
#sidebar .sidebar_right ul ul li ul{ 
      padding-left:20px; 
      margin-bottom:0; 
} 
  
#sidebar .sidebar_right ul ul li ul li{ 
      list-style:none; 
      line-height:1.6em; 
      font-size: 1.1em; 
      border-bottom:0; 
}

/*--------------Comments--------------*/

#comments {
    font-size: 1.6em;
    margin-bottom: 20px;
    border-bottom: 1px dashed #ccc;
    padding-bottom:20px;
}

#respond {
    font-size: 1.6em;
    margin-bottom: 5px;
}

ol.commentlist {
    list-style-type : none;
    font-size: 1.2em;
}

ol.commentlist li {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px dashed #ccc;
}

ol.commentlist li.alt {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px dashed #ccc;
}

#comment_title {
    margin-bottom: 5px;
}

#commentform {
    margin-bottom: 20px;
}

#commentform p {
    margin-bottom: 10px;
}

#commentform textarea {
    width:99%;
    padding:2px;
    font-size: 12px;
    background-color: #fff;
    border: 1px solid #ccc;
    }
    

/*--------------Search Form-------------*/

#search {
    margin-bottom: 20px;
    text-align: right;
}

#searchform {
    margin-bottom: 20px;
}

#searchform input {
    width: 180px;
    background: #fff;
}

/*-------------Calendar-----------------*/

#wp-calendar {
    width: 180px;
    text-align: left;
    margin-top: 5px;
}

#wp-calendar th {
    margin-top: 5px;
}

#wp-calendar caption {
    font-size: 1.2em;
    margin-top: 5px;
}

/*-------------Other------------------*/

hr {
    display: none;
}

#adsense_singlepost_top_square {
    float: left;
    margin-right: 10px;
}

#adsense_singlepost_bottom_square {
    margin-bottom: 30px;
}

#adsense_singlepost_top_banner {
    margin-bottom: 5px;
}

#adsense_singlepost_bottom_banner {
    margin-bottom: 30px;
}

#adsense_homepage_linkunit {
    margin-bottom: 30px;
}

#adsense_homepage_banner {
    margin-bottom: 30px;
}
    Code (markup):

    Thanks in advance!
     
    nebraskaemarketing, Mar 27, 2008 IP
  2. PSHeads

    PSHeads Peon

    Messages:
    112
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I see you're using ProSense. That theme is not very customizable, and I don't think you can insert a header image. I've tried myself. If you've noticed, none of the blogs using that theme have unique headers.

    Sorry.
     
    PSHeads, Mar 27, 2008 IP
  3. nebraskaemarketing

    nebraskaemarketing Well-Known Member

    Messages:
    169
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    110
    #3
    I'll figure a way. Has to be one.
     
    nebraskaemarketing, Mar 27, 2008 IP
  4. PSHeads

    PSHeads Peon

    Messages:
    112
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Hmmmm. I would like to see this.
     
    PSHeads, Mar 28, 2008 IP
  5. nebraskaemarketing

    nebraskaemarketing Well-Known Member

    Messages:
    169
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    110
    #5
    nebraskaemarketing, Mar 29, 2008 IP
  6. Handsofmodder

    Handsofmodder Peon

    Messages:
    177
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #6
    just curious, how did you do that? Because I'm thinking about using that theme for my blog, Hyper Tech Ninja

    Also, I'm a vegetarian as well! :D and I subscribed to your rss feed!
     
    Handsofmodder, Mar 29, 2008 IP
  7. PSHeads

    PSHeads Peon

    Messages:
    112
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #7
    WOW. You're good.
    Is there any chance I could have the code please?
    I'd like to try it out on my site, PlayStation Heads,

    I'm impressed.
     
    PSHeads, Mar 29, 2008 IP
  8. JinAdSales

    JinAdSales Peon

    Messages:
    77
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Could someone post the code for this? I'd love to get a header image in ProSense, and I'd also like to get a half banner up there next to the header logo, like the Playstation blog. Is anyone able to do this? Thanks!
     
    JinAdSales, Apr 7, 2008 IP
  9. Houdy

    Houdy Peon

    Messages:
    267
    Likes Received:
    18
    Best Answers:
    0
    Trophy Points:
    0
    #9
    I haven't messed with that theme but in the style.css look for this bit of code to change the header image:


    #header {
    width: 100%;
    background: #000;

    height: 200px;
    background: #FFF url('images/header_footer_img.jpg') top center repeat-y;
    PHP:
    Upload your new image to the themes images folder and then change the above header_footer_img.jpg to the name of your new header image.
     
    Houdy, Apr 7, 2008 IP
  10. silveraden

    silveraden Banned

    Messages:
    3,833
    Likes Received:
    109
    Best Answers:
    0
    Trophy Points:
    0
    #10
    silveraden, Jul 26, 2008 IP