Module class suffixes


  Page 1 of 4 Next Last 
Author Message
Manuel Adorni

Posted: 8/8/2009
Quote message 

I need to know the same response. Please, when you know how to use art-xxx styles please tell me.

Very thanks
 
M Lake

Posted: 8/9/2009
Quote message 

Easiest way to find where CSS code can be changed PLUS what the end appearance of the changed CSS will be is:

1. Install and use Firefox for your web design needs with
2. the Firebug Tool Addon

In Firebug all you need to do is:
Turn on Firebug, use the "Click an element in the page to inspect" tool.

The source code with source file name including location, "line number" will be displayed. In Firebugs Source code window you can also test out changes without altering original code.

Once satisfied with the change you would like to make:
1. open favorite text editor
2. goto "line number" designated in Firebug
3. make changes
4. save file
5. refresh browser

your done. :-)
 
Jello

Posted: 8/10/2009
Quote message 

Hi M Lake.

Thanx for the input, this works well on a standard joomla template, with artisteer it is a whole new story....

Still NO success.... Where is the artisteer product support ?
 
Steve Vyse

Posted: 8/10/2009
Quote message 

I have the same issue. Had a developer check that I was doing it right but whatever we do the module class suffix just doesn't work. Very frustrating.
 
Garry

Posted: 8/10/2009
Quote message 

You should contact Artisteer support at: http://www.artisteer.com/?p=support
 
Brian

Posted: 8/11/2009
Quote message 

I've got the same requirement. I used Artisteer to create the bulk of the template but I wanted to change the background colour on some menus but it looks like functions such as function modChrome_artblock($module, &$params, &$attribs) in modules.php doesn't append moduleclass_sfx so you have no way of applying an alternate style.
I suspect if the module.php in the template needs to be changed to write the moduleclass_sfx you'll be able have alternate styles in the css.

 
Brian

Posted: 8/12/2009
Quote message 

I changed modules.php and was able to create alternate styling using the module class suffix.

In modules.php you need to ensure the module class_sfx is appended to the class name.
e.g.

<div class="art-Block<?php echo $params->get('moduleclass_sfx'); ?>">

Then in the css file you need to all the same class names with the suffix you intend to use.

These alternate classes can have different styling. I wanted to have alternate color left hand menu's (ie. the Block style) so I also had to duplicate the png image files that make up the borders with a different name. I just inserted the intened class suffix before the .png. I did this on the server. I'll need to change the xml file for the template to include the new image files.

I used artisteer to create the alternate styles but had to add it into the css with the appropriate suffix.

The release notes stated 2.2 was suppose to support moduleclass_sfx, I can't see that it does without the above changes.

:*)
 
Ashe

Posted: 8/13/2009
Quote message 

The fact that the Brain can be made most welcome, but this may not always work correctly
In Artisteere there are only three blocks of style, and they are working right.


 
Brian

Posted: 8/13/2009
Quote message 

I now see how you've implemented the switch using the moduleclass_sfx.
Your implementation is not as Joomla is suppose to work.
The suffix allows you to add more styles in the css by duplicating the default class with the suffix and modifying elements.
I'm not familiar with the other CMS solutions Artisteer supports but I'd be surprised if the others didn't have a similar capability.
Even as a Joomla only requirement the potential customer base is massive.


In my ideal scenario I would have Artisteer allow me to define these suffixed styles on top of the default for at least blocks and articles.
Perhaps implemented as a dropdown list on each tab that you can add to beyond the default style.
Each additional entry corresponding to the suffix you'd use in Joomla.

At the moment I'm using Artisteer to create the variants as seperate templates and then meshing them together in the css as suffixed versions of the default.
To get this to work for blocks I had to modify the modules.php to append any suffix to the class in the div tags.
I'm now looking at how to acheive the same for the articles presented in a category blog layout.


The Style requirement I'm implementing is a site with colour coded menus (ie.
block style) down the left hand side.
The Articles then need the same colour coding.

I've got another site which uses a template I bought from Joomlashack.
That template uses the suffix to allow graphic borders around the modules.
It's those types of accents that make the templates really powerful.

