Joomla Magic Web Design Module

The Joomla Magic Web Design Module was created to give fellow Joomla web designers and administrators more freedom and ease of use in the front-end of either a local testing or live site when dealing with the multitude of CSS files, views and template files.

Warning! Test the module on a local server before using on a live site. In particular, test editing of some large CSS files.

The main features include:

• Being able to update site-wide CSS files from the module to the server IMMEDIATELY,
• excellent for use with any web developer toolbar such as Safari or Firebug (copy, paste and save),
• see all active modules within a given page,
• see all components and their available views,
• move module / component views to ANY template for modification in Dreamweaver or the like,
• get a fantastic, easy viewable report of all editable files in the front-end,
• CSS editor and color picker,
• view any template in an iFrame,
• two distinct module styles for clarity - the module is also draggable and resizable,
• written using jQuery 1.6.2 and jQuery UI 1.8.14 for noConflict, and works with mootools.js.

Download Joomla Magic Web Design Module Version:1.0 (click to view)

 Joomla Magic Web Design Module Version:1.0

First release late July 2011.

 GNU/GPL    2011-08-09   English   Joomla 1.5  268.63 KB  4027

Modules

The module is comprised of four main visual panels. Here you can see every active module, with active modules left-most, inactive, right-most. The options here include being able to edit any CSS file a module uses. You're also able to COPY a modules view, if it has one, to any template.

• The Module list shows all USED modules as listed in the Joomla administration modules view.
• Modules with CSS files are shown with a (css) suffix.
• Modules with a view are shown with a (view) suffix.
• Modules not used on the page viewed are indented.
• Modules not published are prefixed with [NP], if shown.

Components

As with modules, the components panel allows any appropriate CSS file to be modified AND any view to be copied to any template. A further, less obvious choice as a feature, is being able to load another templates' view into an existing template, fairly useful if you're considering different layouts. For instance, being able to choose view archive from the Beez template into your active template.

Templates

The Templates panel is for editing CSS files and listing EXISTING view files. You can also view any template within an iFrame.

Viewing another template within a dialog window:

Utility

The Utility panel is for informational purposes. An important option here is the View Report button, as below.

View Report

The View Report button provides a dialog window showing, in this example from the second style, a full listing of all views, CSS and extension types in an easy-to-comprehend list (printable).

Here's a PDF sample report:

Download Magic Design Module Report Version:1 (click to view)

 Magic Design Module Report Version:1

A PDF showing a report printed from Safari as output by the module.

 Commercial license    2011-07-30   English   Joomla 1.5  0 B  274

Keep Minimized

A nice touch here is being able keep the module minimized on each page reload.

CSS Editor

While not the piesta-resistance of CSS editors, the module provides editing of any listed CSS file as a mono-spaced text file. You can easily use your browsers find command for any text, and the likes of Firebug to design interactively, then copy and paste into the editor and save.

Different Styles

The module offers two styles from the jQuery UI library. The first is a lightness theme, the second dark-luv, as below. Both complement light or dark templates.

Security (User Access)

The module disregards user permissions for retrieving the lists of ALL FRONT-END modules and components that exist in the database. Unpublished modules can be shown if needed.

User Access allows you to place a list of user ID's who can use the module, such as 62,43,466 etc, essentially, if used all of these users would get the exact same listings. If User Access is left blank everyone has access WHICH ISN'T ADVISABLE!!! The module will always insert 62 for Administrator on any apply when left blank, but will keep blank only if saved.

Testing

Tested with the latest version of Joomla, version 1.5.23, with mootools on. The module requires the included versions of jQuery (1.6.2) and jQuery UI (1.8.14). If you load jQuery via a template and turn off Load jQuery from the module, please ensure you have the latest version. jQuery UI is always loaded.

I would recommend thoroughly testing the module with the likes of WAMP or MAMP locally before further testing and use on a production site.

Positioning

The module should be placed in a site-wide module position so that it's displayed on any page you view.