Joomla! 1.5 and Dreamweaver CS3 – Part 1

How to use Dreamweaver CS3 to edit your Joomla! 1.5.x website and templates.
Revisiting the issue 2 years later…

Over 2 years ago I wrote my first blog post on how to incorporate Dreamweaver into your Joomla development and template design. It is time now to revisit the issue and update the technique for the newer version of Joomla and Dreamweaver.

At the time of this writing, Dreamweaver CS4 is out in Beta and it promises to bring even more streamlining into the process. As soon as I upgrade DW to the newer version I will rewrite this post, but I suspect most of the steps will remain the same.

If you are a traditional web designer, you are probably wondering how it could be possible to edit a Joomla website, the template more specifically, with a tool like DreamWeaver.

[Read more on my website: www.conticreative.com]

NOTE: I have finally launched a new website where I am now maintaining all my blogs on Joomla, Zen Cart and other Open Source projects. I will continue posting the intros of my articles on my WordPress blog, but maintaining both with the same kind of interactive features is too time consuming.
Please visit my blog page on www.conticreative.com if you are interested in my articles.
Thank you and I apologize for the inconvenience.
Marco Conti
Advertisements

Joomla menus look up table – User position switches

I remember that one of the most confusing part of learning Joomla was to deal with menus and the code they generate.
To insert a menu in Joomla we have to insert a snippet of code in the template.

 <?php mosLoadModules('user1'); ?>

However, there is more to it. Depending on the type of menu chosen in the Menu Module this code will generate a menu inside a table. Not the most desirable code if your site needs to be accessible or you want to have maximum flexibility in displaying the menu in your template.

Read more about Joomla, Zen cart and web design at: ContiCreative.com

Fortunately, Joomla allows us to use a “switch” in the code to change the menu type, as well as giving us a way in the administration site to choose the kind of menu that best suits our template.

These switches look like this:

<?php mosLoadModules('user1', -1); ?>
<?php mosLoadModules('user1', -2); ?>     

<?php mosLoadModules('user1', -3); ?>

However, I have to admit that even after working with Joomla and Mambo for some time, I don’t always remember off the cuff what each of them does. In addition, in the Joomla menu module there are three parameters that can be assigned to the menus which in turn affect the layout output of the menu. These three options are in the “Menu Style” of the module parameters. The options are:

  • Vertical
  • Horizontal
  • Flat List

My favorite is usually flat list, as it’s the only one that, after carefully choosing the position menu switch in the template, allow the menu to display free of layout tables. These three options are pretty self explanatory: the first two will arrange the links inside a table either in a vertical or horizontal fashion, while the flat list will simply arrange the links inside a Unordered List. Adding the switch in the Joomla position will create a few different layouts for the menu.

Clearly, this can get a bit confusing so I built my own look up table with several combination of switches and parameters.

The look-up table below should be self explanatory. I run the code first without a switch define, then I used the -1,-2,-3 switch in all threee different layouts: Vertical, Horizontal and Flat List.

No switch flat List

<table cellpadding="0" cellspacing="0" class="moduletable">
   <tr><td>
   <ul id="mainlevel-footer">
   <li><a href="link1.html" mce_href="link1.html" class="mainlevel-footer" >Website Terms of Use</a></li>
   <li><a href="link2.html" mce_href="link2.html" class="mainlevel-footer" >Security Policy</a></li>
   <li><a href="link3.html" mce_href="link3.html" class="mainlevel-footer" >Privacy Policy</a></li>
   </ul>
 </td></tr></table>

No switch Horizontal

Website Terms of Use
|
Security Policy
|
Privacy Policy
<table cellpadding="0" cellspacing="0" class="moduletable"><tr><td>
   <table width="100%" border="0" cellpadding="0" cellspacing="1"><tr>
   <td nowrap="nowrap">
   <a href="link1.html" mce_href="link1.html" class="mainlevel-footer" >Website Terms of Use</a>
   <span class="mainlevel-footer"> | </span>
   <a href="link2.html" mce_href="link2.html" class="mainlevel-footer" >Security Policy</a>
   <span class="mainlevel-footer"> | </span>
   <a href="link3.html" mce_href="link3.html" class="mainlevel-footer" >Privacy Policy</a>
</td></tr></table></td></tr></table>

No switch vertical