Great product and if my ideal scenario doesn't see the light of day, it's provided a virtual mentor in better understanding the mechanics of how joomla templates work by generating examples to experiment with.

 
CP

Posted: 8/13/2009
Quote message 

Thanks to Brian for posting a work around for this. I'm trying it out right now, after 3 days of searching for a useable answer to this problem.

This shortcoming in Artisteer is huge, I know it's a product aimed at "entry-level" designers, but having some custom functionalities built in would make this software a lot more appealing to the "intermediate-level" designers like myself. The time you save in designing the layout is absorbed while deciphering what parts of the code you can modify and tweak to suit your needs. It's a good product, but still needs some work.


 
2ninerniner2

Posted: 8/13/2009
Quote message 

Bonjour,

I may be mistaken, but my understanding of how the module class suffix is supposed to work is completely different than what is being discussed here in this thread. I just tried it on a test site with a 2.2 generated template: works exactly as advertised, or at least how I understand it.

Here's my take on it and how it actually works on my test site:
- look at the "Module Positions for Joomla" graphic on the Artisteer site
- notice that the Banner1 position is by default "No Style (art-nostyle)"
- but let's say that you want to put a module in that Banner1 position and have it styled like the Left or Right side modules or the Top1 - 3 modules, which are Block Style (art-block)
- in the Module Class Suffix field of the MODULE you want in THAT position, just add art-bock and there ya go ... styled just like the others :)

That's my understanding of how this is supposed to function.

Cheers!
Lyle
 
Artisteer

Posted: 8/14/2009
Quote message 

This "art-" suffix was added to Artisteer classes in order to prevent
naming conflicts with other non-Artisteer classes that may be applied to
page components. So "art-" is just a part of Artisteer class name,
nothing to worry about.

But I understand what confuses you and other experienced Joomla users.
As you know, there is a Module Class Suffix parameter available in
module settings which usually allows users to change styles of their
modules by specifying custom class suffix. I won't describe it in
detail, you can read how it is supposed to work here:
http://docs.joomla.org/Tutorial:Using_Class_Suffixes_in_Joomla!_1.5
<http://docs.joomla.org/Tutorial:Using_Class_Suffixes_in_Joomla%21_1.5>

But the thing is that it does not work this way in Artisteer themes.
Instead, our developers implemented another feature which is kind of
similar to the standard Module Class Suffix functionality (though
currently is much more limited). It is described in the "Joomla Module
Style" paragraph here:
http://www.artisteer.com/?p=help_joomla

So users can open the same Module Class Suffix parameter and specify one
of the three available values: art-article, art-block or art-nostyle.
But these art-article, art-block and art-nostyle values are NOT actually
the suffixes, but the exact classes that will be applied to the modules
(div-s). And this looks confusing to many users who are accustomed to
the standard Module Class Suffix functionality and think of
"art-nostyle" or even just "art-" as being a module suffix.


 
Birder

Posted: 8/14/2009
Quote message 

I dont understand some of what people say here but i find Artiseer does what its says in its instructions and does it very well. I have been designing sites since 1997 and its the best template program i have ever used and has paid for itself over and over again.

For what it does against what it costs, it is very inexpensive.

What users should do is work to its limits and not to what it cant do, if you start manually editing things then forget you should be on your own..

The other thing i find strange is comments about poor support, wow its about the best there is, you ask for a new feature and it appears in the next version or you get an email that says it will never appear, but at least you get an answer.

All i say is keep up the good work.
 
2ninerniner2

Posted: 8/15/2009
Quote message 

I have to agree wholeheartedly with @Birder! :-)

I too have been doing "this" since the mid 90's and, not to give the Artisteer Team any "wrong" ideas, but for what this program does, it should have another "zero" on the price tag! Really! If you are using this for one or two sites, and only with one target environment, then you may disagree, but gee whiz, folks, try to find anything else, at any price, that, with a single mouse click, can generate a great looking template/theme for SEVEN unique web environments! For the "purists", it may not be the "be all, end all", but damn, it certainly does give one with any amount of CSS/HTML/PHP knowledge a definite "leg up" when it comes to this type of work!

