| Documentation |
|
|
|
Changing the LogoThe logo area in the header is a simple image that can be edited, uploaded and replaced. The image is located in your js_voodoo_oox/images folder and is named sloganleft.png. The image is 583 px wide x 74 px tall and can be modified by itself or by editing the source file using Fireworks. It is not recommended to edit using Photoshop because the program is unable to match exact web colors. Look at the excerpt of CSS below from template_css.css. Notice the comments in red paying special attention to the properties in blue. These properties control the size of the header area as well as the logo "hotspot". Be careful editing these properties. If you have chosen to use a larger header image than the default one, you will need to regenerate the images from the source or create your own.
Changing the Styleswitcher( setting default width)
Disabling the Styleswitcher(removal)If you want to completely remove the styleswitcher and keep the text resizer in tact; First, follow the steps above to change the default width (if desired).
If you want to remove the styleswitcher AND the text resizer, Find the code below and delete entirely. å
ModulesTop Menu(tab menu system)The tabbed menu system by default is set to "topmenu". If you wish to change this to another menu, you can edit the code below from your template's js_voodoo_oox.index.php file and change the menutype here. Be aware that using too many menus can cause the tabs to break. If this happens to you, consider using less menu items or decreasing the hotspot size in the logo.
Main Menu(Left / Right menu system)The mainmenu items shown in the demo in the left module position require a small bit of configuration. You will need go to Modules > Site Modules > and click on your Main Menu module. The parameters within this module should be set as follows. All other settings can be set to their default state. Show Title: Yes you will notice the BDR suffix is applied. You may use any of the other styles listed below, but some modifications may need to be made like regenerating the icon colors with the appropriate background color, and minor css edits. Please use the support forum if you need help. The Flat list method does not allow sublevel items. You can choose to use vertical styled tables but this is not recommended. Module StylesThis template supports a wide variety of module positions allowing you complete control of the way your content is rendered by using module class suffixes in your module configuration. We've separated them modules into 4 available styles. You can enter a suffixes in each module's parameters by going to Site > Modules > choose the module to edit and type either "S1", "S2" , "S3" or "BDR" (all caps) into your "Module Class Suffix" parameter. Here are some rendered examples of what each suffix produces. You can also see all of the available module positions. Module PositionsModules can be published virtually anywhere in your template provided the position is supported. Each template has a different set number and position of modules associated with it. In each module's parameters you will see a drop-down under "Position". Use this to publish the your modules in accordance with the module map for this template. Bonus FeaturesLightbox JSLightbox JS is a bonus feature we have added to this release..just because we think you'll enjoy it. Using Lightbox is very simple to use with little knowledge of HTML. All you need to do is insert a link to an image that looks something like this: <a href="http://demotemplates.joomlashack.com/voodoo/images/stories/image002.jpg" rel="lightbox[voodoo]" title="Voodoo Style 002"> Notice the rel="lightbox" tag in the link above. Any image or text based <a> tag used in your site which links to an absolute path to a JPG image will launch the Lightbox JS script. In the example above, I used rel="lightbox[voodoo]" because I have it grouped with other related images on the same page and I want to be able to uses the "Next" and "Prev" button navigation within Lightbox. So any other links bracketed in [voodoo] tags will inherit the same gallery. ConfigurationThere may be some configurations you'll need to make before this script will work. In your template's /js folder there is a little file called lightbox-1.0.js. The first few lines look like this. You can adjust the appearance in this file as well as append your sub folder at the url if you are under a sub domain or subfolder of your server root. Please note that Joomlashack is not the author of this script and does not maintain any rights to Lightbox JS. Additionally Lightbox is not supported by Joomlashack. Please see the author's website for help and customization options.
CSS Image ReplacementThe first thing you'll need to do is know where your 'e going to be loading the image. You want to keep in mind the module's background color which is determined by its class suffix. Tip: If you aren't familiar with module positions, styles and suffixes, you'll probably want to hop over and read up on it first. Ok, say for example, we want to create an image replacement link in the user4 position. The first thing we need to know is what background color it will need to have. Tip: There are numerous ways of doing this, but I prefer the Firefox Colorzilla extension. You could also just look at the background color associated with the module in the CSS stylesheet (template_css.css). Once you've got your color picked, you need to know what size your image should be. This depends on how many modules you decide to display on the pages as well as how small they will need to be in order to resize with the styleswitcher's 800px view. In the example on the demo I used an image 203 x 119 pixels because I have chosen to display 3 images/modules all at once. If I chose to show only 1 or 2 modules I could have made them significantly bigger. Tip: A good way to determine the image size needed, is by using the Firefox measure-it extension. Alright, so you have your background color and image size noted - so now you can create the image in your preferred image editor by creating a blank document with the same image dimensions and background color as previously noted. The Voodoo template comes with the layered/sliced Fireworks source files used in the very creation of the demo so you could use this as a template. You can edit it straight from the source or create your own. Tip: I highly recommend Fireworks over Photoshop/Imageready because it is near impossible to match web colors in Photoshop. Once you've created your images and are ready to move ahead, you'll need to upload it to your template's image folder. You could upload it via Joomla's media manager if you wanted but the CSS will probably need to use an absolute URL to the image. The next step is inserting the text into the module. Go to Modules > Site Modules and click the "New" button at the top of the page and the editor will appear. In your editor's HTML mode (code source view) paste this:
Notice the class=linkS1 in the code above. There are 3 predefined link styles which can be class=linkS1, class=linkS2, and class=linkS3. Each represents the corresponding S1, S2 and S3 module class suffixes. You can add more if you wish. They are at the very bottom of the template_css.css file and can be copied and renamed to your own likings. Here are the 3 predefined Image replaced styles. If you use all of these you can copy and rename them making sure to change the highlighted values below.
Typography StylesVoodoo comes preformatted with extra preformatted typography styles. You can see them in action here. You may also notice the checklist unordered list.
You may also take note of the gray boxes used in this very document. This is rendered by wrapping <blockquote> tags around your content like so:
How to Edit the Voodoo Source.png File With Adobe FireworksWatch this Video Tutorial to see how to use Adobe Fireworks to change the color scheme of the Voodoo template. If you don't have Fireworks, you can get a free trial from Adobe. For more help with customizing your Voodoo template, or help with setting it up, please visit the Community Forum. |
As you'll notice, in the Voodoo package under the /Template folder contains an 800 and 1024 folder. Each one of these represents a default width which means your user's first visit will be set to one of the provided options.