Website Terms of Use
<table cellpadding="0" cellspacing="0" class="moduletable"><tr><td>
   <table width="100%" border="0" cellpadding="0" cellspacing="0">
   <tr align="left"><td><a href="link1.html" mce_href="link1.html" class="mainlevel-footer" >Website Terms of Use</a></td></tr>
   <tr align="left"><td><a href="link2.html" mce_href="link2.html" class="mainlevel-footer" >Security Policy</a></td></tr>
   <tr align="left"><td><a href="link3.html" mce_href="link3.html" class="mainlevel-footer" >Privacy Policy</a></td></tr>
</table></td></tr></table>

menu module “-1” (flat List) Pure <ul> layout

<ul id="mainlevel-footer">
   <li><a href="link1.html" mce_href="link1.html" class="mainlevel-footer" >Website Terms of Use</a></li>
   <li><a href="link2.html" mce_href="link2.html" class="mainlevel-footer" >Security Policy</a></li>
   <li><a href="link3.html" mce_href="link3.html" class="mainlevel-footer" >Privacy Policy</a></li>
</ul>

Horizontal -1

Website Terms of Use
| Security Policy
| Privacy Policy
<table width="100%" border="0" cellpadding="0" cellspacing="1"><tr>
   <td nowrap="nowrap"><a href="link1.html" mce_href="link1.html" class="mainlevel-footer" >Website Terms of Use</a>
   <span class="mainlevel-footer"> | </span><a href="link2.html" mce_href="link2.html" class="mainlevel-footer" >Security Policy</a>
   <span class="mainlevel-footer"> | </span><a href="link3.html" mce_href="link3.html" class="mainlevel-footer" >Privacy Policy</a></td>
</tr></table>

Vertical -1

Website Terms of Use
<table width="100%" border="0" cellpadding="0" cellspacing="0">
   <tr align="left"><td><a href="link1.html" mce_href="link1.html" class="mainlevel-footer" >Website Terms of Use</a></td></tr>
   <tr align="left"><td><a href="link2.html" mce_href="link2.html" class="mainlevel-footer" >Security Policy</a></td></tr>
   <tr align="left"><td><a href="link3.html" mce_href="link3.html" class="mainlevel-footer" >Privacy Policy</a></td></tr>
</table>

flat List  -2

<div class="moduletable">
   <ul id="mainlevel-footer">
   <li><a href="link1.html" mce_href="link1.html" class="mainlevel-footer" >Website Terms of Use</a></li>
   <li><a href="link2.html" mce_href="link2.html" class="mainlevel-footer" >Security Policy</a></li>
   <li><a href="link3.html" mce_href="link3.html" class="mainlevel-footer" >Privacy Policy</a></li>
   </ul>
</div>

Horizontal -2

Website Terms of Use
|
Security Policy
|
Privacy Policy
<div class="moduletable">
   <table width="100%" border="0" cellpadding="0" cellspacing="1"><tr>
   <td nowrap="nowrap">
   <a href="link1.html" mce_href="link1.html" class="mainlevel-footer" >Website Terms of Use</a>
   <span class="mainlevel-footer"> | </span>
   <a href="link2.html" mce_href="link2.html" class="mainlevel-footer" >Security Policy</a>
   <span class="mainlevel-footer"> | </span>
   <a href="link3.html" mce_href="link3.html" class="mainlevel-footer" >Privacy Policy</a>
   </td></tr></table>
</div>

Vertical -2

Website Terms of Use
<div class="moduletable">
   <table width="100%" border="0" cellpadding="0" cellspacing="0">
   <tr align="left"><td><a href="link1.html" mce_href="link1.html" class="mainlevel-footer" >Website Terms of Use</a></td></tr>
   <tr align="left"><td><a href="link2.html" mce_href="link2.html" class="mainlevel-footer" >Security Policy</a></td></tr>
   <tr align="left"><td><a href="link3.html" mce_href="link3.html" class="mainlevel-footer" >Privacy Policy</a></td></tr>
</table></div>

Flat list -3

<div class="module">
   <div>
   <div>
   <div>
   <ul id="mainlevel-footer">
   <li><a href="link1.html" mce_href="link1.html" class="mainlevel-footer" >Website Terms of Use</a></li>
   <li><a href="link2.html" mce_href="link2.html" class="mainlevel-footer" >Security Policy</a></li>
   <li><a href="link3.html" mce_href="link3.html" class="mainlevel-footer" >Privacy Policy</a></li>
   </ul>
   </div>
   </div>
   </div>
</div>

Horizontal -3