Great job, Artisteer! It can only get better :-)

Cheers!
Lyle
www.2ninerniner2.com
 
Artisteer

Posted: 8/17/2009
Quote message 

Currently users can use one of the three class names:
art-article, art-block or art-nostyle. The desired class name should be
specified in Joomla Module parameters > Module Class Suffix field.

For example, "art-nostyle" should be used when a user does not want any
style to be applied to a particular module. In that case a specific html
code (different from the code generated when art-block or art-article
module class suffix is specified) will be generated for the block. The
exact place where this html is rendered in our theme is:

function modChrome_artnostyle($module, &$params, &$attribs)
{
if (!empty ($module->content)) : ?>
<div class="art-nostyle">
<?php if ($module->showtitle != 0) : ?>
<h3><?php echo $module->title; ?></h3>
<?php endif; ?>
<?php echo $module->content; ?>
</div>
<?php endif;
}

in ThemeName\html\modules.php file.

You see that the above code only wraps block content in a single <div
class="art-nostyle">... </div> and displays the module title, if it's
not hidden.

To clearly see the difference, you can compare it with the "art-block" code:

function modChrome_artblock($module, &$params, &$attribs)
{
if (!empty ($module->content)) : ?>
<div class="art-Block">
<div class="art-Block-tl"></div>
<div class="art-Block-tr"></div>
<div class="art-Block-bl"></div>
<div class="art-Block-br"></div>
<div class="art-Block-tc"></div>
<div class="art-Block-bc"></div>
<div class="art-Block-cl"></div>
<div class="art-Block-cr"></div>
<div class="art-Block-cc"></div>
<div class="art-Block-body">

<?php if ($module->showtitle != 0) : ?>
<div class="art-BlockHeader">
<div class="l"></div>
<div class="r"></div>
<div class="art-header-tag-icon">
<div class="t">
<?php echo $module->title; ?>
</div>
</div>
</div>
<?php endif; ?>
<div class="art-BlockContent">
<div class="art-BlockContent-body">

<?php echo $module->content; ?>

</div>
</div>
</div>
</div>
<?php endif;
}

You see how many div-s are added and how many classes are applied to the block in that case.

 
Brian

Posted: 8/19/2009
Quote message 

After much testing and coding I've managed to module class suffixes and page suffixes working as per joomla. The only thing I've yet to get working is an alternate blockquote style in the articles.

By supporting the way joomla suffixes are suppose to work
I can using Artisteer to create variants styles as seperate templates and then mesh them together in the css as suffixed versions of the default. In the website I'm working I've got three colour coded menus on the left now acheived by suffixing the menu module then the articles are colour coded to match the menus. This si supported throught the pageclass suffix.

This allows me to have virtually unlimited variants of styles in my template and not limited to the three defaults artisteer provides.

 
Will Patterson

Posted: 8/20/2009
Quote message 

Excellent tip, i was just wondering how to do this. I now have two module designs which can be added using the joomla suffixes - see on the left hand column - note this site isn't live yet hence not being fully functional.

http://79.170.40.49/skihigher.com/
 
Skes

Posted: 8/21/2009
Quote message 

Hi Brian,

is it possible that you share your knowledge about modifying the files so that module class suffixes work as intended?
 
Will Patterson

Posted: 8/21/2009
Quote message 

open the "modules.php" file and look for the piece of code that starts with:

