Adding custom icons to your doodlekit layout. - Heath Huffman

Thu, 14 Dec 2006 08:47:31 -0600

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!

The basics - getting started! - Heath Huffman

Wed, 29 Nov 2006 09:48:21 -0600

This is a quick start guide on how to use your doodlekit™ website builder tool to customize your web layouts for your website. Before you dive into this, be warned. Once you decide to build your own website by tweaking the CSS and uploading your own graphics, doodlekit™ will no longer support your website's layout! You will need to have an extensive knowledge of CSS and HTML/XHTML before doing this because it is easy to mess up yours site's look and feel. Not to worry too much though... you can always take out your custom code and go back to the default layout. And don't fret about your content... changing your layout will not alter your data in any way

Now let’s get started!

1.) You will need to log in to your website as the administrator and change your layout. To do this, go to the admin tool and select the ‘Settings’ menu on the left. Here you will see the “Change Layout” button to the right. Select this button.

By default, doodlekit™ website creator comes with multiple layouts to choose. You have one of two options:

a. Choose a base layout – this is the suggested starting point. You will see an ‘advanced’ link next to the search button at the top of the page. Click on this and it will take you to the base layouts. These are the existing base layouts that we use to create a new public layout. You can use them as a starting point for your layout creation. They are very plain and easy to manipulate. The number of base layouts to choose from will grow over time as we develop new ones.

b. Choose an existing layout –This is normally only done if you only want to “tweak” an existing layout to customize it more to your needs. This is not suggested when creating your own layout from scratch, but can be done if desired.

2.) Next you will need to get a copy of all the CSS and HTML of your site. If you’re an experienced web developer, I shouldn’t have to explain how to do this, and you can skip to step 3. But, just in case, here is my suggestion on how to do this. If you do not have the Firefox web browser installed, do so now. You can download it from here:

http://www.mozilla.com/en-US/firefox/

Once you have installed it, you will need to install the web developer add on. It can be downloaded from here:

https://addons.mozilla.org/firefox/60/

Now you should have the web developer toolbar at the top of your Firefox browser. Navigate to your site, and then click on the “CSS” toolbar button and then select “View CSS”. This will show you all the CSS for your website. Next, select the “View Source” button on your toolbar to get the HTML. That’s it! You should be ready for the next step!

3). Turn on the CSS override editor. Go to the settings menu (if your not there already) and click on the “advanced” tab. At the bottom of the page, you will see a check box marked “Enable Custom Stylesheet”. Check this and then click the “Save” button. Now click the “customize” button. This is where you paste in you CSS to override that of the existing layout.

Here, you can also upload your own images. They can be referenced directly in your CSS code. For example:

div.header{background: url(myimage.gif)}.

That’s it! Have fun!

Doodlekit™ Advanced - Latest Forum Posts

Adding custom icons to your doodlekit layout. - Heath Huffman

The Back Arrow Icon

The Photo Album Icon

Sidebar, Forum, and Blog Icons

The basics - getting started! - Heath Huffman