How To Change Header (16 posts)

  1. neilcg
    Posted 6 years ago #

    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;
    // -->
    <?php wp_head(); ?>
    <div id="wrapper">
    <div id="header">
    <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='); ?>
    </div><!-- end of navigation -->
    <div id="nav_right"><!-- --></div>
    <table id="mainbody" >
    		<td valign="top">
    			<div id="buyform">
    				<?php include (TEMPLATEPATH . '/sidebar2.php'); ?>

    The Stylesheet:

    /**************** Body *********************/
    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;}
    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;
    #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;}
    #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 *********************/
    .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;}
    #commentform p{margin:5px 0;}
    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;}
    .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; }
  2. yellaojrak
    Posted 6 years ago #

    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.

  3. neilcg
    Posted 6 years ago #


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

    Thanks for your help.


  4. neilcg
    Posted 6 years ago #


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



  5. yellaojrak
    Posted 6 years ago #

    Okay then. Site url, please?

  6. neilcg
    Posted 6 years ago #

    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.



  7. yellaojrak
    Posted 6 years ago #

    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;}

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

  8. neilcg
    Posted 6 years ago #


    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.


  9. neilcg
    Posted 6 years ago #

    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.

     /* ----------------------------------------------
    ------------------------------------------------- */
    .ftitle {
    	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;
     /* ----------------------------------------------
  10. starlan620
    Posted 6 years ago #

    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.

  11. starlan620
    Posted 6 years ago #

    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!

  12. Samuel B

    Posted 6 years ago #

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

  13. yellaojrak
    Posted 6 years ago #

    @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/

  14. neilcg
    Posted 6 years ago #

    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


  15. yellaojrak
    Posted 6 years ago #

    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.


  16. neilcg
    Posted 6 years ago #

    Hi Thanks

    I am muddleing through.

Topic Closed

This topic has been closed to new replies.

About this Topic