If you’re going to create your own unique layout for the doodlekit website builder tool, you will definitely have to learn how to do this. Go into your admin tool and select the “settings” link. Then go to the “advanced” tab. This is where your CSS editor is located. Check the “Enable Custom Stylesheet” checkbox if it is not selected already and then click the “Save” button. Next, click the “customize” button. This will take you to the CSS editor. Here you can upload images you want to use for your custom design as well as write your own CSS code to override the existing code.
There are 3 basic icons (or sets of icons) that you will want to alter. I have included a Photoshop psd file that I use for each:
1. The “Back” Arrow Icon (download)
2. The Photo Album Icon (download)
3. Sidebar, Forum, & Blog Icons (download)
The Back Arrow Icon
The back arrow icon is the simplest. It is used at the end of the breadcrumb links to indicate that you can back out of the hierarchy you have drilled down into by clicking on one of the links. More than likely you will want to at least change the color of the Back arrow to match the color of your breadcrumb link. You can use this file to create your new Back arrow image and then upload it to the doodekit CSS editor. You can replace the existing image with your new one by altering the background image of the “bread_crumb_icon” SPAN tag. Put this code into the CSS editor:
CSS Code
.bread_crumb_icon {
background-image: url(back_arrow.gif);
}
The Photo Album Icon
The Photo Album icon is an image that basically holds the thumbnail image a user selects to represent the cover of their album. All thumbnail images are 80x80 in size. If you just want to change the color/background color of the existing album, you can use the psd file above to do this and then just upload your new image. However, if you want to make a completely different photo album, you will need to visit the HTML and CSS code to figure out how you are going to set up your dimensions. The code below shows and example of how it is set up now:
HTML Code
<table cellspacing="0" class="photo_album_image" summary="layout table">
<tr>
<td class="album_pic">
<a href="/album/album/37" class="imgLink">
<img alt="Blue Irises" class="thumbImg" src="/image/913/thumb/flowers1.jpg" title="Blue Irises" />
</a>
</td>
</tr>
<tr>
<td class="img_count">
25 Images
</td>
</tr>
</table>
CSS Code
body.albums table.photo_album_image td.album_pic {
background:url(/images/album.gif) no-repeat;
padding:24px 16px 15px 21px;
}
body.albums table.photo_album_image td.img_count {
padding:3px 0 0;
}
body.albums table.photo_album_image td.album_pic div.album_image {
height:55px;
width:80px;
margin-top:20px;
margin-bottom:10px;
}
body.albums table.photo_albums td.text p {
padding:0 0 0 5px;
}
body.albums table.photo_albums td {
padding-bottom:20px;
}
body.albums table.photo_albums td div.album_hdr {
padding-bottom:5px;
}
body.albums table.photo_albums td.text {
width:100%;
}
body.albums table.photo_albums {
margin-top:20px;
}
table.photo_album_image {
text-align:center;
}
Sidebar, Forum, and Blog Icons
If you just want to change these default icon’s background colors/colors, then download the psd file, recreate your new icons, and then upload them to the CSS editor. However, if you want to make your own completely different icons, you will need to edit your CSS code more extensively to accommodate your new icon dimensions. By default, they are set to 22x22. Below is the code you will need to review & override before you add your new icons:
CSS Code
.box_icon_blog,.box_icon_blog_archives,.box_icon_forum,.box_icon_login,.box_icon_notes,.box_icon_search, .hdr_img, {
display:inline-block;
vertical-align:top;
width:22px;
height:22px;
margin-right:3px;
float:left;
}
.box_icon_blog {
background:url(../images/icon_blog2.gif) top left no-repeat;
}
.box_icon_blog_archives {
background:url(../images/archives.gif) top left no-repeat;
}
.box_icon_forum {
background:url(../images/icon_comments4.gif) top left no-repeat;
}
.box_icon_login {
background:url(../images/lock.gif) top left no-repeat;
}
.box_icon_notes {
background:url(../images/note.gif) top left no-repeat;
}
.box_icon_search {
background:url(../images/search.gif) top left no-repeat;
}
body.forums .hdr_img {
background:url(../images/icon_header_forums.gif) top left no-repeat;
}
body.topics .hdr_img {
background:url(../images/icon_header_topic.gif) top left no-repeat;
}
body.forums div.ftr_sub_count {
background:url(../images/icon_footer_topics.gif) left no-repeat;
}
body.blog_entry div.ftr_sub_count {
background:url(../images/icon_comments1.gif) left no-repeat;
}
body.messages .hdr_img,body.blog_entry .hdr_img {
background:url(../images/icon_comments1.gif) top left no-repeat;
}
body.blog .hdr_img,body.blog_entry div.first_entry .hdr_img {
background:url(../images/icon_blog1.gif) top left no-repeat;
}
body.forums div.ftr_last_sub,body.topics div.ftr_last_sub,body.blog div.ftr_last_sub,body.blog_entry div.ftr_last_sub {
background:url(../images/icon_comments2.gif) left no-repeat;
}
body.topics div.ftr_sub_count,body.blog div.ftr_sub_count,body.blog_entry div.first_entry div.ftr_sub_count {
background:url(../images/icon_comments3.gif) left no-repeat;
}
This should be enough to get you started making your own icons. If this doesn’t answer a more specific question you have, just post it here and I will get back to you with an answer as soon as possible!
subscribe
subscribe