Setting Up Sketch from Scratch

Last Updated on 05 April 2009 Written by Administrator

This section outlines how you can get Sketch up and running on your site by using only the template installer. These instructions are not for the Quickstart Package, please see those instructions here.

1. Start with Joomla

To begin, you need to have Joomla installed. It is helpful to have the default content installed, so that it is easier to see the module postions, but it is not necessary if you are comfertable with Joomla. If you don't have a copy already, then use the Quickstart or download a copy of Joomla from www.joomla.org.

Assuming you have installed Joomla and it is functioning properly, login to the administrator (http://mysite.com/administrator).

2. Installing and enabling Sketch

The next step is to install and then enable the Sketch template.

• Go to Extensions->Install/Uninstall.
• Browse for the Sketch template zip file you downloaded from Joomla Bamboo. You don't need to unzip the file, so just upload the template and it will automatically install itself.

Now navigate to Extensions->Template Manager in the administrator. Here you have access to all of the templates installed on your website. The star designates which template is the default, and you need to select the radio button (circle) next to JB Sketch and then click the Default button near the top right of the screen. This will set Sketch as the default template for all pages. You can now go to the main page of your site and will see the template.

Don't worry, it isn't supposed to look exactly like the demo just yet. We have to change a few things to get everything set right.

3. Customize Sketch Parameters

Now that the template is installed, we can change some of the parameters. In the Template Manager, you can click on the title for JB Sketch and it will bring you to a page with some options. The Params on the right hand side can be modified for your preferences. If you are unsure what a parameter is for, simply hover over the label for more information or view this description of the template parameters.

4. Installing the demo modules and plugins.

The next step assumes that you want to display the dropdown menu, JB Slideshow, prettyBox and jTweet modules on your site. If you would prefer not to use these modules then you can skip this next step.

Slideshow: Install the JB Slideshow v3.0 module and publish it to the user1 position and then follow the instructions on the Slideshow page.

• a) Slideshow: Install the JB Slideshow v3.0 module and publish it to the user1 position and then follow the instructions on the Slideshow page.
• b) Superfish Menu: Install the Extended menu module and publish it to the top position and then please follow the further setup instructions on the superfish menu page.
• c) Panel Menu: Install or duplicate the extended menu module if you have already installed it, publish it to the left or right position and then follow the instructions for the panel menu.
• d) PrettyBox: Install the prettyBox module if you want to use a simple/flexible gallery in a module. Check out the prettyBox page for more instructions.
• e) jTweet: Install the jTweet module if you want to display the timeline from a designated twitter account or even display recents tweets according to a search phrase. jTweet can be installed at any position you like - see the module position page to get an overview of the modules available in Sketch.
• f) JB Library Plugin: You need to install the jb library plugin in order to run all of the jQuery scripts on your site. Please read more about the JB Library plugin here.

5. Move Some Modules

To get the right functionality, we need to start moving modules around. Go to Extensions->Module Manager, and if you installed the default content you will see many items there already. To edit a module, simply click on its title and you will have a screen with further options. The option we are mostly concerned with is Position, on the left hand side. If you didn't install default content, you may have to create a new module of each type. These modules should be moved to these positions (the names in parenthesees are the module types):

• The Search module (mod_search): This should be set in the 'search' module position.
• Top Menu should be set to the topright, use the flat list option and remove the -nav class suffix.

6. Unpublish some modules

The default Joomla installation loads a lkot of modules that are always required and rather than starting with a full plate I like to start from scratch and then add modules as I go. So unpublish the following modules positioned at the left, right, user3 and user4 positions and things should really start to take shape.

• Main Menu
• Resources
• Key Concepts
• Login
• Polls
• Who's online
• advertisement
• Latest News and Popular
• Banners
• Footer

You might end up republishing some of these modules later on but for now disabling them means that you have a nice and clean palette to start working from.

7. Setting up the superfish menu.

At step 4 we installed and setup the Superfish Menu. Depending on the menu you chose to use for the module you may need to go in and cull some of the menu items so that the menu doesnt stretch all the way across the top and underneath the logo. You wont end up using most of the menu items in the main menu so why not go in and cull the menu items to a more respectable four or five and either delete or assign the remaning menu items as child items.

8. Populating the avatar module position

Sketch comes with a position called avatar that is perfect for setting your portrait/avatar/mugshot on the top of your page. In order to recreate the same effect that we have on the demo create a new custom html module and then insert your avatar image int he normal Joomla manner. You can assign a class of border to the image to give it some extra styling or leave it plain.

9. Create your slogan

Everyone needs a slogan - The slogan you see on the top of the Sketch template eg the "Hi Im Mike ..." is another custom html module published to the Banner position; The module consists of the slogan text in a blockquote format. You obviously dont have to use this module for a slogan though - you could use it for all manner of things including a latest news module, popular posts module or an about us module.

10. Set the Breadcrumbs

Position and publish the Breadcrumb module to the breadcrumb module position.

11.

10. Take a peak at what you have created.

By now if you have followed all of the steps your site should be looking more and more liek the Sketch demo site - its probably worth taking a look at the front page now (if you havent already) so you can assess where you are up to.

11. Editing the Logo

The next step is probably going to be to edit and change the logo sitting on the top of the paper container. Check out this tutorial on how to go about doing this.

13. Adding your analytic tracking code

Sketch contains a handy little invisible module at the bottom of the page that can be used to place your Google analytics tracking code. To do this just create a custom html module and paste the code snippet from google and publish it to the analytics position (Hint: make sure the module is published to every menu item).

14. Falling into place

By this stage the site should really be coming together and filling out the rest of the template should be just a formality. Here is a quick rundown of the type and positions used by the other modules that we havent covered already:

• "April 2009 Joomla Template by joomla Bamboo" is a custom HTML module positioend to the topright moduel position.
• The module positions with the lorem text called Landscapes, Portrait, Food and Events are custom html modules published to the advert1, advert2, advert3 and advert4 module positions.
• The modules with the Lorem Ipsum text below the main content are custom html modules published to the advert5, advert6, advert7 and advert8 positions.
• The tag line at the bottom of the theme: "Sketch is a creative hand drawn ..." is a custom html module published to the footer position.
• The latest news, get on board, popular news and get to know me modules are published to bottom1, bottom2, bottom3 and botto4 respectively. They also have a number of different module classes applied to them - these classes are what are triggering the the coloured border beneath the title. Sketch has the following class suffixes available for you to use on your modules: -black, -blue, -red, -green, -yellow, -brown, -purple and -grey.
• The "All Rights Reserved. Yoursite.com" at the bottom is another custom html module published to the copyright position.

15. Ready, Set, Start writing.

At this point its pretty safe to assume that the site is really starting to take shape and you can turn your eye to writing the content and getting your message across. The modules we have just created will provide a good structure to work off but the final development of the site will more than likely look quite different - dont be afraid to experiment and add/subtract different elements from the page... after all Joomla is an empowering piece of software that puts you in the drivers seat when it comes to creating your site.