function modChrome_artblock($module, &$params, &$attribs)
{
if (!empty ($module->content)) : ?>

Below this is the code that creates the artisteer div's to make the modules look as they are supposed to according to your design.

the "div"s that make these up start with class="art-???"

What this does is give each part of the module the specific class of the artisteer module design. If you want to keep this design but have variations of it then you will need to paste the following code <?php echo $params->get('moduleclass_sfx'); ?> into each div in the modules.php file. eg.

I have the following in my modules.php file:

<div class="art-Block">
<div class="art-Block-body">

<div class="art-BlockHeader">
<div class="l"></div>
<div class="r"></div>
<div class="art-header-tag-icon">
<div class="t">
</div>
</div>
</div>
<div class="art-BlockContent">
<div class="art-BlockContent-cc"></div>
<div class="art-BlockContent-body">

Note i have stripped out some of the other code to simplify it.

This then becomes the following:

<div class="art-Block<?php echo $params->get('moduleclass_sfx'); ?>">
<div class="art-Block-body<?php echo $params->get('moduleclass_sfx'); ?>">

<div class="art-BlockHeader<?php echo $params->get('moduleclass_sfx'); ?>">
<div class="l"></div>
<div class="r"></div>
<div class="art-header-tag-icon<?php echo $params->get('moduleclass_sfx'); ?>">
<div class="t">
</div>
</div>
</div>
<div class="art-BlockContent<?php echo $params->get('moduleclass_sfx'); ?>">
<div class="art-BlockContent-cc<?php echo $params->get('moduleclass_sfx'); ?>"></div>
<div class="art-BlockContent-body<?php echo $params->get('moduleclass_sfx'); ?>">

This now allows to use the module suffixes in the admin area of joomla but you will still have to setup the styles in your stylesheet to suit the suffixes you put in.

An example of this is if i want to duplicate the module appearance i have designed with artisteer but have different colours for the header and the background of the content and say i want to call this suffix "-green"

In your stylesheet copy all of the styling for your module (there are quite a few to copy) and they all start with .artBlock so make sure you copy them all. Then i just need to add the -green to the end of all the ones i copied eg.

I originally had:

.art-BlockHeader
.art-Block
.art-Block-body
.art-BlockContent
.art-BlockContent-body

etc

these become

.art-BlockHeader-green
.art-Block-green
.art-Block-body-green
.art-BlockContent-green
.art-BlockContent-body-green

then you can change your background colours, header images etc to suit the "-green" style.
Once thats don't its just a matter of logging into your admin area - go to module manager, select a module to edit the add in the -green to the suffix box and save.

hey presto, hope this helps
 
Brian

Posted: 8/24/2009
Quote message 

Will Patterson has posted pretty much all is needed to support module class suffixes.

Supporting Page Class Suffix to independentyl style articles needs all the templates component files changed. Too many changes to post here, but it's essentially the same procedure as what Will posted for modules except the parameter is different.
<?php echo $this->params->get('pageclass_sfx');?>

The biggest hurdle without a debugable test environment was where the Params object passed needed to be passed in a couple of functions and finding every instance of the function call..
I've provide Artisteer with all my code changes. They have stated "we plan to implement such feature in future Artisteer updates"

 
Skes

Posted: 8/26/2009
Quote message 

Hey Will&Brian,

thank you so much for these informations. It works perfect for my needs. ;-)
 
Paolo Coveri

Posted: 9/21/2009
Quote message 

This is my solution.
ATTENTION - It's a hack for the file modules.php placed in the folders of Artisteer program only.

I hope will be usefull.

Ciao!

----------------------------------------------------
Code only for %ProgramFiles%\Artisteer 2\Library\Data\Templates\Joomla\Export\Files\html\modules.php


<?php
{JoomlaNoDirectAccess}

if (!defined('_ARTX_FUNCTIONS'))
require_once('../functions.php');

function modChrome_artstyle($module, &$params, &$attribs)
{
// START ADDED BY Paolo Coveri
$sfx = $params->get('moduleclass_sfx');
if ($sfx=="art-nostyle" || $sfx=="art-block" || $sfx=="art-article" || $sfx=="") {
// END ADDED BY Paolo Coveri
$style = isset($attribs['artstyle']) ? $attribs['artstyle'] : 'art-nostyle';
$sfx = $params->get('moduleclass_sfx');
if (in_array($sfx, array('art-nostyle', 'art-block', 'art-article')))
$style = $sfx;
switch ($style) {
case 'art-block':
modChrome_artblock($module, $params, $attribs);
break;
case 'art-article':
modChrome_artarticle($module, $params, $attribs);
break;
case 'art-nostyle':
modChrome_artnostyle($module, $params, $attribs);
break;
}
// START ADDED BY Paolo Coveri
} else {
modChrome_artpersonalstyle($module, &$params, &$attribs);
}
// END ADDED BY Paolo Coveri
}

