WordPress.org

Ready to get started?Download WordPress

Forums

Iconic One
[resolved] How to add own header image?? (16 posts)

  1. simli27
    Member
    Posted 7 months ago #

    Hey guys,

    I'm not very experienced and just started using Wordpess. I use the Iconic theme and now want to add my own header image.

    Can you please help me and explain how I can do this?
    Also I need to now what size the header is allowed to have? How many pixels in height and width do I need if I want to add a full width header that is as big as the top navigation?

    Thanks so much for all answers!

    Regards

  2. Noone Here
    Member
    Posted 7 months ago #

    Hello!

    Could you please post a link to your website so I could help you?

    Thank you very much!

    Greetings,
    Toth Balint BT

  3. simli27
    Member
    Posted 7 months ago #

    Hey,

    the link is: http://www.badmintonschlaeger24.de

    I want to insert a full width header image on top of the main navigation bar. Actually visitors can read the title of my site there reading "Badmintonschläger24 – Badmintonschläger im Test"

    Regards

  4. Noone Here
    Member
    Posted 7 months ago #

    Thank you very much!

    Here are the necessary steps:

    1.) Please install the plugin Simple Custom CSS
    2.) Upload your image to the media library. It's size should be 1038px x 70px;
    3.) open the image you have just uploaded, in the media library, and copy the file URL, like in the screenshot: http://d.pr/i/ot4
    4.) Go to Appearance->Custom CSS inside the WordPress Dashboard
    5.) Paste this code below, and instead the IMAGEURL paste the image link you have copied in earlier between the two quotation marks, and click Update CSS button:

    hgroup {
    	min-height: 70px;
    	margin: 0px 0px !important;
    	width: 100%;
    	background-image: url("IMAGEURL");
    	background-repeat: none;
    }

    6.) Refresh your website and check the results

    I hope this solves your issue. If you have any more questions, just feel free to drop a line here, and I am happy to assist you :-)

    Greetings,
    Toth Balint BT

  5. simli27
    Member
    Posted 7 months ago #

    Thanks so much for your help!

    One question:
    Is it possible to use another size for the header-image? For example to increase the height to 90 pixel?

    Regards

  6. Noone Here
    Member
    Posted 7 months ago #

    Yes, of course.
    When you have changed the picture url to the new one, just change the min-height value to 90px.

    Greetings,
    Toth Balint BT

  7. simli27
    Member
    Posted 7 months ago #

    I tried your steps 1 to 5 but the header image isn't shown :(

  8. Noone Here
    Member
    Posted 7 months ago #

    Hello!

    I have checked your site, and it looks like that in the Simple Custom CSS code you have & q u o t(without spaces) in your css code instead of quotation marks in the background-image row. Please check it on your side and change it to ".

    Let me know if this solved the issue!

    Greetings,
    Toth Balint BT

  9. simli27
    Member
    Posted 7 months ago #

    Hey,

    I checked my code and I have got quotation marks in it. That's my code:

    hgroup {
    	min-height: 120px;
    	margin: 0px 0px !important;
    	width: 100%;
    	background-image: url("http://www.badmintonschlaeger24.de/badminton24/wp-content/uploads/2013/12/testheader.png");
    	background-repeat: none;
    }

    Regards

  10. Noone Here
    Member
    Posted 7 months ago #

    Hello! I am sorry that you are having hard time with this.

    I have checked your site again, and for some reason, right now non of the above code get's applied, not just the one related to the background image. I have checked the <head> section of your site's source code, and I can see that the css stylesheet from the Simple Custom CSS plugin is linked, but for some reason not applies to the page.

    I will have to further investigate this in more details.

    Greetings,
    Toth Balint BT

  11. simli27
    Member
    Posted 7 months ago #

    Hello Toth,

    yes I don't know why it doesn't work. Thanks so much for your effort!

    Regards

  12. Noone Here
    Member
    Posted 7 months ago #

    Hello! I apologize for my late reply. Please try changing the conde I have given you earlier to this one:

    hgroup {
    display: block;
    float: none;
    background: url('http://www.badmintonschlaeger24.de/badminton24/wp-content/uploads/2013/12/testheader.png') 0 0 transparent;
    min-height: 120px;
    margin: 0px 0px !important;
    width: 100%;
    }

    Let me know if works.

    Greetings,
    Toth Balint BT

  13. simli27
    Member
    Posted 7 months ago #

    Hey Toth,

    I changed the code but unfortunately it still doesn't work.

    Regards

  14. simli27
    Member
    Posted 7 months ago #

    Well, it worked now.
    I just inserted the code into the normal style.css and not in the Simple Custom CSS plugin and now it works.

    Thanks for your help Toth!

  15. Noone Here
    Member
    Posted 7 months ago #

    I am glad that you could make it work.

    If you need any more help, just throw a line here.

    Greetings,
    Toth Balint BT

  16. darby325
    Member
    Posted 5 months ago #

    Hey Toth,
    I'm using Iconic One and trying to add header by putting code you used above in normal style css. It updated header some what but I would like to put it in the right hand side of header as it is overlapping logo area on the left. I have ZERO idea how to use css but am trying.
    PS: in future I would like to customize colors in sidebar boxes as well. can you help me out with my header issues? The link to my site is http://www.atm-411.com/
    Thx in advance for help with this!

Reply

You must log in to post.

About this Theme

About this Topic

Tags