This is a quick start guide on how to use the Advanced Doodlekit CSS Editor. 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!