// START ADDED BY Paolo Coveri
function modChrome_artpersonalstyle($module, &$params, &$attribs)
{
if (!empty ($module->content)) : ?>
<div class="moduletable<?php echo $params->get('moduleclass_sfx'); ?>">
<?php if ($module->showtitle != 0) : ?>
<h3><?php echo $module->title; ?></h3>
<?php endif; ?>
<?php echo $module->content; ?>
</div>
<?php endif;
}
// END ADDED BY Paolo Coveri



function modChrome_artnostyle($module, &$params, &$attribs)
{
if (!empty ($module->content)) : ?>
<div class="art-nostyle">
<?php if ($module->showtitle != 0) : ?>
<h3><?php echo $module->title; ?></h3>
<?php endif; ?>
<?php echo $module->content; ?>
</div>
<?php endif;
}

function modChrome_artblock($module, &$params, &$attribs)
{
if (!empty ($module->content))
echo artxBlock(($module->showtitle != 0) ? $module->title : '', $module->content);
}

function modChrome_artarticle($module, &$params, &$attribs)
{
if (!empty ($module->content))
echo artxPost(($module->showtitle != 0) ? $module->title : '', $module->content);
}


 
Paolo Coveri

Posted: 9/21/2009
Quote message 

...ATTENTION!
The solution above is for ARTISTEER V. 2.3.0.19571.
 
toby

Posted: 9/24/2009
Quote message 

Paolo, you're a beautiful man.

artisteer you should incorporate paolo's code into the program - it works and is a big improvement.

cheers
 
John

Posted: 10/1/2009
Quote message 

Thank You very much Paolo! This certainly did the trick!!!
 
Christian

Posted: 10/3/2009
Quote message 

Quote Artisteer:

Currently users can use one of the three class names:
art-article, art-block or art-nostyle. The desired class name should be
specified in Joomla Module parameters > Module Class Suffix field.

For example, "art-nostyle" should be used when a user does not want any
style to be applied to a particular module. In that case a specific html
code (different from the code generated when art-block or art-article
module class suffix is specified) will be generated for the block. The
exact place where this html is rendered in our theme is:

function modChrome_artnostyle($module, &$params, &$attribs)
{
if (!empty ($module->content)) : ?>
<div class="art-nostyle">
<?php if ($module->showtitle != 0) : ?>
<h3><?php echo $module->title; ?></h3>
<?php endif; ?>
<?php echo $module->content; ?>
</div>
<?php endif;
}

in ThemeName\html\modules.php file.

You see that the above code only wraps block content in a single <div
class="art-nostyle">... </div> and displays the module title, if it's
not hidden.

To clearly see the difference, you can compare it with the "art-block" code:

function modChrome_artblock($module, &$params, &$attribs)
{
if (!empty ($module->content)) : ?>
<div class="art-Block">
<div class="art-Block-tl"></div>
<div class="art-Block-tr"></div>
<div class="art-Block-bl"></div>
<div class="art-Block-br"></div>
<div class="art-Block-tc"></div>
<div class="art-Block-bc"></div>
<div class="art-Block-cl"></div>
<div class="art-Block-cr"></div>
<div class="art-Block-cc"></div>
<div class="art-Block-body">

<?php if ($module->showtitle != 0) : ?>
<div class="art-BlockHeader">
<div class="l"></div>
<div class="r"></div>
<div class="art-header-tag-icon">
<div class="t">
<?php echo $module->title; ?>
</div>
</div>
</div>
<?php endif; ?>
<div class="art-BlockContent">
<div class="art-BlockContent-body">

<?php echo $module->content; ?>

</div>
</div>
</div>
</div>
<?php endif;
}

