Need help? Check out our Support site, then


Why does the photo not show up in the header when it shows up on the crop page?

  1. Here is my blog. Notice there is no image in the header even though I uploaded the photo and viewed it on the crop page.

    http://carlosmiller.wordpress.com/

    Here is a copy and paste of the style sheet.

    /*
    Theme Name: Benevolence
    Theme URI: http://www.thoughtmechanics.com/blog/2005/01/03/benevolence/
    Description: A two-column simplistic theme with an inclination to perform kind, charitable acts.
    Version: 1.0
    Author: Theron Parlin
    Author URI: http://www.thoughtmechanics.com/
    */

    body {
    position: relative;
    background: #333;
    height: 100%;
    font-family: Arial;
    text-align:left;
    color:#000;
    font-size: 8pt;
    margin: 0px;
    padding: 0;
    text-align: center;
    }

    #wrapper {
    position: relative;
    height: 100%;
    width: 700px;
    border-left: 10px solid black;
    border-right: 10px solid black;
    margin: 0 auto;
    background-color: #000;
    }

    #insideWrapper {
    position: relative;
    top: 0px;
    height: 100%;
    width: 700px;
    margin: 0px;
    background-color: #fff;
    text-align: left;
    }

    #insideWrapper:after{
    content: "."; display: block; line-height: 1px; font-size: 1px; clear: both;}

    .post {
    position: relative;
    top: 0px;
    width: 420px;
    left: 0px;
    margin: 0px;
    background-color: #fff;
    text-align: left;
    overflow: hidden;
    }

    #content {
    width: 420px;
    margin-left: 250px;
    background-color: #fff;
    text-align: left;
    }

    #sidebar {
    position: relative;
    float: left;
    width: 180px;
    left: 40px;
    padding: 0px;
    background-color: #fff;
    text-align: left;
    font-family: Arial;
    color: #000;
    font-size: 7.5pt;
    line-height: 11pt;
    text-transform: uppercase;
    }

    #sidebar p {
    text-transform: none;
    margin: 4px 0 4px;
    }

    .left {
    float: left;
    margin: 0px 10px 0px 10px;
    }

    .right {
    float: right;
    margin: 0px 10px 0px 10px;
    }

    #masthead {
    position: relative;
    top: 0px;
    background: url('images/masthead.jpg');
    width: 700px;
    height: 225px;
    margin: 0px;
    margin-top: 0px;
    }

    .centeredImage {
    text-align:center;
    margin-top:10px;
    margin-bottom:0px;
    padding:0px;
    }

    #footer {
    font-size: 7pt;
    position: relative;
    color: #fff;
    top: 5px;
    width: 700px;
    margin: 0px;
    margin-top: 5px;
    margin-bottom: 0px;
    text-align: center;
    }

    #footer a {
    color: #fff;
    }

    #footer a:visited {
    color: #fff;
    }

    #footer a:hover {
    color: #ff3333;
    border: 0px;
    }

    .sep {
    position: relative;
    background: url('images/sep.jpg');
    width: 162px;
    height: 14px;
    margin: 0px;
    padding: 0px;
    left: 132px;
    text-align: center;
    }

    #sidebar a {
    color: #000;
    }

    #sidebar a:visited {
    color: #000;
    }

    #sidebar a:hover {
    color: #999;
    }

    .commentBox {
    position: relative;
    margin: 0 auto;
    width: 90%;
    background-color: #f5f5f5;
    text-align: left;
    border: 1px solid #999;
    padding: 5px;
    }

    .commentBox .avatar {
    border: 1px solid #ccc;
    padding: 2px;
    margin: 0;
    float: right;
    }

    .cite {
    font-size: 7pt;
    color:#666;
    }

    code {
    font-family: Courier New, Verdana;
    text-align:left;
    color:#666;
    font-size: 8pt;
    }

    input {
    border: 1px solid #333333;
    background-color: #FFFFFF;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 8pt;
    color: #000000;
    padding: 0px;
    }

    h2 {
    color: #666;
    font-size: 14px;
    text-align: left;
    }

    #sidebar ul {
    margin-top: 0px;
    margin-left: 0px;
    margin-bottom: 0px;
    padding-left: 0px;
    }

    #sidebar li {
    list-style-type: none;
    margin-left: 0px;
    }

    blockquote, blockquote p {
    text-indent: 0px;
    margin-bottom: 7px;
    color: #666;
    }

    .footerLink {
    color: #666;
    text-decoration: underline;
    }

    a.footerLink {
    color: #666;
    text-decoration: underline;
    }

    a.footerLink:visited {
    color: #666;
    text-decoration: underline;
    }

    a.footerLink:hover {
    color: #999;
    text-decoration: underline;
    }

    .title, #sidebar h2 {
    font-family: 'Arial Black';
    color: #333;
    font-size: 7.5pt;
    text-transform: uppercase;
    font-weight: normal;
    margin: 14px 0 0;
    }

    a.title {
    color: #333;
    }

    a.title:visited {
    color: #333;
    }

    a.title:hover {
    color: #999;
    border: 0px;
    }

    #blogTitle {
    position: relative;
    top: 50px;
    left: 20px;
    font-family: 'Arial Black';
    font-size: 8pt;
    text-transform: uppercase;
    text-align: left;
    }

    #blogTitle a {
    color: #333;
    }

    #blogTitle a:visited {
    color: #333;
    }

    #blogTitle a:hover {
    color: #ff3333;
    border: 0px;
    }

    .commentPos {
    font-family: 'Arial Black';
    font-size: 7pt;
    position: relative;
    margin: 0px;
    padding: 0px;
    text-align: center;
    text-transform: uppercase;
    clear: both;
    }

    a.commentPos {
    font-family: 'Arial Black';
    color: #ff3333;
    }

    a.commentPos:visited {
    color: #ff3333;
    }

    a.commentPos:hover {
    color: #000;
    border: 0px;
    }

    a {
    color: #ff3333;
    text-decoration: none;
    }

    a:visited {
    color: #ff3300;
    text-decoration: none;
    }

    a:hover {
    color: #394651;
    text-decoration: none;
    border-bottom: 1px dashed #394651;
    }

    #sidebar a img {
    border: 0;
    }

  2. I'm not seeing a photo URL in the spot for that, just "url". What's the URL of the actual photo? Sometimes there are errors with names, if there is punctuation or spaces in there for instance.

  3. I don't know about the URL, but what shows up in the little upload section is the following.

    F:\My Pictures\BiscayneArrest\Blog\proofs\1.jpg

  4. That is where it's come from on your computer. I'm not skilled in CSS, so all I can suggest at this point is hitting "Restore Original Header" under Presentation and then re-uploading and cropping as appropriate. I see no issues with the name and can't imagine what's going wrong; this should be routine, and you shouldn't need to touch the CSS to upload a header.

    I'm wondering if somehow you've set the background colour to be in front of the image? Someone more CSS savvy will have to look at your code, though. Sorry I can't be more help.

  5. Hi, I ahve a siumilar problem tonight, I purchased the CSS editor for my blog and the header disappeared. Whe I hit "restore original" the page simply reloads, ie. it doesn't restore the original.

    http://www.urbandiner.wordpress.com

  6. I think I found your answer, guys:

    Just for reference, you can't use the custom header uploader when you're doing the Custom CSS as well. It's the way the files load within the header of the output. You have to add in the URL to the CSS file to get the image to show.
    Could have sworn that we've stated that many times over here in the forums. For awhile we didn't realize that it was a file order loading issue until another user pointed it out.

    That's from this thread.

    There is also this one, if that helps:
    http://en.forums.wordpress.com/topic.php?id=9370&page&replies=6

  7. So, basically the Custom CSS overrides the normal Upload Header stuff. You need to upload your already-cropped-and-sized header in your normal upload box, then get the URL and put it in your CSS where the picture URL goes. You can find out the size you need in Upload Header, but you shouldn't use that to upload it, just to get the size.

    Does that help?

  8. The order of CSS loading is: (I think this is right)

    -Basic theme CSS
    -Any CSS placed in the header by the theme designer (Why they do that, I don't know)
    -The new sitewide CSS for the tag cloud and the LaTeX plugin
    -The CSS for the header image if one's been uploaded
    -The user added CSS in the Edit CSS window

  9. Raincoaster & Dr. Mike: You're the greatest. :)
    I just got CSS for http://placestogo.wordpress.com/ and was having a hard time figuring out how to get a custom header added. Now I know how. It will be added later this morning.

  10. raincoaster & Dr. Mike: Thank you again!! Your instructions worked. This is a fun project.

  11. Glad you got it working. Congrats!

  12. Ok, this helps a lot since I am right now experiencing the very same problem. However, does this mean that I must host my image somewhere outside of WordPress?

  13. No, you just upload it to WordPress like any other file, using the Upload box below the Write box. Then you click Edit on the image, and that gives you the URL that you need to insert in your code.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags