Joomla Templates Club 406,261 posts

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#186817

I often see questions related to confusion as to how to utilize module class suffixes within your JoomlArt template-based websites. The following is a brief tutorial – with additional references/resources – that I hope will help you to understand the process.

You can use module class suffix to distinguish that module from others with regard to the css classes it uses.

Using the JA OnePage template as an example . . . . .

You can create module class suffix as follows . . . .

1. Add new code block into templates/ja_onepage/css/custom.css

example:


.hero-unit {
margin: 59px 0 0;
padding: 0;
text-align: center;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}

2. Add your module class suffix within the selected module as follows:

Here are some additional resources concerning using module class suffix in Joomla . . . ..

JOOMLA DOCS: MODULE CLASS SUFFIX

USING TYPOGRAPHY PAGE to IDENTIFY MODULE CLASSES

Hope this helps to de-mystify some of the confusion in using module class suffixes to modify/customize
your JoomlArt based website.

😎

5 users say Thank You to TomC for this useful post

1. dieudonne
2. JA Developer
3. sbaldwin
4. alexsmirnov
5. funci

[gribblej Friend gribblejJoin date: June 2011Posts: 208Downloads:28Uploads:6 Thanks: 4 Thanked: 10 times in 2 posts]

#520652

What if you are working with one of the new Boostrap templates in development mode driven by the multitude of LESS CSS files? Which LESS file do we use to intput our custom code? From where will the system fetch the new class styling? Things are so much more complicated now compared to the simple old-fashioned scenario you outline here.
Thank you.

[gribblej Friend gribblejJoin date: June 2011Posts: 208Downloads:28Uploads:6 Thanks: 4 Thanked: 10 times in 2 posts]

#520670

Just a note to everyone who’s working in development mode on a LESS-driven site. You will find that the LESS files don’t contain a big long style.css file. Everything is broken up into small bites. For example, T-3 modulestyle has its own little LESS file. At the end of that file is where you input your custom module styling. So, I’ve created a class called {keyboard space}Cool. And I want this module to have a black background. At the end of LESS modulestyle CSS file I type in:
.Cool
{
background: #000
}

Plus whatever custom parameters you want including text styling and borders etc.

That’s it.

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#537909

Here are some additional UPDATED resources which may be helpful . . .

http://docs.joomla.org/Using_Class_Suffixes

http://docs.joomla.org/Module_Class_Suffix

http://davidpattinson.co/how-to-use-joomla-module-class-suffix/

[Author]

Posts