WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Header Placement in Piano Black (25 posts)

  1. blackspring413@aol.com
    Member
    Posted 1 year ago #

    Hello,
    I've recently switched over from wordpress.com and I'm having one serious problem. I want my own image as a header in Piano Black. I've been trying for several days to place a header into the Piano Black theme. I've tried to apply many of the other forum post's directions but now I've come up with this problem. I deleted the top.png file and replaced it with my own top.png file, which is exactly the same size (959x159) but when I upload it my header doesn't show the image and the header area is off to the right a little and the search box and twitter/rss boxes are all off to the right as well. I have not changed any other code. Anyone know what I'm doing wrong? I've really struggled with this I would appreciate any help.

    Sincerely,
    Chris

  2. Marventus
    Member
    Posted 1 year ago #

    Hi.
    What seems to be breaking your layout is not your header image, but your top menu. Try removing a couple of menu items or decreasing their padding through CSS so that they fit in one line.
    If that doesn't fix it, post again here and I'll take another look.
    Cheers!

  3. blackspring413@aol.com
    Member
    Posted 1 year ago #

    Thank you Marventus.
    I removed some of my menu items and managed to get them on 1 line but that didn't fix it. Still not sure. I've scoured the style sheet and can't find anything that I can tell that would fix it. I'll keep trying I guess. Thanks for your help.

  4. Marventus
    Member
    Posted 1 year ago #

    No pb.
    For your image to fit properly you need to remove the margin property to the #logo_image selector in your style.css file. However, you seem to have added an image that is entirely black, so you won't actually see anything different other than it fitting properly.
    Cheers!

  5. blackspring413@aol.com
    Member
    Posted 1 year ago #

    Thanks again Marventus. Your suggestion moved the header into the correct spot horizontally and then I figured out I had to also change another number to get it to fit vertically. So now it fits but the image isn't there. I re-checked my file and it opens in photoshop correctly, but on the site it is black? Weird. Thanks so much for help. You've gotten me closer. I'll keep messing with it. Thanks.

  6. Marventus
    Member
    Posted 1 year ago #

    Do you have the same problem when you use .jpgs instead of .pngs? Aldo, your site has several validation errors that might be causing this problem. Try fixing those as well just in case.

    Edit: I just realized you have a space in your image' src attribute right before the name of the image. That's why your pic is not loading properly.

  7. blackspring413@aol.com
    Member
    Posted 1 year ago #

    I fixed the space in the src attribute and I'm trying to fix all the validation errors. I'm confused why there would be so many errors in a pretty popular theme. The errors as far as I can tell are all inherent in the theme and not something I've done to the theme. Should I just pick a different theme? I really like this one though and I've designed all my visuals based off of the colors and stuff. But the validation errors are getting into territory way above my head. Thanks for the help Marventus. I appreciate you taking the time.

  8. Marventus
    Member
    Posted 1 year ago #

    Hi.
    Your src value is still wrong. Right now, it seems to be:

    http://www.sublimationpressworks.com/wp-content/themes/piano-black/img/wp-content/themes/pianoblack/img/top.jpeg

    when it should be:

    http://www.sublimationpressworks.com/wp-content/themes/piano-black/img/top.jpg

    Notice the change in the URL path as well as in the image extension. As for your validation errors, if you want to get a clear picture of where they are coming from (theme or plugins), disable all your plugins and run the validator. It is not uncommon for there to be errors in themes, including Premium ones. It's just... Well, the way it is, ;-)
    A good way of identifying validation errors is to compare the raw version with the HMTL Tidy version (setting in the validator for this) side by side for differences.
    But first things first: Try to fix the src attribute and let me know if it worked.

  9. Marventus
    Member
    Posted 1 year ago #

    Oh, BTW. I just spotted this in your <head> tag

    content="IE=EmulateIE7"

    That is a huge no, no, no in coding practices. You should get rid of it ASAP.
    Cheers!

  10. blackspring413@aol.com
    Member
    Posted 1 year ago #

    Oh God! I didn't notice that I wrote jpeg. God I'm an idiot. Thanks for spending so much time trying to help me. It worked, now just some fine tuning. And I'll delete that content code. Thanks so much for all your effort. I've spent just about a week trying to figure this out. thanks again.

  11. Marventus
    Member
    Posted 1 year ago #

    No pb! Glad you were able to make it work.
    If you want your header image and content area to align horizontally, remove the float:left property from the #logo_image selector and the text-align:left from the #contents selector in your style.css file. If you want to keep the contents aligned to the left (i.e., below the header), just add a text-align:left property to your #middle-contents selector.
    Cheers!

  12. blackspring413@aol.com
    Member
    Posted 1 year ago #

    Suddenly my header has disappeared. I haven't changed any code. It just disappeared. I tried changing the jpg to a gif thinking maybe that is the problem. Any suggestions will be helpful. Thanks.

  13. Marventus
    Member
    Posted 1 year ago #

    Hi.
    Your <img /> tag src value is incorrect. It is set to:

    http://www.sublimationpressworks.com/wp-content/themes/piano-black/img/http://www.sublimationpressworks.com/wp-content/themes/piano-black/img/top.gif

    Try fixing that and the issue should be fixed.
    Cheers!

  14. blackspring413@aol.com
    Member
    Posted 1 year ago #

    I changed that but nothing happened. Hmmm?

  15. Marventus
    Member
    Posted 1 year ago #

    The only image named "top" inside the image directory you are calling:

    http://www.sublimationpressworks.com/wp-content/themes/piano-black/img/

    has a ".png" extension, not a ".gif" extension like the one you seem to be calling.
    Try changing the image extension in the URL see if it works.

  16. blackspring413@aol.com
    Member
    Posted 1 year ago #

    It turned the area black. and shifted the search box and rss/twitter feeds down below the spot.

  17. Marventus
    Member
    Posted 1 year ago #

    Well, according to the Piano Black demo page, that's exactly what the header is supposed to look like.
    http://wordpress.org/extend/themes/piano-black
    You just need to play a bit with the CSS so that it doesn't look unaligned.
    If that's not the image you wish to show on your header, simply locate it on your server and update the img src path accordingly.
    Good luck!

  18. Marventus
    Member
    Posted 1 year ago #

    Hey. Here's a little more feedback on your alignment problem. Couldn't get to this earlier because I was about to leave.
    If you want your logo image to align with the rest of the elements in your site, you need to remove the margin property from the #logo_image selector in your style.css style sheet.
    Cheers!

  19. blackspring413@aol.com
    Member
    Posted 1 year ago #

    I got the image aligned but the .png file just shows black (It's supposed to be an image). I tried switching to a .jpg but that just leaves it blank with a little question mark box. For some reason it won't show the image. It was fine for a few weeks and then it suddenly disappeared. Thanks for all your help Marventus.

  20. Marventus
    Member
    Posted 1 year ago #

    Your "top.png" is a purely black image. I think your problem could lie in the actual generation of the image. What imaging software are you using? When you open the image on your computer (before uploading it to your server), are you able to see the image the way it's supposed to look like?

    To rule out a png-related issue, and assuming you don't need transparency on your logo image, trying with a jpg could be helpful in determining the cause of the pb. However, there is no "top.jpg" file in your server img folder for the moment, so try uploading one and see what happens.

  21. blackspring413@aol.com
    Member
    Posted 1 year ago #

    According to my img folder a .jpg is uploaded but I don't see a change. When I use the .jpg it makes the background transparent and my search/rss/twitter is aligned correctly. But when I use a .png or .gif the background turns black (which I guess is the default) but the search/rss/twitter drops down into the body/sidebar.

  22. Marventus
    Member
    Posted 1 year ago #

    In the directory I pointed to earlier:

    http://www.sublimationpressworks.com/wp-content/themes/piano-black/img/

    I'm still not seeing any "top.jpg" images.
    The pb with your media icons is that when the image url points to a non-existing location (or image), they are pushed upward since your img tag takes no actual place on the document.

    In order to solve your image and icon positioning issues, you have two different alternatives:
    Alternative 1:
    a. Upload a background image that works;
    b. Adjust your CSS,, more specifically, your header_meta position, to fix the positioning problem.
    Alternative 2:
    a. Get rid of the image tag from the HTML or PHP;
    b. Set a background image to your header element that works.

    Also, on another note, I wanted to make sure your png issue was not server-related, so I set a transparent white background to your header using Code Inspector and it worked just fine (screenshot). That means the only explanation for the png issue is that it is either not being generated correctly or it is getting corrupted while uploading it to the server. Try using Gimp or other free imaging software to generate the transparent png, and if that doesn't work, try changing the method in which you are uploading files to your server, see if that has some sort of impact.

  23. blackspring413@aol.com
    Member
    Posted 1 year ago #

    Thanks Marventus for taking the time to help me solve this. I'll apply the changes as soon as I can. Thanks.

  24. Marventus
    Member
    Posted 1 year ago #

    Hi.

    I just took a look at your site and saw you were able to figure it out. Good for you! ;-)

    Also, since I'm a little anal about stuff aligning, your nav menu being shorter than the rest of your content div was driving me crazy, so here you go:

    $(window).load(function() {
       $(function() {
          var cont = $("#contents").width();
          var li = "ul.menu > li";
          var liN = jQuery(li).length;
          var liP = 0;
          var menW = $("ul.menu").width();
          var fix = $("#pngfix-left").width() + $("#pngfix-right").width();
          var cal = (cont - fix - menW) / liN / 2;
          var newP = 0;
          if ( cal > 1 ) {
             $(li).each(function(){
                if( $(this).css("padding-left").replace("px",'') > liP ) {
                   liP = parseFloat( $(this).css("padding-left").replace("px",'') );
                }
                newP = liP + cal;
                $(this).css({"padding-left":newP+"px","padding-right":newP+"px"});
             });
             $("#pngfix-left").css('float','none');
          }
       });
    })(jQuery);

    That code will automatically check to see if the menu is shorter than the content div, and run some calculations to increase your menu items' padding until the menu and the content are equally wide. It takes a couple of seconds to kick in because it needs to be run after the page is done loading.

    To use this code, just drop it at the end of your js/jscript.js file and it should work properly. Here's a quick JSfiddle demo fro you: http://jsfiddle.net/Marventus/3PsT2/.

    Cheers!

  25. Marventus
    Member
    Posted 1 year ago #

    Line 11:

    if ( cal > 1 ) {

    should be

    if ( cal > 0 ) {

Topic Closed

This topic has been closed to new replies.

About this Topic