Free Website Builder

  • Hosted
  • Domains
  • No Coding
  • No Contracts
  • All Online
Back to Blog

Add A Custom Header Image To Your Doodlekit Website

Add A Custom Header Image To Your Doodlekit Website
Heath Huffman - Mon Dec 15, 2008 @ 10:34AM
Comments: 23

If you know a little Photoshop (or some other type of image editor) you can significantly alter your Doodlekit website builder website designs. The following blog post will provide you with the minimal amount of code to incorporate your own custom header image into each of Doodlekit's layouts.

  1. Select the layout and color theme you want to use.
  2. On the main settings page, check the 'Hide Titles' checkbox so that your header text is hidden.
  3. Make sure the 'I Don't Want A Header Image' button is selected for the header image.
  4. Make sure the 'Default' Header/Title Font is selected for the font.
  5. Find the right header image size for your layout (see images below). Using an image editor, design a header image to the appropriate size. Depending upon the layout and color theme you chose, you may want to make sure the background color of your header image matches the background color of your layout.
  6. Login to your website and then go to the admin tool's Advanced CSS Editor (Settings --> Advanced --> Edit Custom Stylesheet).
  7. Upload your header image.
  8. Copy and paste the code below that corresponds with the layout you are using. Be sure to rename the header.jpg to the image name you uploaded.
  9. Save your work. Make sure the CSS Editor is enabled (check the checkbox at the top of the page).

If you have done everything appropriately, your new header image should show up on your website. You can, of course, modify the code if you wish to try and increase/decrease your header image sizes, but do so at your own peril! Good Luck!

Layout Code & Header Image Sizes

Default Layout

Layout 1

div.title_img{
 background: url(header.jpg) center center no-repeat;
 margin-left: 30px;
 width: 350px;
 height: 115px;
}
Layout 1

Layout 2

div#container{

background:url(header.jpg) top left no-repeat;

padding-top: 140px;

margin-top: 20px;

}


div#container_inner_1{margin-top:0;}
Layout 2

Layout 3

div#header{
 width: 490px;
 height: 250px;
 margin-top: 0px !important;
 z-index: 0;
 background: url(header.jpg) center center no-repeat;
 margin-bottom: 25px;
 float:right;
}
Layout 3

Layout 4

div#container_inner{
 padding-top: 200px;
 background: url(header.jpg) top center no-repeat;
 float:left;
}

div#container_inner_1, div#right_side{
 border-top: 5px solid #fff;
}
Layout 4

Layout 5

div#header_image_outer{ 
 background: url(header.jpg) center center no-repeat;
}
Layout 5

Layout 6

div#header_image_outer{
 background: url(header.jpg) bottom center no-repeat;
 width: 770px;
 height: 145px;
 display: block;
}
Layout 6

Layout 7

div#header{
 width: 770px;
 height: 150px;
 background: url(header.jpg) center center no-repeat;
}

 

 

Tags: doodlekit, website builder, code, header code, header, header image, Tips, custom code, custom coding
Comments: 23

Comments

1. Vernon Chalmers  |  my website   |   Tue Dec 16, 2008 @ 09:23AM

Thanks for making this so clear Heath. Will definitely consult your instructions with my next layout upgrade.

Vernon

2. Phyllis neill  |  my website   |   Sat Jan 03, 2009 @ 10:26AM

Thanks SOO much for adding this feature - works great!

3. doug Kasper  |  my website   |   Tue Jan 20, 2009 @ 03:38PM

I tried this with layout 6 and it does not work, I noticed that you have some inline css within the body of the html. wouldn't this override anything I am changing?

I don't know much about css so if I sound stupid it's only because I am :)
Thanks
doug

4. Heath Huffman  |  my website   |   Wed Jan 21, 2009 @ 03:59AM

Hmmm... I tired it out again and it worked fine for me. DId you go in and make sure you selected "I don't want a header" under the pick header image? Also, did you make sure the titles are hidden?

5. Kevin Kennedy  |  my website   |   Sun Apr 12, 2009 @ 05:07AM

Hi Heath,

I'm having trouble inputting the custom header image as well. I made sure and hid the titles and selected "I dont want a header". I'm using the following CSS code for Layout 5:

div#header_image_outer{
background: url(DOITRIGHT_FINAL-175.jpg) bottom center no-repeat;
width: 770px;
height: 145px;
display: block;
}

Is this correct?

Thanks,
Kevin

6. Heath Huffman   |   Mon Apr 13, 2009 @ 05:53AM

Is the "Enable Customm CSS" checkbox checked in the upper right corner?

