WordPress.org

Forums

Center Align Custom CSS Header (28 posts)

  1. oasishomesusa
    Member
    Posted 1 year ago #

    I am using a custom theme but to get an image to span the whole header I was told to us a custom CSS, I have enter numerous variations and cannot get it to be aligned to cover the whole thing, it always drops down and to the right. My dimensions are correct, but I do not know how to get it to align to cover the entire height and width of the header.

    Any help would be greatly appreciated. Thank you. Below is a link to the orientation of the image

    http://awesomescreenshot.com/0c92sg0hb4

  2. esmi
    Forum Moderator
    Posted 1 year ago #

    Unless you provide a link to a page demonstrating the problem, no one will be able to offer much in the way of assistance. A screenshot is of no use.

  3. Andrew
    Forum moderator
    Posted 1 year ago #

    Is there any chance you could link a page with the issue?

  4. oasishomesusa
    Member
    Posted 1 year ago #

    http://www.oasishomesusa.com/

    Sorry folks, here s a link to the page.

  5. esmi
    Forum Moderator
    Posted 1 year ago #

    Try:

    #Header #logo {
        padding:0;
    }
  6. oasishomesusa
    Member
    Posted 1 year ago #

    Okay, thank you. Do I put that in addition to the

    custom #header {
    background: url(images/myfile.jpg) no-repeat;
    height: 135px;
    width: 1000px;
    }

  7. esmi
    Forum Moderator
    Posted 1 year ago #

    Yes. It needs to be added to your custom CSS.

  8. Andrew
    Forum moderator
    Posted 1 year ago #

    Customizr's a responsive theme isn't it? You don't want to specify 1000 pixels like that

  9. oasishomesusa
    Member
    Posted 1 year ago #

    It almost works.

    http://www.oasishomesusa.com/

    No the image just extends to the right a bit too far, does that mean I just need to change the dimensions? It also removed the social media links I had at the top? Can I change it so it is aligned to the "back" of the other content?

  10. oasishomesusa
    Member
    Posted 1 year ago #

    Why would I not specify the dimensions of the image? I am fairly new to all of this.

  11. esmi
    Forum Moderator
    Posted 1 year ago #

    I can't see the CSS I suggested on your site.

  12. oasishomesusa
    Member
    Posted 1 year ago #

    What do you mean?

  13. esmi
    Forum Moderator
    Posted 1 year ago #

    You need to add the CSS I gave above to whatever custom CSS module you are using on your site.

  14. oasishomesusa
    Member
    Posted 1 year ago #

    custom #header {(https://drive.google.com/file/d/0B4Y-ISTaCNe-Z0ZreTl1Z1NxOFk/edit?usp=sharing) no-repeat;
    height: 135px;
    width: 1000px;
    }
    #Header #logo {
        padding:0;
    }

    This what I have as the CSS.

  15. esmi
    Forum Moderator
    Posted 1 year ago #

    Now I can see it and it's working.

  16. oasishomesusa
    Member
    Posted 1 year ago #

    Yes and no. It covers the other content up there, I contact information, social media icons, etc. How can I get those to be over the header?

  17. esmi
    Forum Moderator
    Posted 1 year ago #

    You need to overlay that social block on top of the header image. Try using Firefox with the Firebug add-on for this kind of CSS troubleshooting. Or use whatever developer tool is available in your web browser.

  18. oasishomesusa
    Member
    Posted 1 year ago #

    It is actually part of the theme itself.

  19. esmi
    Forum Moderator
    Posted 1 year ago #

    Firebug is a browser add-on. It is not part of any theme.

  20. oasishomesusa
    Member
    Posted 1 year ago #

    http://www.oasishomesusa.com/

    custom #header {(https://drive.google.com/file/d/0B4Y-ISTaCNe-emROZWItR3VZWW8/edit?usp=sharing) no-repeat;
    height: 135px;
    width: 450px;
    
    #Header #logo {
        padding:1;
    }
    }

    IF I change the heading to this you can see the number/social media icons I am talking about. But the alignment is then off, ha.

  21. esmi
    Forum Moderator
    Posted 1 year ago #

    Your CSS is broken. It will never work. Try:

    custom #header {
    background: url(ttps://drive.google.com/file/d/0B4Y-ISTaCNe-emROZWItR3VZWW8/edit?usp=sharing) no-repeat;
    height: 135px;
    width: 450px;
    }
    #Header #logo {
        padding:1px;
    }
  22. oasishomesusa
    Member
    Posted 1 year ago #

    Still the same issue of the default icons/contact info being hidden now

  23. Andrew
    Forum moderator
    Posted 1 year ago #

    What is "custom"?

  24. oasishomesusa
    Member
    Posted 1 year ago #

    It was the advice given to me, I am not really sure why it is there...I have never head to get this involved. I was always able to use more polished editors so I am out of my depth here.

  25. oasishomesusa
    Member
    Posted 1 year ago #

    Also, it is still not aligned all the way to the left, I am not sure how to fix that issue, I have tried to adjust the dimensions to fix that and it still does not work.

  26. oasishomesusa
    Member
    Posted 1 year ago #

    `#header {
    background: url(ttps://drive.google.com/file/d/0B4Y-ISTaCNe-emROZWItR3VZWW8/edit?usp=sharing) no-repeat;
    height: 135px;
    width: 1000px;
    }
    #Header #logo {
    padding:0px;
    }

    This is the current header I am using. Would it appear differently if I used "headerimg" instead? Would I be able to still have the rest of those icons visible that way?

  27. Michael
    Forum Moderator
    Posted 1 year ago #

    just change the top padding on the #logo img:

    #Header #logo { padding-top: 0; }

  28. oasishomesusa
    Member
    Posted 1 year ago #

    Hey! Thank you, that actually should do it I think. I appreciate the help and patience from all of you.

Topic Closed

This topic has been closed to new replies.

About this Topic