Support » Theme: Iconic One » How to add own header image??

  • Resolved simli27

    (@simli27)


    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

Viewing 15 replies - 1 through 15 (of 15 total)
  • Balint Toth

    (@tothbalint)

    Hello!

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

    Thank you very much!

    Greetings,
    Toth Balint BT

    simli27

    (@simli27)

    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

    Balint Toth

    (@tothbalint)

    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

    simli27

    (@simli27)

    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

    Balint Toth

    (@tothbalint)

    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

    simli27

    (@simli27)

    I tried your steps 1 to 5 but the header image isn’t shown 🙁

    Balint Toth

    (@tothbalint)

    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

    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

    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

    Hello Toth,

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

    Regards

    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

    Hey Toth,

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

    Regards

    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!

    I am glad that you could make it work.

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

    Greetings,
    Toth Balint BT

    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!

Viewing 15 replies - 1 through 15 (of 15 total)
  • The topic ‘How to add own header image??’ is closed to new replies.