7. Susan Strain  |  my website   |   Tue May 12, 2009 @ 12:00PM

Thank you! It worked perfectly.

8. Susan Strain  |  my website   |   Wed May 13, 2009 @ 07:17AM

Well, I spoke too soon,

To get #2 to work I had to select an image that goes on the left side and still use the css code for the custom logo on the right.

#3 does not work for me. It leaves the top part of the page blank and puts my banner below the home page and above the footer.

9. Rachel  |  my website   |   Wed Jul 08, 2009 @ 11:40AM

Wow. THANK YOU. This is exactly what I was asking for in my first post. YAY. :-D

I can't wait to try this out. Maybe you could post this link to a sticky somewhere prominent. It seems like lots of people would be interested.

Hope that you can figure out an easier way for us in the future. Hey, isn't that is what DoodleKit is all about? ;-)

You make everything so easy for your users.

Thanks again,
Rachel

10. Max  |  my website   |   Thu Jul 08, 2010 @ 02:39PM

I'm trying to create a customer header with layout 5. I have followed all the directions very carefully, copy and pasted the css and tried several times, but nothing happens. Help?

11. CB  |  my website   |   Wed Nov 17, 2010 @ 03:48AM

I followed the directions for layout 2. However, the image did not go at the top of the page but rather under the page names. It is fine except I have a big space now at the top that is blank. Any advise?

12. CB  |  my website   |   Wed Nov 17, 2010 @ 05:07AM

I redid everything and the header is now the header. However, it is blurry when I resized it.

13. Heath  |  my website   |   Wed Nov 17, 2010 @ 07:15AM

Sounds like you need to redo your image to the right proportions. Stretching a smaller image to a larger space will cause it to pixelate (become blurry).

14. Jake   |   Wed Dec 08, 2010 @ 05:42PM

Is this the way to do it for #6??

div#header_image_outer{
background: url(One For None) bottom center no-repeat;
width: 770px;
height: 145px;
display: block;

15. AJ  |  my website   |   Fri Dec 24, 2010 @ 08:33AM

Thanks :) I'll try this :)

16. Cynthia Douglas   |   Tue Dec 28, 2010 @ 05:33AM

I am having great problems uploading pictures to the main page for changing the header photos. Is not possible or is this web builder another too advanced for the novice website builder.

Thanks

17. Heath Huffman  |  my website   |   Wed Dec 29, 2010 @ 04:54AM

Cynthia, are you trying to upload a custom header and do the coding yourself (as described in this blog post) or are you just trying to use the tools that come with Doodlekit to upload a header image?

18. Cindy   |   Sun Jul 24, 2011 @ 11:12AM

I am interested in your Doodle kit and would like to find out a little bit more about your product. I am kind of new to this whole website building thing and am wondering if this system allows web call buttons that are placed in the site to revolve to top of page as they become active or in this case available for purchase of product or persons advise I was told that this is possible but I would have to speak to a web designer to get this done.....Is there anyone that can give me info on how to do this and will your site be able to accommodate me with this?

19. Heath Huffman   |   Mon Jul 25, 2011 @ 09:12AM

We do not offer anything like this with our tools. However, you can insert third party widgets into your website that might do this if you can find them.

20. Hal Pawlowski  |  my website   |   Tue Dec 13, 2011 @ 11:18AM

Problem with Layout 5. Used the CSS mod screen to enter div#header_image_outer{
background: url(HeadGraphics2.jpg) center center no-repeat;
}
and end up with a blank header. When I do a list of the full CSS and search for that div# I only find in line 2270
div#header_image_outer{background: #dab41c;}

Obviously something isn't doing what it should. This custom header was working great and now isn't what changed or what did I do to cause this change?

21. Heath Huffman   |   Tue Dec 13, 2011 @ 02:37PM

I looked at your custom code, and it appears there is no HeadGraphic2.jpg. You need to upload it into the Custom CSS Editor in the Admin Tool.

22. md danish firoz khan  |  my website   |   Sat Dec 17, 2011 @ 07:01AM

how can i create a thanks button in html code,
when any one click , the post show 1or to thanks to you.
please any one help

23. Angie  |  my website   |   Sat Feb 11, 2012 @ 03:06AM

Hi Heath,

I've run through the instructions and troubleshooting several times on Layout 4 and am still coming up with a blank header image.

I added a missing ';' in the code, tried different images, different image formats (jpg, png), rechecked everything - could you take a look?

Many thanks,

Angie

Post a Comment
Please enter the word below.


Login   |   Search