WordPress.org

Support

Support » Themes and Templates » How To Change Header

How To Change Header

  • Hi All

    I have taken over a blog and hate the header. I want to change the images and text. I just can’t find where to do this. I have looked in the header.php and the stylesheet .css.

    The theme is Excellence by Jai Nischal Verma, but I think it has been altered a fair bit by previous owner.

    Any help would be greatly appreciated. Many Thanks

    The header.php is here:

    <!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 bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php 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="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/tabber.js"></script>
    <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/tab.css" type="text/css" media="screen" />
    <script type="text/javascript">
    <!--
    function popup(url)
    {
     params  = 'width='+screen.width;
     params += ', height='+screen.height;
     params += ', top=0, left=0'
     params += ', fullscreen=yes';
    
     newwin=window.open(url,'windowname4', params);
     if (window.focus) {newwin.focus()}
     return false;
    }
    // -->
    </script>
    
    <?php wp_head(); ?>
    </head>
    <body>
    <div id="wrapper">
    <div id="header">
    </div>
    
    <div id="nav_left"><!-- --></div>
    <div id="navigation">
    <ul id="menu">
    <li class="<?php if (((is_home()) && !(is_paged())) or (is_archive()) or (is_single()) or (is_paged()) or (is_search())) { ?>current_page_item<?php } else { ?>page_item<?php } ?>"><a href="<?php echo get_settings('home'); ?>">Home<?php echo $langblog;?></a></li>
    <?php wp_list_pages('sort_column=menu_order&depth=1&title_li='); ?>
    </ul>
    </div><!-- end of navigation -->
    <div id="nav_right"><!-- --></div>
    
    <table id="mainbody" >
    	<tr>
    		<td valign="top">
    			<div id="buyform">
    				<?php include (TEMPLATEPATH . '/sidebar2.php'); ?>
    			</div>
    		</td>
    		<td>

    The Stylesheet:

    */
    
    /**************** Body *********************/
    *{margin:0;padding:0;}
    body{background:#adadad; top repeat-x; font-family:Arial; font-size:14px;}
    #wrapper {width:932px; margin:auto;}
    
    /**************** Links & formatting *********************/
    a, a:link, a:visited, a:active {color:#669900; text-decoration:none;}
    a:hover{color:#666666;}
    h2.message {font-size:12px; color: #666; background-color:#EFEFEF;
     padding:5px 5px 5px 10px; margin-bottom:10px; text-transform:uppercase; font-weight:normal;}
    
    /**************** Header *********************/
    #header {height:65px;
     padding-bottom:0px; margin-top:10px; margin-left:10px; position:relative;
     background:url(images/top-tab.png);background-repeat:no-repeat;}
    #logo {width:171px; float:left; background:url(images/logo-white-background.png); height:60px;}
    #logo h1 a {color:#CCCCCC; font-size:134px; display:block;}
    #logo h1 a:hover {color:#FFFFFF;}
    #logo h2 {color: #666666; font-size:11px; text-transform:uppercase; margin-top:2px;}
    #logo_right {width:350px; float:right;}
    #topsearch {margin-top:10px; float:right; margin-right:10px;}
    .rss {width:105px; height:56px; position:absolute; bottom:0px; right:180px; display:block;}
    .searchfield {padding:5px 7px 5px 7px; border:none; color:#ccc; font-family:Arial, Helvetica, sans-serif; background-color: #4A4A4A; font-size:12px; width:160px;}
    
    /**************** Navigation *********************/
    #nav_left {width:17px; height:30px; background:url(images/menu-left-edge.png); float:left; }
    #navigation{height:30px; background:url(images/menu-centre.png) repeat-x;
     float:left; width:875px; }
    #menu{text-align:left; z-index:50; position:relative; margin-top:1px; }
    #menu li{display:inline;list-style:none; font-weight:bold; font-size:14px;}
    .page_item a:link, .page_item a:visited{color:#fff; line-height:34px; display:block; padding:0 20px 0 20px; float:left; margin-right:5px; margin-top:-4px;}
    .page_item a:hover {color:#fff;  text-decoration:none; repeat-x;}
    .current_page_item a:link, .current_page_item a:visited{color:#fff;margin-right:5px;line-height:34px; padding:0 20px 0 20px; display:block; float:left; text-decoration:none;}
    #nav_right {width:17px; height:30px; background:url(images/menu-right-edge.png); float:left; }
    
    /************main body**********/
    #mainbody {width:876px; background-color:#fff; margin-left:15px;}
    
    #cformsii{ padding:0px; margin:0px;}
    
    /*************form*****************/
    #buyform {float:left; width:180px; background-color:#fff;}
    
    /**************** Entry *********************/
    #blog { width:420px;float:left; margin-top:20px; margin-left:10px; padding-left:10px; }
    #blog li{margin-left:20px; list-style-type:none;}
    .post {padding:10px 0 30px 0;}
    .post h2 {line-height:32px; margin-bottom:5px;}
    .post h2 a{font-size:26px; color:#333333; letter-spacing:-1px;}
    .post h2 a:hover {color:#000000;}
    html>body .post  ul { margin-left: 0px; padding: 0 0 0 30px; list-style: none; padding-left: 10px; text-indent: -10px; }
    html>body .post  li { margin: 7px 0 8px 10px; }
    .post ul li:before{ content: "0BB 020"; }
    .post img {margin:0 10px 10px 10px;}
    .date {font-size:11px; color: #669900; padding:5px 0 5px 0; position:relative; height:20px;}
    .comms { position:absolute; right:0px; top:0px;}
    .comms a {font-size:11px; text-transform:uppercase; font-weight:bold; color: #fff; background:url(images/comment.gif) no-repeat; padding:10px 0 0 0px; text-align:center; display:block; height:18px; width:107px;}
    .comms a:hover {color: #456127;}
    .meta{background-color:#EEEFE0;border:1px solid #dbdbdb;color:#333;font-size:10px;line-height:20px;margin:10px 0px 10px;padding:2px 6px 2px 6px;text-transform:uppercase;width:445px;}
    .meta a { color:#666; font-weight:bold;}
    .meta a:hover {color:#000;}
    .date span { font-weight:bold; color:#669900;}
    .content {line-height:24px; color:#333;}
    .content p {margin:0 0 15px 0;}
    .postmetadata {padding:5px; border:1px solid #dbdbdb;background-color:#EEEFE0; font-size:10px; line-height:18px; text-transform:uppercase;}
    
    /**************** Sidebar *********************/
    #sidebar {float:left; width:210px; padding:20px 0 0 40px;}
    #sidebar p {color:#666; line-height:20px;}
    #sidebar ul li {list-style:none;}
    #sidebar h2 {font-size:15px; color:#333333; margin:20px 0 20px 0; clear:both;}
    h2.author {background:url(images/author_icon.jpg) left no-repeat; padding-left:24px;}
    .authimg {float:left; margin:0 20px 0 0;border:1px solid #999999;}
    .ads li {list-style:none; display:inline; margin-right:15px;}
    .ads li img {border:1px solid #999999;}
    .adhere a {font-size:11px;}
    
    #sidebar2 ul li {list-style:none;}
    
    .sidebar1, .sidebar2 {float:left; width:200px; margin-bottom:20px;}
    .sidebar1 h2, .sidebar2 h2 {background:url(images/categories.jpg) left no-repeat; padding-left:24px;}
    .sidebar1 ul li ul li {padding:5px 0 5px 10px; font-size:12px; list-style:none; }
    .sidebar2 ul li ul li {padding:5px 0 5px 10px; font-size:12px; list-style:none;}
    
    /**************** Comments *********************/
    .alt{margin:0;padding:10px;}
    .commentlist{padding:0;}
    .commentlist li{background-color:#EEEFE0;border:1px solid #dbdbdb;list-style:none;margin:15px 0 10px;padding:5px 5px 10px 5px;}
    .commentlist li ul li{margin-left:10px;margin-right:-5px;}
    .commentlist p{color:#666666;font-size:12px;margin:10px 5px 10px 0;}
    .children{padding:0;}
    #commentform p{margin:5px 0;}
    .nocomments{margin:0;padding:0;text-align:center;}
    h2#comments{clear:both;color:#333333;font-size:15px;margin:0px 0 20px 0;}
    h2#respond{clear:both;color:#333333;font-size:15px;margin:20px 0 20px 0;}
    .commentmetadata{background-color:#fff;color:#333;font-size:13px;margin:0;padding:3px 5px 3px 5px;}
    .commentmetadata a{color:#333;font-weight:bold;}
    #author, #email, #url{background:#EEEFE0;border:1px solid #dbdbdb;color:#666666;font:12px Arial;margin-right:5px;padding:3px;width:12em;}
    #comment{background:#EEEFE0;border:1px solid #dbdbdb;color:#666666;font:12px Arial;padding:3px;width:99%;}
    #submit{font:1em Arial;margin-bottom:15px;margin-top:5px;padding:2px;}
    
    /**************** Footer *********************/
    #footer { height:104px; background:url(images/footer.jpg) repeat-x;}
    .copyright {font-size:11px; color:#fff; width:930px; margin:auto; padding:20px 10px 10px 10px; text-transform:uppercase;}
    .copyright a{color:#97BE3D;}
    .copyright a:hover {color:#fff;}
    
    /**************** Gallery *********************/
    .gallery {text-align:center;}
    .gallery img {padding:2px; height:100px; width:100px;}
    .gallery a:hover {background-color:#ffffff;}
    .attachment {text-align:center;}
    .attachment img { padding:2px; border:1px solid #999999;}
    .attachment a:hover {background-color:#FFFFFF;}
    .imgnav {text-align:center;}
    .imgleft {float:left;}
    .imgleft a:hover {background-color:#FFFFFF;}
    .imgleft img{ padding:2px; border:1px solid #999999; height:200px; width:100px;}
    .imgright {float:right;}
    .imgright a:hover {background-color:#FFFFFF;}
    .imgright img{ padding:2px; border:1px solid #999999; height:100px; width:100px;}
    
    /*******Miscellaneous*******/
    .navigation {clear:both;}
    .alignleft {font-weight:bold; float:left; margin:10px 0 20px 0; text-transform:uppercase; font-size:12px;}
    .alignright {font-weight:bold; float:right; margin:10px 0 20px 0; text-transform:uppercase; font-size:12px;}
    acronym, abbr, span.caps {cursor: help;}
    acronym, abbr {border-bottom: 1px dashed #999;}
    blockquote {margin: 6px 10px 6px 10px; padding-left: 10px; border-left: 2px solid #E0E55F; }
    blockquote cite { margin: 5px 0 0; display: block; }
    pre {border: solid 1px #9a9a9a;color: blue;margin: 10px;padding:10px;background: #f3f2ed}
    code {font-size:1.0em;color: #0099CC; display:block; margin-bottom:15px; }
Viewing 15 replies - 1 through 15 (of 15 total)
  • Image: I think editing #header {background:url(imagefile/here);} and/or #logo {background:url(imagefile/here);} would do.

    Text: From your dashboard, go to Settings, everything is there.

    Hey

    Thanks for the reply. I will look at that tomorrow and report back.

    Thanks for your help.

    Neil

    Hi

    I looked at setting but could not find anywhere to edit these, any more clues would be fantastic.

    Thanks

    Neil

    Okay then. Site url, please?

    Hi Yellaojrak

    So grateful for your help and offer to help further, much appreciated, but I have actually decided to chnage theme and the issue is sorted.

    However I do have another issue which I am going to post on a new thread. It relates to fonts, I want all my pages to use helvectica but dont know how to edit the stylesheet to accomplish this.

    If you can help with this I would be most grateful, but as I say I will submit a new thread on it also.

    Thanks

    Neil

    Oh, that’s supossed to be in your theme’s style.css. Look for a word ‘body’ in there. Within body’s brackets, look for ‘font-family’ or ‘font’. Then edit the first font name. Example:
    body {font-family:Tahoma,Verdana,Arial,sans-serif;}

    edit
    body {font-family:Helvetica,Verdana,Arial,sans-serif;}

    Hey

    Thanks, I know exactly where that is. I tried to put helvetica as so:

    “helvetica” but it didn’t work.

    So simple I just move it to the front.

    Thanks so much.

    Neil

    Hi yellaojrak

    You have been so helpful, I wonder if you might just help once again, much appreciated. I am fairly new to this and learning so much all the time.

    I want to insert a couple of images from file into the header. I am just not sure of the best way to do it.

    The url is : http://www.greenbananaguide.com and I want to put the images on the right hand side just in front of the rss logo.

    The header section of my stylesheet is below. Do I need to for example open the images in dreamweaver and get the code and insert it in the stylesheet. If I am correct where would I put it?

    Thanks again.

    */
     /* ----------------------------------------------
       HEADINGS, SITE NAME AND SLOGAN
    ------------------------------------------------- */
    .ftitle {
    	height:170px;
    	margin-bottom: 5px;
    	color: #0000FF;
    	background-color: #99FFFF;
    	width: 250px;
    	overflow: hidden;
    }
    h1 {
    	font-size: 18px;
    	color: #6b6b6b;
    	font-weight: bold;
    	padding: 16px 10px 15px 10px;
    }
    h3 {
    	padding: 16px 10px 4px 10px;
    	font-size: 14px;
    	color: #6b6b6b;
    	font-weight: normal;
    }
    h2 {
    	font-size: 16px;
    	color: #6b6b6b;
    	font-weight: normal;
    	padding: 0px;
    	margin-top: 0px;
    	margin-left: 0px;
    	margin-right: 0px;
    	margin-bottom: 4px;
    	}
    #header h1#logo-text a {
    	position: absolute;
    	float: left;
    	margin: 0; padding: 0;
    	font: bold 25px;;
    	text-decoration: none;
    	color: #fff;
    	top: 55px; left: 35px;
            font-size: 27px;
    }
    #header p#slogan {
    	position: absolute;
    	margin: 0;
    	padding: 0;
    	color: #FFFFFF;
    	letter-spacing: -0.5px;
    	top: 75px;
    	left: 35px;
    	font-size: 18px;
    
    }
    #sidebar h3 {
    	color: #7f931d;
    	text-transform: none;
    	font-size: 1.6em;
    	width: 280px;
    	margin-top: 10px;
    	padding-top: 10px;
    	padding-right: 0;
    	padding-bottom: 2px;
    	clear: both;
    	list-style: none;
    }
     ul.categories {
     	text-decoration: none;
     	}
    #footer-wrap h3 {
    	color: #7f931d;
    	margin: 0;
    	padding: 10px;
    	text-transform: uppercase;
    	text-align: center;
    }
    #central .title {
    	font-size: 14px;
    	clear: both;
    	padding-top: 5px;
    	float: left;
    	padding-bottom: 2px;
    	width: 550px;
    }
     /* ----------------------------------------------

    I also have a problem on changing the header and I don’t follow the solution given, it is because I am not technically trained and slow to follow.

    Hi Ms. yellaojrak, what do you mean by, “Okay then. Site url, please?” and where can I find the site url? Please help me…ty!

    starlan620
    she means what is the url to your site?
    different themes do things differently

    @neilcg: I’m not sure I get you right, but…

    If you want to change the green thing in your header, you can add something like this:
    #header {background:url('urlofyourimagehere');}

    If you want to add something like the rss button in your header, I think you’re going to have to deal with the theme’s php file (e.g., header.php).

    @starlan620: site url is the site’s address. E.g., http://wordpress.org/support/

    Hi yellaojrak

    Thanks very much again. Sorry I was not clear. Yes I want to add an image like the rss button onto the green header.

    I will try this in the header php.

    I wonder, would I do something similar to the background suggestion that you gave replacing background with image.

    I will have a go anyway.

    Most grateful

    Neil

    I’m not good with php, so sorry I can’t help much. But if you have the script already, I think you can put it in the header.php. Don’t forget to back up the file, well… just in case.

    Sorry.

    Hi Thanks

    I am muddleing through.

Viewing 15 replies - 1 through 15 (of 15 total)
  • The topic ‘How To Change Header’ is closed to new replies.