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.
Save the Changes.
Click on Save to save your changes and close the module settings screen.
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.
Were you a Joomlashack customer before June 24th, 2007?
Want to access your templates or other licenses again?
Need an updated version of your download?
We can help!
On June 24th, 2007 Joomlashack changed its license delivery system to a new online shop. Powered by Iono, our new shop does a much better job managing your licenses and giving you access to your template and other downloads. Your previous login name and password will not automatically work in our new system.
If you purchased a download from us before June 24th, 2007 using our previous cart system, and want access to your download, you'll need to follow these steps carefully.
1. Please re-register your shop account with us at www.joomlashack.com/shop and then wait for our system to send you an email to the address registered. The email's subject line will be "Activate your Joomlashack account" and the sender "Joomlashack." Please be sure to set your spam filter to allow any/all emails from joomlashack.com through.
2. Once you have successfully created a new user account, visit our Support Center and create a ticket. Please be sure to paste into your ticket the following information, so that we may confirm your previous purchase. The more information you provide us, the faster we will be able to process your request.
Order invoice and number (sent to you via email from "sales(at)joomlashack.com" at time of purchase)
Paypal receipt information, including transaction ID number (sent to you by email at time of purchase . Sender email address was service(at)paypal.com and the subject line likely was "Receipt for Your Payment to Joomlashack Custom Templates & Services")
Date of order
Email address used for purchase
Your name and address associated with your credit card.
YOUR NEW SHOP ACCOUNT USERNAME AND EMAIL
3. Within five days, Joomlashack will review your submission and attempt to place new licenses for each previously purchased download in your new shop account. We will send you an email to the address registered in the ticket system alerting you that your new licenses are ready for download.
We hope you'll sign up for a new shop account, and take advatange of our new licensing system to keep your download available to you at all times, regularly updated with bug fixes and other improvments. If you have any questions, visit our Support Center and get answers.
Sometimes, a new Joomla! user may ask the question, "Why doesn't my template look like the demo?"
Each Joomlashack demo should contain important pieces of information such as module map, module class suffixes, and the differences of template and content. If you have a problem trying to achieve a desired effect, we suggest looking through the actual demo for the necessary documentation. Our documentation is on the live demolive demo of the template you purchased. This makes documentation much more up to date.
The goal here is to get a full-width page with no left or right modules showing.
First, you will need to create a menu item linking to the page to be displayed. This can be anything you want such as a gallery, wrapper, forum etc.
Next, go to the Module Manager (Modules > Site Modules). The filter drop down is your best friend within the Module Manager. To the right you will see a "select position" drop down list. Select the LEFT position.
A list of all modules available in the LEFT position are now displayed. Obviously the only ones of importance are the ones that are published. Starting at the top, click on a (published) module title link.
When the page loads you will see several parameters. Look to the ones at the right of the page labeled "Pages/Items". These are the menu items (or pages) which the module is to be present in its respected position, in this case LEFT. Use your control or cmd (mac) or cntrl (pc) key to select or deselect multiple items. You can also use the shift key to select multiple items in a row. The menu item you created to be full width should NOT be selected because you don't want this or any other module in the left column.
Make your way down the list in your Module Manager through all the LEFT positioned modules with the above method and do the same for the RIGHT position.
Joomlashack prides itself on its support. During the last several years we have used our forum to support our customers needs in many aspects, and as a result have the largest membership base after joomla.org and have helped thousands of users build a professional looking Joomla powered web site.
Getting a world class template from Joomlashack is now easier than ever. We have implemented a new system to give you total control over your purchases, invoices and downloads.
As part of the Official Joomla Documentation program, this tutorial has been developed by Barrie North of Compass Design. As well as here at the official Joomla Dev site (dev.joomla.org) it is also available at www.compassdesigns.net in various complete formats, Word, PDF and HTML.
In this tutorial, we'll go through the steps of creating a joomla template. Joomla is an open source Content Management System (CMS) that is freely (literally) available and supported by a large on-line community. Specifically, we will create a template that uses cascading style sheets (CSS) to produce a layout without use of tables. This is a desirable goal as it means that the template code is easier to validate to World Wide Web Consortium (W3C) standards. It will also tend to load faster, be easier to maintain and perform better in search engines. We will discuss these issues in detail later in the tutorial.
In this joomla tutorial, we will look at a 3 column theme for your joomla website. Most joomla websites use 3 columns and having the theme start with that is a good foundation. Then later we can hide side columns if there is no content in them for that page.
Let's face it, making a joomla theme with tables is easy. That's why we all did it (may we hang our heads in shame). Achieving the same using CSS is much harder. The learning curve is steep and there are lots of issues with how browsers interpret the CSS. We mentioned this some in our joomla tutorial: Joomla, doctype and the blank joomla template.
I am going to move quickly on to the actual layout possibilities, but I recommend reading at least one "beginners guide to CSS" if new to it. Here are a few suggestions:
Ok, so now we have done some bedtime reading, or knew some of CSS to start, its time to look at our layout choices. Here is a decent list of all the CSS template /CSS themes I have come across:
Although its worth taking a while to look some of these over. This list is more of a resource you can bookmark and come back to later. You could use any of them to make a joomla website.
A Three Column Joomla Theme through CSS
After reading through any of these CSS guides above, or know a little youself, you will know that there are a number of ways to layout a page. Now, for those with a little CSS background already, you might want to wander over to csscreator.com; http://www.csscreator.com/version2/pagelayout.php. Its a great tool where you can make an assortment of layouts and it will generate the CSS for you, don't leave home without it!
However, for the purposes of this joomla tutorial, we are going to be using a different layout technique (csscreator uses floats), that being absolute positioning. I think that using this CSS is perhaps the easiest model to understand for beginners. Quite simply you specifiy exactly where the "box" of content will be on the page. So for example:
will make a box that is 200px wide, and starts 20px from the top and 50px from the left. Now, 50 pixels from what I hear you ask. Well, there is a trick here, normally it will be 50 pixels from the top of the viewport (browser window). However, if the parent selector (the box the leftcontent box is in) is also positioned, then the leftcontent style will be relative to THAT. OK, you can go grab another beer/chai/sherbet, that made no sense to me either! Let's add another style and draw a couple of pictures...
If curious, we have changed the type of positioning from absolute to relative (there is also fixed). We are getting into what is called "document" flow and how elements effect other elements. Read any of the layouts above and you will find discussions on this. OK, let's use this html as out first example:
<div id="wrapper"> Text in wrapper, blah, ipsum stuff </div>
<div id="leftcontent"> Leftcontent text, blah and domini and what is the url to generate that random latin? </div>
Based on our two CSS rules above, this would look like:
OK, not much use. Now let's put the leftcolumn div inside the wrapper (hey, why do you think we called it "wrapper"?)
<div id="wrapper"> wrapper text, blah, blah and ipsum stuff <div id="leftcontent"> Text in leftcontent, blah, blah and ipsum domini and what is the url to generate that random latin </div> </div> <!-- End of the wrapper div-->
Now it should look like this:
Much better. Now the text is all ontop of itself, but we don't need to worry about that at the moment. We can now look at the CSS we will use for our page. Note this gets put in a seperate CSS file called layout.css, which is then imported into template_css.css. I tend to seperate layout from typography in design, then put together for production. One reason is to try and reduce browser errors. Many of these errors are when you try and combine positioning with padding and/or size. Try to avoid applying padding/borders and a fixed width to an element. By putting all my positioning in this sheet and all my padding and borders in another, it forces me to do this (I combine the sheets later). Steps like this make validating your joomla website much easier.
So, with that bit of explanation, here is our 3 column joomla theme:
/* Basic 3 column joomla theme*/ body { margin:10px 10px 0px 10px; padding:0px; } #leftcontent { position: absolute; left:10px; top:100px; width:200px; background-color:#fff; border:1px solid #000; } #centercontent { background-color:#fff; margin-left: 211px; /*1 more than 210 because we have to count the border*/ margin-right:211px; margin-top:7px; /* Margin here to line up center content with side columns */ border:1px solid #000; } #rightcontent { position: absolute; right:10px; top:100px; width:200px; background-color:#fff; border:1px solid #000; }
An adpatation of a layout used a few places round the web, you can read more about it at http://glish.com/css/7.asp. Note we have dropped a large amount of the CSS to make it simpler and because we are not going to be supporting IE5.X with this site.
Its not *quite* simple absolute positioning (you didn't think it would be that easy did you?). The leftcontent and rightcontent is positioned as we just saw. But the center content seems to have no positioning at all. What gives? Well, absolutely positioned elements are taken "out of the document flow". This means other content will just get placed as though these absolute elements were not there. We saw this in our example above when our text overlapped. We are doing the same thing here, but have been crafty by using left and right margins for the centercontent the same width as the left and right columns. This means that the center column content will squeeze in between the two side columns even though it doesn't know they are there.
Right, so its live site design time (drum roll). Remember, our index.php file currently looks like this:
OK, so now we have a 3 column joomla theme, not bad. Let's take a quick look; livesite.compassdesigns.net . Well, our columns are there, and the right places.Resizing your browser you will see that the size of the middle column adjusts. Commonly called a fluid CSS layout. Taking a quick look in Internet Explorer 6 we see some weirdness going on with the bottom of the left column, but hey, weird and IE often occur together in a sentence!
Yes, we still have a W3C Standards Compliant CSS Joomla Website . OK, I grant you it doesn't look that amazing right now, but hey, that's what next week's installment is for!
A preview from our next joomla tutorial
Tutorial 6: Enhancing a Template for Joomla SEO So we have a very basic shell of a web site. Doesn't look very interesting does it. Well, we can soon change that, let's make a few changes. We will also optimize the template for SEO. Joomla has some challenges compared to a static website, but techniques such as those we describe here can improve your joomla SEO efforts.
� 2005 Compass Design/Barrie North, December 2005. Barrie creates valid joomla template designs at his consultancy, Compass Design Please This email address is being protected from spambots. You need JavaScript enabled to view it. if you'd like to use this article on your site
In an earlier section, we discussed a slightly different design process. Instead of creating the design and then doing the CSS layout, we will be doing it the other way round, the Joomla CSS first. We are doing this because we want to make an blank CSS template file that can be reused by anyone.
Let's startout with a basic blank template, no layout, just all the font typography styling. This is a blank template to help speed production of a site. Its not a production template CSS file , all styles shouldn't be filled in, ones that don't get used should be deleted before using. This blank CSS file has several features:
CSS Shorthand
There are 'shorthand' styles at the beginning of each style definition. Once you have figured out the styles, fill the shorthand versions in and delete the long versions. The syntax is:
At the beginning of this joomla CSS file is a few styles that set all styles to certain characteristics. You then have to over-ride these later on. The first key global style is:
Everything is given a zero margin and padding and then font size is set to 76.1%. The reason font is set here to 76.1% is to try and get more consistant font sizes across browsers. All font sizes are then set in em's further down. A link that discusses this idea:
Sometimes I will have Joomla titles turned off and use h1/h2 tags in content. Usually I am doing this to get a SEO bonus*. To get some consistancy across titles depending whether I have the off or not, I'll define the Joomla CSS alongside the hX tags. For example:
h1,.componentheading {...
This is personal preference, you could certainly separate them out.
*I have realised I could get a further SEO bonus by keeping the Joomla titles to show in parameters and then hiding them through a CSS style, and making the titles linkable. Any of these would work:
Towards the end of this blank template CSS file is the code to have rounded corners. Its the same technique used at joomla.org and requires the module suffix contained in index.php file to be "-3".
OK, ready? So here is the blank CSS template. Note it doesn't include any layout, we'll be looking at this next time.
Now, how to use this blank CSS file? Well, after you have done all your joomla CSS styling, your file will have all that extra empty CSS. Just use this tool to get rid of it. Be careful and do a test to make sure you know what it does first!!
Tutorial 5: Making a 3 column Joomla Theme for your joomla website In this joomla tutorial, we will look at a 3 column theme for your joomla website. Most joomla websites use 3 columns and having the theme start with that is a good foundation. Then later we can hide side columns if there is no content in them for that page.
� 2005 Compass Design/Barrie North, December 2005. Barrie creates valid joomla template designs at his consultancy, Compass Design
