8 {{ upvoteCount | shortNum }}
8 {{ upvoteCount | shortNum }}

Need custom wordpress header install help..

by mdcnet
6 replies
  • WEB DESIGN
    • |
Hello,

I am having a custom header made for my wordpress blog and I have a few questions I need answered before I can have it finished and installed

1. I need to know what size header i need - the person making it for me is asking what size i need it for and i have no idea
2. Can i install a custom header on my current blog? I have no idea? Or do i neeed a diff theme that allows custom headers?
3. When i get a theme that will work for a custom heafer (if my current theme does not) then how can i install the header? Is there an easy install through wordpress, or do i have to use that file transfer program (FTP?) thing? I do not know how to use that yet, and Im hoping to avoid it for now, lol

Thanks for any suggestions/advice , I appreciate it!

BTW heres the blog that Im trying to install the header for .

www.yourdirtylittlesecrets.com
#custom #header #install #wordpress
  • Profile picture of the author smoke.sessions
    1) 936x220 is what I'm seeing the header image as.
    yourdirtylittlesecrets.com/wp-content/themes/inove/img/header_footer.jpg (I can't post live links, I just joined here)
    But that includes the navigation bar and everything. If you want to keep the navigation bar the same, send your designer that image and tell him to only design on the black area of the header and leave all the other parts how they are.

    2) You can put a custom header on any website as long as you have access to the HTML files, which normally you always do. If you do need any help feel free to PM me or add me on AIM: waitintoinhale[at]gmail.com or ICQ: 587241663

    3) You would have to manually edit the HTML file unless in your WP dashboard under Themes there is a link that says '(Theme's Name) Options.' Like I said, you can add me or PM me and I'll do it for free.

    I hope this helps!
    Signature

    PM me if you need a custom WP plugin or a website built!

    {{ DiscussionBoard.errors[1488535].message }}
  • Profile picture of the author netwiseprofits
    Yes you can install a custom header to any wordpress theme.

    Here is how I do it:

    To find the size of the header there are 2 ways to find it.

    1) Get into the back office of your wordpress blog and then click on Appearances, then Editor. In the CSS (stylesheet) scroll down until you see the following code (below), here you will find your header size. This is from one of my wordpress blogs. See red for header size.

    #header {
    height:131px;
    width:1000px;
    padding-left:0px;
    padding-top:0px;
    clear:both;
    margin:auto;
    text-align:left;
    background-image:url(images/blogheader.gif);

    Or the long way is to open the images file that comes with every wordpress theme, find the blank header file open that in a program like Fireworks and the header size will be displayed.

    Once you have created your new header upload it to your server into the images file within your wordpress folder. You'll find that in wp-content, then in themes, then in images.

    Once you have done that change the file name to reflect your new header in the code above, I put that in blue. Click the "up date file" button at the bottom of the stylesheet in wordpress and you're good to go.

    Hope that helps
    {{ DiscussionBoard.errors[1488758].message }}
    • Profile picture of the author mdcnet
      Thanks for all the info guys. I have one made already byt this guy I hired and its larger and it looks too good to shrink down so I think I will need a new theme anyways.

      heres what it shows right now when i go back into the dashboard under the CSS, under header.php

      <?php include('templates/start.php'); ?>
      <!-- container START -->
      <div id="container">
      <?php include('templates/header.php'); ?>
      <!-- content START -->
      <div id="content">
      <!-- main START -->
      <div id="main">


      not sure what it means but it looks like its templated into the theme i selected?
      {{ DiscussionBoard.errors[1489526].message }}
      • Profile picture of the author Karen Blundell
        yes...you need to look on the right, and select header.php
        and then it will load into the theme editor
        Signature
        ---------------
        {{ DiscussionBoard.errors[1489735].message }}
        • Profile picture of the author mdcnet
          I did find this on the 'stylesheet' :



          /* header START */
          #header {
          background:url(img/header_footer.jpg) 0 0 no-repeat;
          height:132px;
          }
          #caption {
          height:44px;
          padding:25px 30px 21px;
          }
          #title a {
          text-decoration:none;
          color:#FFF;
          /*width:250px;*/
          height:30px;
          display:block;
          font-family:"Trajan Pro";
          letter-spacing:0;
          }
          /* image blog title */
          /*
          #title a {
          background:url(img/title.gif) no-repeat;
          text-decoration:none;
          color:#FFF;
          width:250px;
          height:30px;
          text-indent:-999em;
          display:block;
          }
          */
          #tagline {
          color:#FFF;
          border-top:1px solid #FFF;
          text-decoration:none;
          font-size:10px;
          float:left;
          padding:0 3px;
          }
          #navigation {
          margin:1px 0;
          }
          #menus li {
          display:inline;
          list-style:none;
          }
          #menus li a {
          background:transparent url(img/menu.gif) no-repeat;
          display:block;
          color:#382E1F;
          height:31px;
          line-height:31px;
          padding:0 20px;
          margin-left:-10px;
          text-decoration:none;
          font-size:11px;
          float:left;
          z-index:1;
          }
          #menus li a:hover {
          background-position:0 -31px;
          }
          #menus li.current_page_item a,
          #menus li.current-cat a {
          background-position:0 -62px;
          }
          #menus li a.home {
          background-position:0 -93px;
          width:45px;
          padding:0;
          margin-left:0;
          text-indent:-999em;
          }
          #menus li a.home:hover {
          background-position:0 -124px;
          }
          #menus li.current_page_item a.home {
          background-position:0 -155px;
          }
          #menus li a.lastmenu:hover {
          background-position:0 0;
          }
          #searchbox {
          width:280px;
          float:right;
          padding:4px 10px;
          }
          #searchbox .textfield {
          line-height:16px;
          width:180px;
          float:right;
          }
          #searchbox .switcher {
          background:url(img/icons.gif) 0 0 no-repeat;
          float:right;
          width:18px;
          height:22px;
          line-height:16px;
          display:block;
          text-indent:-999em;
          padding:0 2px;
          height:16px;
          margin-top:3px;
          }
          /* header END */
          {{ DiscussionBoard.errors[1489877].message }}
      • Profile picture of the author Abledragon
        Originally Posted by mdcnet View Post

        Thanks for all the info guys. I have one made already byt this guy I hired and its larger and it looks too good to shrink down so I think I will need a new theme anyways.
        It depends on whether it's too wide or too high. If it's too high you can increase the size of the header div height:

        # header { height: 500px; } (or whatever the new height is)

        That's a relatively easy fix because it won't affect other divs.

        If it's too wide you can adjust the width in the same way { width: new-widthpx; } but that will likely have an impact on your content div width, and possibly others as well (nav bar, for example), so you may need to adjust that one/those ones too.

        If you're using Firefox I highly recommend the Firebug add on. With that activated you can place your cursor on a specific element on your page and it will tell you what the div name is.

        Then you can find that div in your stylesheet and make the necessary adjustments.

        Firebug absolutely slashed the amount of time I spend making adjustments to pages simply because I can find the div name and go straight to it.

        Cheers,

        Martin.
        Signature
        WealthyDragon - Earning My Living Online
        {{ DiscussionBoard.errors[1490049].message }}

Trending Topics