Website Terms of Use
|
Security Policy
|
Privacy Policy
<div class="module">     

   <div>     

   <div>     

   <div>     

   <table width="100%" border="0" cellpadding="0" cellspacing="1"><tr>     

   <td nowrap="nowrap">     

   <a href="link1.html" mce_href="link1.html" class="mainlevel-footer" >Website Terms of Use</a>     

   <span class="mainlevel-footer"> | </span>     

   <a href="link2.html" mce_href="link2.html" class="mainlevel-footer" >Security Policy</a>     

   <span class="mainlevel-footer"> | </span>     

   <a href="link3.html" mce_href="link3.html" class="mainlevel-footer" >Privacy Policy</a>     

   </td></tr></table>     

   </div>     

  </div>    

   </div>  

</div>

Vertical -3

Website Terms of Use
<div class="module"><div><div><div>   

<table width="100%" border="0" cellpadding="0" cellspacing="0">   

<tr align="left"><td><a href="link1.html" mce_href="link1.html" class="mainlevel-footer" >Website Terms of Use</a></td></tr>
<tr align="left"><td><a href="link2.html" mce_href="link2.html" class="mainlevel-footer" >Security Policy</a></td></tr>     

<tr align="left"><td><a href="link3.html" mce_href="link3.html" class="mainlevel-footer" >Privacy Policy</a></td></tr>     

</table>     

</div></div></div></div>

Naturally, there are issues that will affect the layout of the menu from the CSS point of view, such as adding CSS suffixes in the module interface. In the flat list other issues will involve how the different menus handle sub-menus. I will probably add that to a future article or if this article stirs enough interest I will be glad to touch on it in a future edit. On that note, I may edit this article from time to time and I’ll try to create some better styles for the actual formatting of the code. My time is limited and I apologize I have not had time to install a better text editor in my WordPress blog. I’ll try to get to it as soon as possible. In the meantime the table above is better than nothing and should help you work with the Joomla Menus.

Good Luck.

Check out my new website where I am now maintaining all my blogs Please visit my blog page on www.conticreative.com if you are interested in my articles.
Thank you and I apologize for the inconvenience.
Marco Conti

How to make a Static home page in Joomla

Joomla is a fantastic tool for building modern and dynamic websites. However, many people new to Joomla find it hard to set up their site to mimic a non-portal site with one or more fixed articles on the front or main home page. In this article I will try to explain some of the tricks you can use to achieve this effect while keeping the RSS feed and the blog style layout of the dynamic content.In Joomla the “Home” page is not just a regular page. In fact, the “Frontpage“, as it is called, is nothing more than a Joomla component in its own right.

Read more about Joomla, Zen cart and web design at: ContiCreative.com

In a regular Joomla site the “Frontpage” allows the user to publish selected articles in a “blog” or “portal” style. While this is a nice feature and one of the things that make Joomla so powerful, many websites need a Home page with a fixed article to greet and guide visitors or illustrate the  site purpose. While this is actually easy to achieve, it is not immediately evident. I will assume you know your way around Joomla! by now, but even if you don’t these techniques should be fairly easy to follow.

The Static Page

This is possibly the easiest technique of all. Create a static content item and in your administration area go to the “Menu Manager”.

Choose “Main Menu”, link the static content you created (or alternatively, make a link to it from the content pane) and once

you are done move the link to the number 1 spot in the list of links of Main Menu.
In Joomla the topmost link in the Main Menu is the site’s home page. Go back to the live site and you’ll see that your static article is your home page.
To keep your RSS feed (remember, in Joomla only the Frontpage has an RSS feed attached to it) move the previously named “Home” link elsewhere. Because of its blog style appearance and functionality you can move it to a link named “Blog” if you need a blog on the site with an RSS feed and it will work just fine for that purpose.

The module

What if you need a static, fixed article on your Home page but you want to retain the ability to publish other articles on your home page in more of a “portal” style? In this case you’ll need to get your hands dirty a bit and follow this procedure:

  • In your Modules > Site Modules create a new module.
  • Name it what you want but a descriptive title will help.
  • In this module you will see a bunch of fields that allow you to publish an RSS feed in a module position.
  • Ignore those and skip to the content pane at the bottom of the module interface.
  • There you will be able to write your content as if it was a regular content item.

Before you save, go to the top of the interface and make sure you:

  • Publish the module (select yes)
  • Pick an unused Position such as user7, 8 or 9 (or any other non-named position – named positions are fine if you don’t use them in your site but I prefer numbered positions)
  • Ignore module order. If this is the only module in this position it won’t matter
  • Go to the right pane and make sure you publish the module in the first link of the Main Menu (usually “home”)
  • If needed (as we’ll see later) apply a “Module Class Suffix” (something like “-homepage”) to allow you to style the module independently of the others if needed.

