Want to learn more about how to build professional websites with Joomla? Then check out Joomlashack University, the #1 Joomla online training program in the world.
This tutorial will show you how to make custom image based modules in Fireworks using masking techniques aimed at the Luhs template design. Navigate to your downloaded package to the Graphic Source Files folder and open custom_module_graphic.png in Fireworks.
If you would like to see a video of this tutorial as well you can download the QuickTime movie here.
Small 640x480 (1.5 mb)
Large H.264 1080 (13.5 mb)
You will see a screen similar to this one.
(click for larger)
Choose the SubSelect tool.
Draw a box over the shape just large enough to select the corner nodes as shown below.
The corner nodes are sub-selected.
Hold down Shift to keep the mouse straight or use the arrow keys to resize the shape vertically.
The shape is resized.
Choose the select tool.
and select the top shape.
Choose Edit > Cut.
The shape is loaded onto the clipboard.
Select the image and resize it. (Cmd+T)
You can temporarily lower the opacity in the layers palette to see the underlying shape.
Once resized, choose Modify > Mask > Paste as Mask.
You can return the opacity back up.
Use the text tool to add some graphic text to the image.
Select all by choosing (Cmd+A) , then right click the graphic and choose "Insert Rectangular Slice"
Whwn the popup appears asking you to choose Single or Multiple slices, choose "Single".
Name the slice in the properties palette to "custom_mod"
*If not shown choose Window > Properties to show the palette.
The last step is to export the image to a place on your local computer by choosing File > Export.
Choose "Images Only" and make sure the name of the file is "custom_mod.png"
To convert to a module just log in to your Joomla admin console and choose New.
Paste the code below into the editor ( in html edit mode) with these settings and save.
Show Title = No
Published = Yes
<div align="center"><img style="margin: 0px;" width="194" height="173" src="http://yourdomain.com/path/to/images/stories/custom_mod.png" alt="Alt Description" title="My Description" /></div>
Important. Modules in the Lush Template right hand position must be no larger than 194px wide!
Want to learn more about how to build professional websites with Joomla? Then check out Joomlashack University, the #1 Joomla online training program in the world.
Want to learn more about how to build professional websites with Joomla? Then check out Joomlashack University, the #1 Joomla online training program in the world.
Validating a Website's HTML
One of the first things that should be done after a site is constructed, and repeated at various steps as things are changed/updated, is the validation of the site's HTML. In the case of a Joomla powered site, HTML errors can come from 4 places:
- Templates
- Components
- Modules
- Articles
Why Validate?
It's simple really; HTML errors can present unwanted issues with your site, and is the leading cause of issues with template display that we see. These issues present themselves even more so when a 'pure CSS' template is in use, as CSS is unforgiving of left out closing brackets (>) and other often overlooked HTML errors that are introduced by extensions or other invalid code inserted in articles. While extension code is not the ONLY vehicle by which invalid code can make its way into a site, it has become one of the leading cause of issues that we have seen.
How to Validate?
The World Wide Web Consortium (W3C) has provided a handy tool to run your site's HTML output against the standards for validation which may be accessed at http://validator.w3.org
Testing your site's validation is as simple as putting your site's URL in the Address field and clicking 'Check':
After the service runs you'll be presented with a 'results' page. If the site is free of HTML errors you will see a message of congratulations and some nice buttons you can proudly display on your site if you wish:
If there are errors, you will be presented with a results page that outlines the errors:
What to do With This Information
Seek and Destroy! Or better put, find and fix the errors.
The 'Validation Output' that is presented will show all of the errors that are found, although using the info with a Joomla powered site may not be as simple as if we were validating a static HTML site. This is because in Joomla there really are no 'pages' except for the one that is presented to the viewer at the time of viewing. The Joomla 'page' is a collection of output items from the database, presented and laid out within the confines of the template. The Validation Services runs the presented 'page' against the standards and outlines the errors on the presented 'page', but in our instance the items on our 'page' could come from any number of sources. For instance, if you have a website that has a calendar component, a commenting component and a component to manage your advertisements you not only have the default Joomla output in the form of articles on a 'page', you also have the output that is coming from three other sources -- any of which could present an error or multiple errors. The validation service does not point out which is the offending source of output, only the errors and on which line they appear.
Seeking out the reported errors can be a very time consuming process, however, there are some steps that you can do to help with your process.
The first thing I do when checking for the source of a site's errors is to 'rule out' possible sources. As I know in the case of a site with a Joomlashack template that the template is not the cause, I check that one off. I would next go to the code I inserted in articles and rule them out by unpublishing ALL articles and checking the validation. If the errors are gone, publish one article at a time until the offending code is found. If errors still persist after articles are ruled out, I next go to components as a possible source. One quick way to check components is to use a bit of code at the end of your site's URL that will remove the template and show the output of the site presented only as the output from the components in use. To do this, add the following at the end of your URL: /?tmpl=component So for example, if we wished to check the Joomlashack site's HTML with only the output of components in use we would put this in the Validation Service: http://www.joomlashack.com/?tmpl=component If that fails validation we know the offending code is coming from a component. If it's a simple site and does not have too many components in use or is a site still under development, I would recommend uninstalling ALL user installed component, reinstalling one at a time while checking the validation after each component is reinstalled. Doing this should help you pinpoint the offending code.
In the case of already developed sites or sites with large amounts of components installed the process above might not be possible, in which case it may be necessary to hire a professional to help you seek out the offending code. You may also wish to seek assistance in the Joomlashack Community Forum
Want to learn more about how to build professional websites with Joomla? Then check out Joomlashack University, the #1 Joomla online training program in the world.
Want to learn more about how to build professional websites with Joomla? Then check out Joomlashack University, the #1 Joomla online training program in the world.
One of the most asked questions we get in our support ticket system, as well as the forum, is why a particular template is 'messed up, broken, not right, etc etc' upon first installation.
The following is taken from a tutorial on how to set up the Lightfast template with Joomla 1.5, however, there are some concepts that might help a user of any Joomlashack template understand why a template does not look like the demo right out of the box.
This information is not designed to help you set up any particular template besides Lightfast (for that please see the template documentation in the demo of the template you are seeking help with) but it is important as a user of Joomla to grasp some concepts that will make life a little easier as you learn how to use this sometimes confusing system.
Should you need further assistance after viewing this information and the documentation for your template, please visit our Community Forum and post to an appropriate thread for assistance.
Default Template installed
New installation of Joomla 1.5 - Default Template
So you've installed Joomla successfully, and now you want to us a profession template. First you need to install your template. For help with installing that template, see the tutorial 'How do I install a Joomlashack Pro Template'
Joomlashack Template installed
You've successfuly installed yoyur template and set it as the 'default', and gone to view your wonderful new template and WHOA! It looks like something went terribly wrong!
it's not all that bad - you just need to do some simple template setup now. Keep reading and it will all look good in no time.
First Things First - know your available module positions!
Before you can put things where they belong (or where you want them), or move things from where they don't belong, you need to know what module positions are available with your particular template. Each template demo contains a 'Module Map'. The module map will outline your available module positions. This is the Module Map for Lightfast, to view the module map for your particular template, see the Demo.
What's all that content all over the place?
Let's have a closer look at the top of the template where everything seems to be all messed up. Notice the module positions. Now, have a look at the next screenshot that shows the default template in use with the same default content.
So that's what that is!
For now, we're just going to get rid of that unwanted content from the top of the template.
Unpublish that content!
As mentioned above, for now were simply going to unpublish that content so we don't have to look at it anymore. If you want, you can come back to it and put it in a more suitable place later.
So to the task - go to your Module Manger and look for the highlighted items above (if you don't know how to get to your module manager, you may wish to Get a Book! . you may also ask as many noob and not so noob questions as you want in our Community Forum) The items are 'Newsflash' and 'Top Menu' if you can't make them out from the pic.
Click on the green arrow to unpublish the items, or open the items and unpublish them.
It's Magic!!!
The content that was published in all the wrong places is now gone!
Now to the task of setting up some menu / module formatting.
**The information from here on is very specific to setting up the Lightfast template, however, the concepts are the same for ANY template. See the demo for your particular template for specific suffixes and menu setup instructions!
Know your available module styles.
The above image shows the 'Module Class Suffixes' and corresponding formatting for the Lightfast template (for your template's available suffixes, see the Demo). We're going to set our Main Menu to have the formatting of the 'light' suffix in this example.
Add the suffix.
Module Class Suffixes may be added to the module in the module's 'Advanced Parameters'. .. see above.
You'll probably have noticed when you first accessed that parameter area, the suffix field contained _menu -- just delete that pesky default suffix and replace it with the 'light' suffix (no quotations please)
Save your work and view your site.
Not quite right but closer.
Now we have some formatting for the module background and title but those menus still need some work. So, back to the module parameters to set the 'Menu Style' so it looks a little better.
Set the Menu Style
Go back to your Main Menu module and look at the parameters again. This time it's the 'Menu Style' that we want to change. By default, it's set to 'List' - change that to 'Legacy - Vertical' and save your work.
Now go view your site again. The menu should be good to go now.
To Recap
Getting your menu modules to have some formatting is as simple as going to the module you wish to format and setting the parameters correctly. Depending on which color/formatting you wish to use, you will add the appropriate 'Module Class Suffix' (see available suffixes above, or in the template demo), and you will set the 'Menu Style' to 'Legacy - Vertical'.
You can repeat these steps for all of the modules in the template.
We only need to get a menu up top now, and we will be off and running with our shiny new template. Read on for how to accomplish this final setup step.
Publish the Top menu to the Top position!
Remember those items we shut off beause they were in the wrong place. Well, one of them was the 'Top Menu' and we are now going to move it to it's new home. Go back to your Module Manager and open up that menu, set the postion to top, set 'Show Title' to No.
Now look to the parameters on the right (gonna do this one without pictures now 'cause you're getting to be a pro!) and set the 'Menu Style' to List, and remove the default class suffix in the Advanced Parameters.
Save your work and view your site.
Go forth you Joomla Pro!
Your menus should be set up properly now, and you can replicate these steps for all of your other modules.
Remember, if you need help, you can always post in our Community Forum in an appropriate thread for assistance.
Thanks for using Joomlashack's template, and Have Fun!
Want to learn more about how to build professional websites with Joomla? Then check out Joomlashack University, the #1 Joomla online training program in the world.
Want to learn more about how to build professional websites with Joomla? Then check out Joomlashack University, the #1 Joomla online training program in the world.
In order to use a Suckerfish Dropdown menu, or Dropline menu, it is first necessary to set up your menu to have 'Parent / Child' relationships. The 'Child' item is the one that you will see 'drop down', or as a 'sub menu' item.
This tutorial covers how to make it happen.
(this example uses Joomla 1.5 - although the backend looks a bit different in 1.0, the concepts are the same)
Step 1: Access the Menu Manager
Select the menu you wish to set up parent / child relationships in. In this example, we are going to use the Main Menu
No parent / child relationships
This image shows a menu with no parent / child relationships.
Access the Menu Parameters
Once you've accessed the menu, click on the menu item you wish to make a 'child' item in your menu. You will see the 'Parent Item' parameter on the left side of the screen. This is where you will assign a parent item, thus making the menu item we are editing the 'child' item.
In this case, we are going to set the parent item to be 'What's New in 1.5?" - see below
Select the 'Parent Item'
Select the item you wish to be the Parent Item. In this exaample we are setting the 'What's New in Joomla 1.5?" link to be the parent of the 'Joomla! Overview' link.
Save the Changes
Click on Save to apply the changes.
Parent / Child relationship is set!
You'll see after saving that the parent / child relationship has been set. Child items are shown indented with a connection to the parent item. You can do this for as many links as you need, as many levels deep as you need. Although, the template must accomodate the levels. Joomlashack's templates will accomodate up to 3 child items.
Step 2: Set up the Menu Module
Access the menu module by going to the Extensions -> Module Manager, and select the menu module you wish to use. In our example, we are using the already existing 'Main Menu' module. So we click on the module name to open it.
Setting it up.
Upon opening our menu module, you will see some parameters that must be set properly for the menu to operate as a suckerfish or dropline menu.
Set the 'Details'
In the Details area of the module settings (top left), set the parameters as seen above, and listed here:
Show Title = No
Enabled = Yes
Position = Whatever position you are setting up the suckerfish / dropline menu to be displayed in. Check your template documentaiton, found in the template demo, for the location to use suckerfish / dropline menus in.
Set the 'Parameters'
In the Parameters area of the module settings (top right), set the parameters as seen above, and listed here:
Menu Name = mainmenu (choose the name of the menu you wish to use to populate the suckerfish / dropline menu with -- in our case, we've set up the 'mainmenu' to have the parent / child relationships and will be using that menu)
Menu Style = List
Always show sub-menu items = Yes
You do not need to change any of the other parameters, unless otherwise noted in the docuementation for the template.
Preview your site to see your work!
If all settings have been done properly, you should now have a fully functional Suckerfish or Dropline menu set up, with the Joomla! Overview being the child item of the What's new in 1.5? parent.
Repeat the First Step to set up more items for the menu.
As stated above, this tutorial uses Joomla 1.5, however, the concepts are the same for Joomla 1.0 - it's just a bit different in where and how you do things.
If you have any questions or need further assistance, please visit the Community Forum and post to an appropriate thread.
Want to learn more about how to build professional websites with Joomla? Then check out Joomlashack University, the #1 Joomla online training program in the world.
Want to learn more about how to build professional websites with Joomla? Then check out Joomlashack University, the #1 Joomla online training program in the world.
One question we get quite a bit in the Community Forum is "how do I remove or change the 'Welcome to the Frontpage' message in Joomla 1.5".
Want to learn more about how to build professional websites with Joomla? Then check out Joomlashack University, the #1 Joomla online training program in the world.
Thanks for purchasing a Joomlashack Pro Template. Now, how do you install it?
(**you must have Joomla! installed to use a Joomlashack template)
