Add A Custom Header Image To Your Doodlekit Website
Heath Huffman
12/15/2008 10:34AM
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.
- Select the layout and color theme you want to use.
- On the main settings page, check the 'Hide Titles' checkbox so that your header text is hidden.
- Make sure the 'I Don't Want A Header Image' button is selected for the header image.
- Make sure the 'Default' Header/Title Font is selected for the font.
- 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.
- Login to your website and then go to the admin tool's Advanced CSS Editor (Settings --> Advanced --> Edit Custom Stylesheet).
- Upload your header image.
- 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.
- 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
 |
Layout 1
div.title_img{
background: url(header.jpg) center center no-repeat;
margin-left: 30px;
width: 350px;
height: 115px;
}
|
 |
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 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 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 5
div#header_image_outer{
background: url(header.jpg) center center no-repeat;
}
|
 |
Layout 6
div#header_image_outer{
background: url(header.jpg) bottom center no-repeat;
width: 770px;
height: 145px;
display: block;
}
|
 |
Layout 7
div#header{
width: 770px;
height: 150px;
background: url(header.jpg) center center no-repeat;
}
|
Comments
Thanks for making this so clear Heath. Will definitely consult your instructions with my next layout upgrade.
Vernon
Thanks SOO much for adding this feature - works great!
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
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?
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
Is the "Enable Customm CSS" checkbox checked in the upper right corner?
Thank you! It worked perfectly.
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.
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
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?
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?
I redid everything and the header is now the header. However, it is blurry when I resized it.
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).
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;
Thanks :) I'll try this :)
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
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?
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?
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.
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?
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.
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
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
hi, I want to add a logo to the top of my page. How do I do that? Thanks for your help. Dale
Post a Comment