Wait, you are not done. Now you’ll need to make a small change to your template.

  • Go to your FTP program and download your index.php file from the template directory (not the main Joomla index.php).
  • In fact, you should already have at least the entire template directory for your site on your hard drive.
  • Next, in index.php look for the name of the div that contains your current content.
  • You need to insert what is called a “module position” in the space above your content.
  • To make this easy, search for this tag: <?php mosMainBody(); ?> (This is your main body tag where your content should appear in your template. Above that you will see a number of DIVs elements (or table tags if that’s what you are using).

If you need help finding a good spot for your new module, do this:

  • Go to your site
  • Do a “view source”
  • In Dreamweaver or other text editor, paste the source
  • Identify the main content in your HTML and see where you could include a div or table above it. Remember, now you are working with a good old static page here, so it should be easy.
  • Make a note of the tags used above your content and find the same tags in your index.php file
  • Insert this code where you would like your static content to appear:
    <?php mosLoadModules ( ‘userX’); ?>
    (There, I finally made the change, sorry for the error)
  • X marks the user number you have specified when you created the new module.
  • Upload the index.php file to the server – NOTE: Make a backup first!
  • Go check if it works fine. If you need to style it you can now use the suffix you specified earlier like this:
    module-suffix {} (where “module” is the stock class used by a module and “-suffix” is what you entered in the module panel)

Try also without the suffix if you want. Just remember you have the option.

Now, you should have your regular “Frontpage” working as usual but you’ll also have a static content item at the very top. If you need to display also other static content while still having the dynamic “blog” style content, you can repeat the process by placing more modules in the same position, placing another position anywhere on the page or placing modules with static content in the side positions.

Just remember to publish the static content exclusively on the home page or every page will have the same static content in it and remember that your static content is no  longer in the regular Joomla content structure and each time you need to update it you’ll need to go to the module manager.
The component

There is also a contribution that substitutes the Frontpage component and does pretty much the same thing on its own. It is called “MJ Frontpage” and it is available here http://extensions.joomla.org/component/option,com_mtree/task,viewlink/link_id,995/Itemid,35/

To install simply use the regular component installer and go to components > MJ Frontpage. There you will find a content pane for your static content. All the features of the Frontpage should be available but read the documentation to make sure.
Ordering content

This should be it’s own article and I will only touch on it in passing. however, I would be remiss if I didn’t mention that in Joomla it’s possible to customize the order in which your articles appear in any kind of list, blog or even in the Frontpage.

To have an article permanently fixed in your Frontpage you need to make sure that you set up the custom ordering of your Sections, Categories and single articles. This is trickier than it sounds and as I said it merits it’s own article, but if you know even just a bit of Joomla you should be able to figure it out by going to the Category manager, Section Manager and content manager, place the sections, categories and content in the order you prefer and make sure you select the custom ordering in your Frontpage preferences ( Admin > top menu > Content > Frontpage Manager).
The drawback of this system is that your RSS feed will also be affected by it and it will display in the same order, making it appear at first glance as if it wasn’t updated in a while.

I hope you found this article useful and feel free to let me know how I can improve it. Good luck

Marco Conti is the owner – webmaster of conticreative.com, a web agency specializing in Open Source integration for e-commerce, CMS and SEO.

Check out my new website where I am now maintaining all my blogs Please visit my blog page on www.conticreative.com if you are interested in my articles.
Thank you and I apologize for the inconvenience.
Marco Conti

Designing CSS layouts for Joomla with Dreamweaver

Since I wrote this article, a lot of things have changed in the Joomla world and with Dreamweaver. I have written a new article available on my new website on how to work with Joomla 1.5 and Dreamweaver CS3. As soon as I started writing it, Adobe released version CS4 of Dreamweaver to confuse things further. If you’d like to read an updated version of this fantastic workflow, check out my article here.

Many web designers are used to and like to use Macromedia Dreamweaver (DW) to work on their HTML and CSS. The latter in particular is very well supported in DW8 and it allows for very visual work on CSS files.

However, because of the way Joomla templates are structured it is often impossible, or at least unpractical, to work on a Joomla template from within DW in any satisfactory fashion.

I think I might have found a workable solution that with some adjustment allows a designer to customize a Joomla template in fine detail.

First of all, we have to distinguish between the actual index.php file and the related CSS (template_css.css). The reason working on the index.php file is difficult in DW is that, aside from the simplest of table based layout, the index.php file must contain some conditional statement of some sort to accommodate more advanced Joomla features and it’s completely devoid of any content, even in menus and such . That makes the graphical rendering of the page a nightmare and even just working on the CSS a frustrating process.

The solution I have found is simple and requires the designer to have already a very basic template to work from. There are some great free templates from Joomlart.com that will serve the purpose just fine. I love the  Joomlart.com templates and I think they are among some of the best on the web, bar none. Plus they are very easily configurable.

Before I explain the workflow there is a bit of preliminary setup that will help down the road:

  • Install Firefox 2.x with the developer extension. This alone can give you a very good editing environment (which I’ll touch in a future article), but for the DW designer is often not very intuitive and requires knowing CSS syntax intimately.

  • Set the “View Source” in Firefox to display the code in Dreamweaver. Not completely necessary, but very fast.

  • Create a new Dreamweaver Site in a local folder. The site should be connected via ftp to the actual directory where your Joomla installation files reside.

  • Replicate the “include/templates/yourTemplate” Directory structure in the DW site by downloading the complete template filesystem on your drive.

Once we have the template in the DW site we are ready to begin:

  • Hit “View Source” in Firefox (or “view source with…” depending on what plug in you are using) and save the template in the local site. I prefer to use the CSS folder but any will do.

  • Go into the DW CSS panel and delete the references to the CSS files. They won’t work because the Joomla code is not direct to those files.

  • Joomla-filesystem_upInstead reattach the CSS files by clicking on the “Attach CSS” in the lower part of the CSS pane. If you have saved the html of the template in the CSS folder it should be fairly easy.

  • Once the CSS is attached, the page should reacquire the layout and colors.

  • Alternately, the link to the CSS can easily be changed in the <head> code manually either way works.

At this point, if the site is configured properly, working on the CSS in the usual DW manner should produce the desired results on the page of changing and adjusting the layout.

Back up the original CSS file on the server and upload the local one to see the results on the site, continuing to adjust the code for the desired effect.

Clearly, a strong and flexible CSS based layout is important for this process to work well. Table based layouts are inflexible and would require constant back and forth between the CSS and the index.php file.

Attach_css_upThis method can also be employed, with care, to make changes to the original index.php file. If index.php has well marked comments at the beginning and end of each element, such as container DIVs, they can be easily recognized and the changes performed on the HTML file to test the output and then on the index.php file.

I hope this short tutorial will be helpful and I will edit it in the future with more detailed information and more step by step instructions. For the moment it should help anyone even passingly familiar with DW and Joomla. If there are requests I will make it more detailed.

One important note on Dreamweaver: version 8 has some very nice CSS editing features that make work such as choosing colors and adjusting margins very easy. However, DW visual rendering of some CSS that shows up perfectly on the major browsers is atrocious, often distorting the original page beyond recognition. I find that even with these limitations working with DW speeds up my design work, but I wish there was a better visual editor that represented CSS layouts with more fidelity.

I have been trying the Beta version of the new Microsoft offering Expression, and I found that it renders pages with much more accuracy. While itr is very similar to DW (in the usual Microsoft fashion of stealing rather than inventing) I am not yet so used to it and it still has some Frontpage like features when it comes to the UI.

The ideal solution would be a Firefox plugin that allowed for more visual CSS editing, or that had some sort of advanced menu system for inserting the more difficult to remember CSS tags. Currently, it works quite well but, as mentioned earlier, it requires an encyclopedic knowledge of CSS that many designers lack. I will keep you posted.

Good luck

Marco – Conticreative

This article is also available on conticreative.com

How to edit a Joomla template with Firefox

Important Notice: This blog is now going to be updated more often on www.conticreative.com. Come and visit my site at ContiCreative.com for blogs, software, books and utilities reviews, tips and tricks and more.
I am looking forward to your visits there – Conticreative

When I first discovered Joomla! when it was still Mambo, my first question was: “How the heck am I going to edit the template?”

I think this is pretty much the first question any traditional web designer has when they first try to work with a CMS. It’s natural. We are used to a Top down style of designing the page and then inserting the content, Joomla is the opposite. The content is there, but the design, even the excellently designed Ruck Solarflare, is the first thing we must change if we want to make an original website.

I came up with two distinctive systems for dealing with Joomla templates, one uses the excellent Firefox Web Developer plug in and the other is a more traditional approach using Macromedia Dreamweaver as a css editor. Both assume that the web designer reading this article is interested in having some sort of visual feedback when editing CSS files.

This article is about using Firefox and how it can be edit many aspects of a Joomla template. Using the Firefox Web Developer extension is, to me, a bit more laborious and confusing than using Dreamweaver, but it is more immediate and less convoluted at times. Let’s get going.

First you’ll need to install Firefox if you don’t have it. At the time of this writing version 2 has just been released. There is a “Developer Version” of Firefox available here. Next, if your Firefox version doesn’t come with the developer plug-in you should download it ;here.

A Joomla template is usually made up, at the very least, of a Folder containing an index.php file, a css file inside the css folder called template_css.css, a XML file and an images folder. If the template has any js files or any additional css file they will be respectively in the script and the css folders.

As much as possible, Joomla templates try to separate the content from the presentation and use DIVs and CSS files. Since Joomla pages are created dynamically and they don’t “exist” as separate HTML pages using css for style is a necessity, not a choice. Nevertheless, many Joomla templates use a fair amount of tables in the layout and Joomla itself uses quite a bit in the generation of the page elements.

Most of the changes in a Joomla template can be done using the css file. Because of the way that Joomla works, the index.php file, in its raw format before is processed by Joomla may look quite messy and often template designers use a fair amount of conditional PHP code to allow Joomla to place page elements in a certain position. This is not a difficult proposition as the following example illustrates.

<?php if ( mosCountModules (‘banner’) ) { ?> <div class=”classname”> Content or PHP module call</div> <?php } ?> <div class=”classname2″> Content2 </div> What this says in essence is: IF (the module is present in this position) THEN (display this here) ELSE (Display this content)

A good Joomla template, such as the ones offered by Joomlart.com, will have many conditional statements as well as several Javascript elements to facilitate the use of CSS menus and other features. They will also use CSS to style most of the containing <div> and other XHTML elements making the developer’s plug in in Firefox an ideal tool for CSS styling.
Once the plug in is active, load the home page of your site (or any other page you want to work on and got to Tools > Web Developer > CSS > Edit CSS (Ctrl-Shift-E) and the CSS file(s) for the web page will display in the left column.A Joomla template can have multiple CSS files attached to it, but the main file is template_css.css. In the edit CSS column of display div orderFirefox each CSS file has it’s own tab allowing you to edit any file you wish.Any changes to the CSS file are immediately reflected in the actual window, making the process very fluid and natural. An intimate knowledge of CSS syntax is necessary, since there aren’t yet any advanced tools such as the ones offered by Macromedia Dreamweaver or other CSS editing tools
displayblocksize. Every change has to be made by hand, including Hex color values. One other drawback, one that hopefully will change in the future, is the lack of any color coding of the syntax.Any change made in the CSS file is limited to the local copy of the page, and until the CSS file is saved, going to a new page in the site may clear any change made so far. It is easy to click on a link by mistake and lose an entire session. The CSS file should be saved often as a precaution.While this is a very nice way to edit the CSS file of your Joomla site, it has its drawbacks: It is hard to find the tag both on the page and in the CSS file. For this, the developer plug-in can come to the rescue once again. There are several tools that help greatly in identifying the various HTML elements in the page. Under the Information menu (Tools > Web Developer > Information) there are a number of useful tools such as: displayblocksize

  • Display Block Size
  • Display Element Information
  • Display ID and Class details
  • and more.

These are invaluable in identifying the block elements. Finding them in the CSS file is another story and again this is the weaker point of this system.Ultimately, we will want to save these changes to our Joomla Website, we can do that easily by simply uploading the CSS file on the server. The changes should reflect nicely and the file can be edited again and again.inspect elementFirefox has a number of plug-ins, beside the Web Developer toolbar that are useful for working with Joomla. There is a competent FTP plug-in, a DOM Inspector, a variety of CSS editors and other plug-ins that perform similar functions to the Web Developer Plug-in but with subtle differences that in same cases may be useful. One Plug-in I find very useful in conjunction with the WDT is Firebug. It is 2.0 compliant and it shows a hierarchical view of the page structure with collapsible elements in a pane below the main window.I hope you found this article useful and that you’ll let me know how I can improve it.Happy coding.The conticreative blog is also available at conticreative.com. Conticreative is a Web Agency specializing in Joomla, Zen Cart and OScommerce integration. We also provide professional product photography, SEO services,Managed hosting and training. This article available here

Memory_limit problem in Joomla with Community Builder

Check out my new website where I am now maintaining all my blogs.
Thank you.
Marco Conti

Working with Joomla! is very exhilarating and there is a tendency, when you work on your site, to want to test all the different modules available. Some of them have some really crappy code, others are simply not compatible with one of the other modules. Inevitably, problems will arise. I had almost finished building my site,  when it crashed big time. At that point I decided to install it again from scratch making sure to document and back up every step of the way, a practice I follow religiously when I work for a client but that I sometime ignore when working on my own site. Big mistake.

Everything was going fine until i installed Community Builder, a great app for building communities with Joomla, and I linked it with Joomlaboard, a light weight forum that is actually quite useful and even powerful if not the prettiest out there.

I tested the site and it worked fine until I went for dinner. At my return, trying to view my profile as a user in the front end gave me this error message:

Fatal error: Allowed memory size of 8388608 bytes exhausted (tried to
allocate 184320 bytes) /-/-/-/-/mod_filename.php

The rest of the page was a blank. I did a quick search in the various forum, starting with joomlopolis, the makers of the Community Builder script for Joomla.

There I found several mentions of this problem but no solutions. In fact, the tech guys seemed to be annoyed at us posting about this problem Their not very useful replay was “Google it“.
From there a gathered that the CB scripts exceeds PHP assigned memory allocation on a given server, and the only cure it seems is to allocate more memory in the php.ini file of the server and restart.
For users on shared servers this is simply not an option. In some cases it may be possible to ask, but more often than not you’ll get a “buy a dedicated server” answer.
What makes this problem very bad is that my site currently is in testing and only my cat, Scruffy, and I know it’s operational. If it runs out of memory with one user, can you imagine what it will do with (Gasp!) 10 or 20 users concurrently?
Eventually I searched the Joomla forum and found out a bit more, but it was while searching Google for “Fatal error: Allowed memory size of 8388608 ” that I hit pay dirt.

I found a post that suggested increasing the memory allocation in the server to 12 MB in the .htaccess file with this script:

memory_limit = 12M

When I tried it my server crashed miserably, but eventually I came across a post on the Drupal forum where they suggested to either do the same thing with the .htaccess file or to place this line

ini_set(‘memory_limit’, ’12M’);

in Drupal’s sites/default/settings.php file (here is the link to the post )
Armed with that info, I decided to try something crazy and I inserted the same line of code in configuration.php file of my Joomla installation. What did I have to lose?
I was expecting some sort of server error again, but instead I reloaded the page in my browser and clicked on the “profile” page link that was giving me the error

Allowed memory size of 8388608 bytes exhausted

and it worked like a charm. Pure magic!
Just to make sure I wasn’t hallucinating, I commented out the line and tried again : the error appeared again, so my fix was working fine.

However, I was about to encounter another problem. Joomla rewrites the configuration.php file each time it is accessed from the Cpanel. That means that my little, miraculous line of code was getting erased on a regular basis.

Fortunately, in the same post there was another small hack: entering this line

memory_limit = 32M

in the php.ini file in the root folder of the Joomla installation. When I tried that the first time, like the .htaccess file it did not work. However, just in case I could have made a mistake, I tried again. This time it worked and what’s more it’s sticking.
Apparently, this error is quite frequent and I am surprised that, at least in the Joomla arena, I seem to be the only person to come up with a workable solution. This problem, according to the Joomla forums has gone unsolved for quite some time.

Below is the post I contributed to in the Joomla forum, in case you’d like to learn more about this bug.
I hope this article will help others find a quick solution to their Joomla memory error problems, but be warned: not all shared hosting servers administrator will be happy with you if you start messing up with their memory allocation.
I do have a feeling that his little fix my even have the result of speeding up your Joomla installation a bit. after all, it increases the memory allocation for every script, not just the CB Login ones.
Always make sure to back up any file you change or you are asking for trouble.
Original Joomla forum post:
About Memory_limit and fatal errors

Good Luck and thank you again for reading this blog

Marco is a Sacramento based web designer/developer.
Marco’s company is conticreative.com a full service
web agency specializing
in e-commerce and Content management system development, photography, web
marketing and copy writing.

Zen Cart and the art of Image Handling

Welcome to my first Zen Cart article. In this post I’ll try to explain how to manage images in Zen cart and a few tricks I have learned along the way.

By default, Zen Cart displays images in 3 sizes: small thumbnails for the product listing pages, medium for the Product Info page and large, used when the user clicks on the “View Image” link in the product description.

When the user uploads a picture to Zen Cart in the administration interface Zen Cart processes that image when a given page is displayed (Scaling it to the appropriate size for the differnt views).

The problem here is that, out of the box, Zen Cart does not calculates new sizes for the pictures. If the user uploads, for instance, a 400px wide picture, Zen Cart will display it at a smaller size by using the dimensions attribute of the HTML code. In other words, the program will still upload and display a 400px wide picture but at a smaller size. The problem here is that a 400px wide picture displayed at 100px will still take the same amount of time to download and display as the larger image, making the page slower to load. In the list of product or any page where there are more than a couple of pictures this can considerably slow the speed of the page.

The solution is to upload 3 different images for each size. Zen Cart is designed to recognize pictures in its folders that have an extension attached to it to identify their size.
Let’s say that your image name is “productpic.jpg”. We will need to process this image in 3 different sizes.
In Photoshop take the large image generated by your digital camera (NOTE: always take your pictures at the highest resolution possible: it’s easier to take pixels away than to create new ones) and create a small thumbnail with either the width or the height that you had chosen in the Zen Cart image handling dialog, for this purpose we’ll say 100px wide .
(to set the thumbnail size go to: admin site > Configuration [drop down menu] > Images [third from the top] > Small Image Width or Small Image Height) Upload that thumbnail to Zen Cart as you normally would:
Admin > catalog > categories/products > category > product and now your product has a high quality, small thumbnail that will load very fast in list view. With Photoshop or many other (and cheaper) graphic programs you can even batch process your images to create thumbnails in a much faster fashion. I’ll publish a future tutorial on this topic.

For your medium and large pictures, whose size you can set in the Administration dialogs, you can repeat the same process, but instead of uploading the pictures using the Zen Cart administration interface you simply FTP them to their directories making sure to add an extension at the end that will tell Zen Cart that the pictures belong to a certain product but they are a different size. Zen Cart will know to display them in the appropriate pages.

This is how it works:

We have uploaded a thumbnail called “productpic.jpg” at a 100px size.
Now, go back to Photoshop and take the original picture (high res) again. This time make its size 300px (or the size of your medium picture, set at to use as a medium picture always make sure the size is correctly set up in the admin panel).
To set the medium picturesize: admin site > Configuration > Images > Product Info – Image Width (or image height)
Once the new picture is ready, keep the filename the same but add at the end _MED, like this: “productpic_MED.jpg” and upload it to the same folder where the original thumbnail is.

When Zen Cart sees that the picture exist in the directory it will display it instead of taking the thumbnail and resize it to 300px wide. This will create a much better picture without overtaxing your user’s loading times since it will be displayed only when they request to see that product page. Remember that while sizing down a large picture usually will result in very good quality, the reverse is never true.

Do the same for the large pictures. The filename will change to “productpic_LRG.jpg”
Zen Cart will even allow you to define your own _MED and _LRG extensions in the admin interface. I often use just _m and _l and it works just as well.

There are other tricks you should know as well. For instance, it will be unlikely you’ll have all your pictures in a landscape or portrait mode. That means that some pictures will be taller than wider and vice versa. Zen Cart really doesn’t care about that, but your image processing software does. One solution is to crop all your images square, but a better and less labor intensive solution is to separate the portrait and landscape pictures in different folders and to create 2 different batch scripts, one for each. Photoshop CS2 even has a scripting utility (beside the “Actions” palette) that should be able to handle that as well (I have yet to try it), and there are plenty of PHP scripts that handle the process quite well.
Again, I’ll be happy to publish a step by step tutorial in a future article.

Installing a better image handling system

The solution I like best involves installing a Zen Cart contribution called Image Handler 2.0. While its installation it’s not very complicated it’s not for the fainthearted. You should at least have a vague idea of how to use FTP, PHP and the Zen Cart file system. However, once installed it allows you to upload a single large image and have all three sizes created on the fly as needed. No messing around with Photoshop or with multiple uploads. One other great feature is the ability to apply a “watermark” with your logo and a copyright notice on every image. The only drawback I can see is that apparently it creates the images “as needed”, meaning rignt before they are displayed. While this is faster than downloading large images as thumnails, it does put a load on your server.
I use Image Handler2 myself and I am very impressed with it. I am even thinking of creating a template installation for Zen Cart that already has the image handler installed. I’ll keep you posted

I hope this article gave you some idea of the possibilities. For more detail there is a very nice article called Image Management for Dummies (I really dislike that name) that goes in more detail. It’s available here.
For more articles like this, please check out my site at conticreative.com
Thank you for reading so far and feel free to let me know how I can improve this article.