You see how many div-s are added and how many classes are applied to the block in that case.


On your website under “Installing and using Joomla Templates”, Artisteer wrote;
“Joomla Module Style
The Default Position Style is applied to all modules located within a specific position.
If you want to change the style of a particular module, please follow the steps below:

1. Log into your Joomla Administration and go to Extensions -> Module Manager.

2. Select the module you want to edit.

3. Go to Module Parameters and specify a suffix of your choice in the Module Class Suffix parameter box. You can use one of the available suffixes: art-article, art-block or art-nostyle.

If you specify another suffix (not available in the template) the Default Position Style will be applied to your module.

4. Save the module settings.”

Should I understand this to mean that I cannot make these changes in Joomla!? If so, is there a plan to implement this in the future because I am a php illiterate and I believe there many people in my similar position.

One major reason I bought Artisteer is to help me save time designing templates and should really be happy to see Artisteer help me do that.

 
Bas

Posted: 10/8/2009
Quote message 

I've used the hack Paolo posted. Module Class Suffix now seems to be recognized by my website, but how can I just change the header of a block in example?

Step 1: Add module class suffix "custom" to the module I like to change
-------------
When you refresh the page, the module automatically takes the art-nostyle layout.
-------------
Step 2: Add a code to the css (in example:

.div-custom
{color-background:red;}
-------------
When you refresh the page, the module background changes to the red color but the rest of the module still uses the art-nostyle layout
-------------
Step 3?

But I want the art-block style layout with a different background/header, how can I do that?
 
GarfieldLeChat

Posted: 10/18/2009
Quote message 

This appears not to work for the latest version of the 2.3 beta :(

nor does the amended code in 2.3 actually allow the module suffixs to work correctly I see that 2.4 is due out on the 24th could artisteer confirm whether this is going to be fixed for that release or conversely could they post up ahead of time the relevant modules.php out put code to be used so we can have a suffix ready version which will work with the next release.

Thanks.
 
r4robyn

Posted: 10/20/2009
Quote message 

same as above, needed urgently please! ;-)
 
Garfield LeChat

Posted: 10/28/2009
Quote message 

this is a hack which has been created for 2.3 latest beta which certainly works.

by Artisteer support team.

1.
Create two Artisteer themes with different block styles.
Let's call them MyTemplate1 and MyTemplate2.
Export both themes to Joomla.


2.
Open the generated MyTemplate1\html\modules.php file for edit and edit the modChrome_artstyle function code so that it reflects our own module class suffix:

function modChrome_artstyle($module, &$params, &$attribs)
{
$style = isset($attribs['artstyle']) ? $attribs['artstyle'] : 'art-nostyle';
$sfx = $params->get('moduleclass_sfx');
if (in_array($sfx, array('art-nostyle', 'art-block', 'art-article', 'my-art-block')))
$style = $sfx;
switch ($style) {
case 'art-block':
modChrome_artblock($module, $params, $attribs);
break;
case 'art-article':
modChrome_artarticle($module, $params, $attribs);
break;
case 'art-nostyle':
modChrome_artnostyle($module, $params, $attribs);
break;
case 'my-art-block':
my_modChrome_artblock($module, $params, $attribs);
break;
}
}

Add your custom block function call in the same file, like:

function my_modChrome_artblock($module, &$params, &$attribs)
{
if (!empty ($module->content))
echo my_artxBlock(($module->showtitle != 0) ? $module->title : '', $module->content);
}

3.
Open MyTemplate1\functions.php file for edit and add your custom my_artxBlock() function code.
For this, simply copy your second template's artxBlock() function code (located in MyTemplate2\functions.php file) and modify it by adding "my-" prefix to all css classes, like shown below:

function my_artxBlock($caption, $content)
{
$hasCaption = (null !== $caption && strlen(trim($caption)) > 0);
$hasContent = (null !== $content && strlen(trim($content)) > 0);
if (!$hasCaption && !$hasContent)
return '';
ob_start();
?>
<div class="my-art-Block">
<div class="my-art-Block-tl"></div>
<div class="my-art-Block-tr"></div>
<div class="my-art-Block-bl"></div>
<div class="my-art-Block-br"></div>
<div class="my-art-Block-tc"></div>
<div class="my-art-Block-bc"></div>
<div class="my-art-Block-cl"></div>
<div class="my-art-Block-cr"></div>
<div class="my-art-Block-cc"></div>
<div class="my-art-Block-body">
<?php if ($hasCaption): ?>
<div class="my-art-BlockHeader">
<div class="l"></div>
<div class="r"></div>
<div class="my-art-header-tag-icon">
<div class="t">
<?php echo $caption; ?>
</div>
</div>
</div>
<?php endif; ?>
<?php if ($hasContent): ?>
<div class="art-BlockContent">
<div class="my-art-BlockContent-tl"></div>
<div class="my-art-BlockContent-tr"></div>
<div class="my-art-BlockContent-bl"></div>
<div class="my-art-BlockContent-br"></div>
<div class="my-art-BlockContent-tc"></div>
<div class="my-art-BlockContent-bc"></div>
<div class="my-art-BlockContent-cl"></div>
<div class="my-art-BlockContent-cr"></div>
<div class="my-art-BlockContent-cc"></div>
<div class="my-art-BlockContent-body">
<?php echo artxReplaceButtons($content); ?>

<div class="cleared"></div>
</div>
</div>

<?php endif; ?>
<div class="cleared"></div>
</div>
</div>

<?php
return ob_get_clean();
}

4.
Now please open both MyTemplate1\css\template.css and MyTemplate2\css\template.css files and copy the entire block section from the second css file to the first one.
Edit the new block style by adding "my-" prefix, you will get the css code like:

/* begin Box, Block - My Block Style starts here*/
.my-art-Block
{
position:relative;
z-index:0;
margin:0 auto;
min-width:3px;
min-height:3px;
}
.my-art-Block-body
{
position: relative;
z-index: 1;
padding: 7px;
}
.my-art-Block-tr, .my-art-Block-tl, .my-art-Block-br, .my-art-Block-bl, .my-art-Block-tc, .my-art-Block-bc,.my-art-Block-cr, .my-art-Block-cl
{
position:absolute;
z-index:-1;
}
.my-art-Block-tr, .my-art-Block-tl, .my-art-Block-br, .my-art-Block-bl
{
width: 2px;
height: 2px;
background-image: url('../images/my-Block-s.png');
}


/* end Box, BlockContent - My Block Style ends here */

Note that the names of block images should also be changed!

5.
Now open MyTemplate2\images folder and rename all block images to be like:
my-BlockContentBullets.png
my-BlockHeader.png
my-BlockHeaderIcon.png
my-Block-h.png
my-Block-s.png
my-Block-v.png

Copy the renamed images into MyTemplate1\images folder.

6.
Adjust template.ie7.css code to make the blocks look properly in IE7 browser.
For this copy all the block styles, append my- prefix to them and paste the new block into your MyTemplate1\template.ie7.css file, like:

/* begin Box, Block – my Block Style starts here*/
.my-art-Block-tl
{
clip: rect(auto 7px 7px auto);
}

.
my-art-Block-tr
{
clip: rect(auto auto 7px 7px);
}


/* end Box, Block */

/* begin BlockHeader */
.
my-art-BlockHeader .r
{
clip: rect(auto auto auto 888px);
}
/* end BlockHeader */

/* begin Box, BlockContent */

.
my-art-BlockContent-body
{
zoom: 1;
}
/* end Box, BlockContent – my Block Style ends here*/

7.
Adjust MyTemplate1\css\template.ie6.css code in a similar way to make the feature work in IE6 browser.

8.
Login to your Joomla administration and go to
Extensions > Module Manager > select your module > Edit > Module parameters.
Set Module Class Suffix to my-art-block

9.
Make MyTemplate1 the default template using Extensions > Template Manager > MyTemplate1 > Default option and visit the live site.
You should get your blocks displayed in different styles.
 
  Page 1 of 4 Next Last