WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Header image on Cordobo Greenpark 2 (14 posts)

  1. magician1111
    Member
    Posted 4 years ago #

    When I tried to add a header image to the Cordobo Greenpark 2 theme, I couldn't find the code to modify as described in Codex. Do I need to be in another area rather than header.php? Also, I uploaded the image through "Media" in the Dashboard and I think it resized my header. Do I need to upload it through FTP, and to what folder?

  2. esmi
    Forum Moderator
    Posted 4 years ago #

    There are thousands of WordPress themes - which means that many people won't be familiar with your particular theme. So a link to your site might help.

  3. magician1111
    Member
    Posted 4 years ago #

    Thank you. Makes sense. Here it is: http://landscapephotographyblogger.com/

  4. tisbrian
    Member
    Posted 4 years ago #

    That is one heck of a long domain! 0_o

  5. tisbrian
    Member
    Posted 4 years ago #

    Look into the style sheet, you should be able to change:

    #header {
     background: url(img_url.jpg);
    }

    Thanks, Brian

  6. magician1111
    Member
    Posted 4 years ago #

    Thanks for writing. There are only two sections in the style.css that contain the word header:

    #header,
    #main,
    #footer {
    background-color: #fff;
    text-align: left;
    margin: 0 auto 3px;
    width: 985px;
    }

    #header,
    #sidebar,
    #footer { font-size: 0.7em; }

    #header { height: 146px; margin-top: 10px; position: relative; }

    #container { float: left; margin: 0 -350px 0 0; width: 100%; }

    #content {
    border-right: 3px solid #D5DADD;
    margin: 0 350px 0 0;
    overflow: hidden;
    padding: 19px 0 0;
    }

    (AND A LITTLE LOWER DOWN THE PAGE)

    /* HEADER
    ------------------------------------------------------------------- */

    /* Start EXAMPLE CODE image logo */
    /*
    #logo, #logo a { display: block; height: 19px; width: 87px; }
    #logo { position: absolute; top: 28px; left: 27px; }
    #logo a { background: transparent url(img/logo.png) top left no-repeat; text-indent: -9999em; }
    .description { color: #B8860B; display: block; left: 124px; position: absolute; top: 44px; }
    */
    /* End EXAMPLE CODE image logo */

    /* Start EXAMPLE CODE text logo */

    #branding { display: block; position: absolute; top: 30px; left: 28px; }
    h1#logo { font-size: 30px; line-height: 1.2; margin: 0; }
    #logo, .description { color: #B8860B; float: left; margin: 17px 0 0 10px; }

    /* End EXAMPLE CODE text logo */

    I thought I could put an image in the logo area, but it is only a small portion of the header. I want an image all the way across the top, like I read in the instructions in the Codex, but there is no code anywhere that looks anything like the instructions in the Codex. It is after all a photography blog and needs a photograph as a header. I would just dump and move to another theme, but there are features I like about this theme. I already am trying out the "Cutline" them as recommended by ProBlogger, but it is lacking in a few areas that my current them has.

  7. alchymyth
    The Sweeper & Moderator
    Posted 4 years ago #

    there is no background style for #header yet;
    you could add one in style.css:

    #header {background: url(img/myheaderimage.jpg); }

    ideally you would save your header background image in the /img folder of your theme, and reference it as above.
    (if you have saved it somewhere else, you would need to use the full path to the location: example - http://www.website.com/full/path/myheaderimage.jpg )

    some fancy shadow covers the #header area below the nav:
    #submenu-bg { background: transparent url(img/bg-submenu.jpg) 0 3px repeat-x; height: 30px; width: 985px; }
    change it to:
    #submenu-bg { background: transparent; height: 30px; width: 985px; }

    the background image should be 985px wide by 146 px high.

    any other height would need some fine adjustment in one of the #header styles.

  8. magician1111
    Member
    Posted 4 years ago #

    Thank you. I'll try that.

  9. magician1111
    Member
    Posted 4 years ago #

    Oh, by the way, any ideas of how I can move the text and header color band/bar up some and put the image below that? I can play around with doing it different ways, but my sense is that the header will not look so good or even be very readable in front of an image in the same position it is now.

  10. alchymyth
    The Sweeper & Moderator
    Posted 4 years ago #

    this style in style.css determines the position of the green bar:

    #nav { position: absolute; top: 75px; left: 0; width: 985px; }

    changing 'top: 75px;' will move the band up/down.

    then there are these two edges hanging out:

    body {
      background: url(img/bg-body.png) 50% 74px no-repeat;
      *background-position: 50% 84px;
      font: 100.1%/1.5 "Helvetica Neue", Arial, "Lucida Grande", "Lucida Sans Unicode", "Microsoft YaHei", sans-serif;
      font-smooth: always;
      text-align: center;
    }

    changing the '74px' will move this background image up/down.

    and this style moves the title position:

    /* Start EXAMPLE CODE text logo */
    
    #branding { display: block; position: absolute; top: 60px; left: 28px; }

    that should give you enough levers to play around with; good luck ;-)

  11. magician1111
    Member
    Posted 4 years ago #

    Thank you, this is a great help. I'll experiment and ask another question if something is not smooth. Best to you.

  12. magician1111
    Member
    Posted 4 years ago #

    Hi Alchymyth, I was able to add an image to my header using your instructions. It worked out very nicely, thank you. Now I need to change the color of the main site title. Any idea what the code will look like for this? I have been fishing around in style.css and haven't been able to locate what I need to change.

  13. magician1111
    Member
    Posted 4 years ago #

    Anyone?

  14. magician1111
    Member
    Posted 4 years ago #

    Well, thank you for your help with the main issue in this thread. I started another thread on the color, but I also have now solved that issue too.

Topic Closed

This topic has been closed to new replies.

About this Topic