how to use module class suffix

Discuss the development and implementation of Joomla! modules here.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
joomleb
Joomla! Guru
Joomla! Guru
Posts: 953
Joined: Sat Aug 20, 2005 8:53 am
Location: Panamá

how to use module class suffix

Postby joomleb » Mon Jun 19, 2006 1:02 pm

Please, how to use module class suffix  ???

I'm looking for, but I found nothing ...
Is there a guide on it or something like that to learn about it ?

Many Thanks for helping ...

User avatar
chay
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 175
Joined: Wed Aug 17, 2005 11:20 pm
Location: Alaska
Contact:

Re: how to use module class suffix

Postby chay » Mon Jun 19, 2006 8:43 pm

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

Open the module that you want to style in your backend: Module->Site Modules->Module Name link. Add a suffix of your choice, say  _mymodulestyle ,  in the module class suffix parameter box, and save.

Then go to Site->Template Manager->Site Templates. Click the radio box for the template you're using; then click Edit CSS.

Scroll down to your css classes for modules. You'll probably see generic settings like the following:
table.moduletable {
  width            : 167px;
  border          : 1px solid #C0C0C0;
  margin-bottom    : 10px;
  margin-left      :10px;
}

table.moduletable th {
  font-size        : small; 
  font-weight      : bold;
  color            : #000; 
  background      : #FFF;
  text-align      : center;
  padding-left    : 3px;
  padding-right    : 11px;
  letter-spacing  : -1px;
  border-bottom    : 1px solid #999999;
}

table.moduletable td {
  padding          : 2px 4px;
  background      : #FFF;
  font-size        : x-small;
}


To begin the style for your the module you're working on, you might first duplicate those classes that interest you (leaving the original for modules you're not modifying. Then add to the duplicate(s) your suffix to the classes you want to change.  Say you want to change your module table heading class, you might do something like this:
table.moduletable_mymodulestyle th {
  font-size        : small; 
  font-weight      : bold;
  color            : #888; 
  background      : #FFF;
  text-align      : right;
  padding-left    : 3px;
  padding-right    : 11px;
  letter-spacing  : -1px;
  border-bottom    : 2px solid #999999;
}


If you use the developer extension in Firefox, it makes experimenting with and modifying css classes much easier: http://forum.joomla.org/index.php/topic,35531.0.html.

Best wishes.
Last edited by chay on Mon Jun 19, 2006 11:04 pm, edited 1 time in total.

rheo99
Joomla! Intern
Joomla! Intern
Posts: 62
Joined: Mon Feb 25, 2008 8:08 am

Re: how to use module class suffix

Postby rheo99 » Fri Feb 29, 2008 3:40 am

Wonderful! was looking for this exactly

rossingtoncairn
Joomla! Apprentice
Joomla! Apprentice
Posts: 18
Joined: Tue Apr 01, 2008 11:12 pm

Re: how to use module class suffix

Postby rossingtoncairn » Wed Aug 27, 2008 2:00 am

Thanks Chay. Answered all my questions in one instance. You rock!

User avatar
rw1
Joomla! Guru
Joomla! Guru
Posts: 958
Joined: Sun Aug 28, 2005 11:23 am
Location: New York
Contact:

Re: how to use module class suffix

Postby rw1 » Fri Sep 26, 2008 4:11 am

is it any different if you are styling a module using a css template made of divs?

for example, i have an allvideos reloaded module that sits in a left column which has this styling already:

Code: Select all

#left {
text-align: left;
width: 202px;
height: 287px;
float: left;
background-image: url(../images/left_bg.jpg);}

and i want to make the module have some space on the left of it.

so if i add margin-left: 10px into the above section, it pushes all the structure out of whack.

but when i add _avr in the modules suffix parameters and the following in the css, nothing happens:

Code: Select all

table.moduletable_avr {
  margin-left      :10px;
}

or

Code: Select all

table.moduletable_avr td {
  margin-left      :10px;
}

can someone tell me exactly how i can apply styling to this module in this circumstance?

thank you!

User avatar
rw1
Joomla! Guru
Joomla! Guru
Posts: 958
Joined: Sun Aug 28, 2005 11:23 am
Location: New York
Contact:

Re: how to use module class suffix

Postby rw1 » Fri Sep 26, 2008 4:50 am

what is working for me is i am hardcoding another div into the index.php, i think this must be nested divs (?), so it is like this:

Code: Select all

<div id="left">
<div id="avr"><jdoc:include type="modules" name="left" style="" /></div>
</div>


and the css is:

Code: Select all

#avr {

margin-left: 30px;
margin-top: 70px;

}

gwalker_ne8
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Wed Sep 17, 2008 7:20 pm

Re: how to use module class suffix

Postby gwalker_ne8 » Fri Apr 17, 2009 11:52 am

I'm stuck, please help, I'm looking at creating different styles for the jb-faq module.
I can't workout how to get this working, the current css is:

.faqtoggler,.closed {background: url(q.png) no-repeat;font-size: 16px;padding-left: 48px;}
.open {background: url(qa.png) no-repeat;}
.faqClear {clear: both;padding-bottom: 10px}

I've added " newfaq" to the module I want to change, however I'm not sure how to do this, can somebody please help?

I think I need to copy the this current css and add .newfaq or _newfaq somewhere, but i'm not sure where.

G

User avatar
almamun
Joomla! Guru
Joomla! Guru
Posts: 798
Joined: Fri Jul 18, 2008 2:28 pm
Location: Dinajpur, Bangladesh
Contact:

Re: how to use module class suffix

Postby almamun » Sun May 03, 2009 8:00 pm

Could you pls tell me how to override bullets using module class suffix?
Bengali (Bangladesh) Forum Moderator

http://www.amviro.com - Custom and CMS-based website.
http://UpworkTips.com - Earning more at Upwork

JDevOnline
Joomla! Apprentice
Joomla! Apprentice
Posts: 13
Joined: Sat Aug 29, 2009 8:47 pm

Re: how to use module class suffix

Postby JDevOnline » Sat May 15, 2010 3:37 pm

Hello,

Since I don't know how to use Module Class Suffix, what I am doing is creating static modules, with following code:

Code: Select all

<div id="resourcesmenu" class="inv-menu">
<div class="bluehead">&nbsp;</div>
<div class="headerbar">Main Menu</div>
Menu Content
</div>


I want all my modules to look like the image attached. Can anyone tell me how to achieve it?

Thanks in advance!
You do not have the required permissions to view the files attached to this post.

eseller
Joomla! Apprentice
Joomla! Apprentice
Posts: 23
Joined: Wed Nov 05, 2008 10:01 pm

Re: how to use module class suffix

Postby eseller » Fri May 28, 2010 4:48 pm

I have similar problem and when I click the edit CSS I get many css files(general.css, print.css,template.css ) for bees theme can you tell me which one contains the CSS code for modules?

ryan777
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 135
Joined: Mon Aug 03, 2009 4:23 pm

Re: how to use module class suffix

Postby ryan777 » Thu Jan 20, 2011 8:00 pm

eseller,

Template.css is usually the best one. I know no one has posted in this thread since may, but for the future someone may find it useful.

User avatar
Hunterer
Joomla! Apprentice
Joomla! Apprentice
Posts: 37
Joined: Wed Nov 24, 2010 2:32 pm
Location: France

Re: how to use module class suffix

Postby Hunterer » Fri Jan 21, 2011 9:37 am

hello everyone, I'm having a similar issue with the class_suffix, I want to have a module which scrolls down with the page, I've had help on another page (viewtopic.php?f=428&t=582773&p=2383196#p2383196) and I've manged to get all the modules on the right of my page to act like this, however, if I have multiple modules on one page, they are all on top of each other. I only want to have this functionality on a few pages and not all of them and so I need to use a class_sfx. This where my problem is, I don't know how to do it. for the moment, my template page looks like this

/* template.css, Copyright (C) 2007 - 2010 YOOtheme GmbH */

@import url(reset.css);
@import url(layout.css);
@import url(typography.css);
@import url(menus.css);
@import url(modules.css);
@import url(joomla.css);
@import url(extensions.css);

#right .module {position:fixed; top:250px;}



I've given the module that I want to use the class suffix "_partners", how do I modify the line
#right .module {position:fixed; top:250px;} to only work on this module, I've already tried

#right .module_partners {position:fixed; top:250px;}
and
#right .moduleclass_sfx_partners {position:fixed; top:250px;}
and
#right .moduleclass_sfx__partners {position:fixed; top:250px;}
but to no avail

Thanks in advance for any advice.
Ross
♠Hunterer♠

User avatar
Hunterer
Joomla! Apprentice
Joomla! Apprentice
Posts: 37
Joined: Wed Nov 24, 2010 2:32 pm
Location: France

Re: how to use module class suffix

Postby Hunterer » Fri Jan 21, 2011 10:40 am

as a follow up, I'd like to say that I'm currently looking at this page here

http://docs.joomla.org/Tutorial:Using_C ... ass_Suffix

and I'm also using the firebud add-on for firefox, which I've used for months now, so, I decided to try and find my class suffix, and I couldn't. for the particular module I have the following

CropperCapture[6].jpg


any idea's are greatly appreciated, also, I'm using the yoo_explorer template.

Thanks again
You do not have the required permissions to view the files attached to this post.
♠Hunterer♠

Dupont77
I've been banned!
Posts: 11
Joined: Tue Aug 23, 2011 2:42 am

Re: how to use module class suffix

Postby Dupont77 » Wed Aug 24, 2011 7:33 am

JDevOnline wrote:Hello,

Since I don't know how to use Module Class Suffix, what I am doing is creating static modules, with following code:

Code: Select all

<div id="resourcesmenu" class="inv-menu">
<div class="bluehead">&nbsp;</div>
<div class="headerbar">Main Menu</div>
Menu Content
</div>


I want all my modules to look like the image attached. Can anyone tell me how to achieve it?

Thanks in advance!


This is more helpful since I don't know how to use module..its easy :p

bernardpiper
Joomla! Intern
Joomla! Intern
Posts: 86
Joined: Tue Apr 06, 2010 11:22 am

Re: how to use module class suffix

Postby bernardpiper » Sat Nov 19, 2011 5:50 pm

Hey guys

I have started this threat but so far not solved my problem.. Looks liek you guys have hadkind of the same issues. Could anyone please take a look?

viewtopic.php?f=466&t=674621&p=2673869#p2673869


Thanks a lot ;)

om1985
Joomla! Apprentice
Joomla! Apprentice
Posts: 48
Joined: Tue Jun 08, 2010 1:54 am
Location: New Zealand
Contact:

Re: how to use module class suffix

Postby om1985 » Tue Dec 06, 2011 7:51 pm

You must understand that "Module Class Suffix" is used only for styling. Your "Module Class Suffix" code must represent a code located in the templates css files. Do not mistake "Module Class Suffix" as an alternative mean's to enter html codes etc. You cannot insert html codes into a "Module Class Suffix" you can only use it to change a style of your module to a style located in your css file.

om1985
Joomla! Apprentice
Joomla! Apprentice
Posts: 48
Joined: Tue Jun 08, 2010 1:54 am
Location: New Zealand
Contact:

Re: how to use module class suffix

Postby om1985 » Tue Dec 06, 2011 7:55 pm

Dupont77 wrote:
JDevOnline wrote:Hello,

Since I don't know how to use Module Class Suffix, what I am doing is creating static modules, with following code:

Code: Select all

<div id="resourcesmenu" class="inv-menu">
<div class="bluehead">&nbsp;</div>
<div class="headerbar">Main Menu</div>
Menu Content
</div>


I want all my modules to look like the image attached. Can anyone tell me how to achieve it?

Thanks in advance!


This is more helpful since I don't know how to use module..its easy :p


You cannot insert scripts or html codes into a "Module Class Suffix". You can only insert a style code that is in your css file. If you do not have the style in your css than the code will not be valid.

If you need to use a background image for a module, joomla 1.7 doe's have this feature.

om1985
Joomla! Apprentice
Joomla! Apprentice
Posts: 48
Joined: Tue Jun 08, 2010 1:54 am
Location: New Zealand
Contact:

Re: how to use module class suffix

Postby om1985 » Tue Dec 06, 2011 8:05 pm

Hunterer wrote:as a follow up, I'd like to say that I'm currently looking at this page here

http://docs.joomla.org/Tutorial:Using_C ... ass_Suffix

and I'm also using the firebud add-on for firefox, which I've used for months now, so, I decided to try and find my class suffix, and I couldn't. for the particular module I have the following

CropperCapture[6].jpg


any idea's are greatly appreciated, also, I'm using the yoo_explorer template.

Thanks again


go to the joomla root directory than go and edit the file located in templates/yourtemplatename/css/css.php

in that file there should be a section for modules, you can customize these to change the module styles.

Do a backup of the file first. But if you are unsure of how to style a css than I would suggest you get someone who can.

am-an
Joomla! Apprentice
Joomla! Apprentice
Posts: 7
Joined: Wed Apr 04, 2012 8:55 am

Re: how to use module class suffix

Postby am-an » Thu Apr 05, 2012 4:28 pm

Thanks! Just what I was looking for!

armandino10
Joomla! Fledgling
Joomla! Fledgling
Posts: 4
Joined: Tue May 15, 2012 1:54 pm

Re: how to use module class suffix

Postby armandino10 » Thu May 17, 2012 1:37 pm

Hello.
I`m using joomla 2.5. The page i created is in 2 languages(two same templates-duplicated), the problem i have is that one of the languages the menu font-size is bigger than default one without changing the font-size. I have two menu modules with different Module Class Suffix (_menu & _menu_mk).
When i change size in menu.css (default template) it changes on both templates..
On the default template menu font size should be 20x and the other language the menu size must be 15x so it can look ok.
Any idea?

regards

User avatar
WendyCoggan64
Joomla! Apprentice
Joomla! Apprentice
Posts: 7
Joined: Tue Nov 20, 2012 2:31 pm
Location: Worcester, England
Contact:

Re: how to use module class suffix

Postby WendyCoggan64 » Mon Nov 26, 2012 9:35 am

rw1 wrote:for example, i have an allvideos reloaded module that sits in a left column which has this styling already:

Without meaning to de-rail the thread - do you plan to have a 2.5 version of All videos reloaded?
Building my own Joomla site and writing for http://www.slotsvideo.nl in dutch!

didszzz
Joomla! Intern
Joomla! Intern
Posts: 70
Joined: Thu Oct 04, 2012 1:10 pm

Re: how to use module class suffix

Postby didszzz » Sat Dec 22, 2012 12:57 am

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

Open the module that you want to style in your backend: Module->Site Modules->Module Name link. Add a suffix of your choice, say  _mymodulestyle ,  in the module class suffix parameter box, and save.

Then go to Site->Template Manager->Site Templates. Click the radio box for the template you're using; then click Edit CSS.

Scroll down to your css classes for modules. You'll probably see generic settings like the following:
table.moduletable {
  width            : 167px;
  border          : 1px solid #C0C0C0;
  margin-bottom    : 10px;
  margin-left      :10px;
}

table.moduletable th {
  font-size        : small; 
  font-weight      : bold;
  color            : #000; 
  background      : #FFF;
  text-align      : center;
  padding-left    : 3px;
  padding-right    : 11px;
  letter-spacing  : -1px;
  border-bottom    : 1px solid #999999;
}

table.moduletable td {
  padding          : 2px 4px;
  background      : #FFF;
  font-size        : x-small;
}


To begin the style for your the module you're working on, you might first duplicate those classes that interest you (leaving the original for modules you're not modifying. Then add to the duplicate(s) your suffix to the classes you want to change.  Say you want to change your module table heading class, you might do something like this:
table.moduletable_mymodulestyle th {
  font-size        : small; 
  font-weight      : bold;
  color            : #888; 
  background      : #FFF;
  text-align      : right;
  padding-left    : 3px;
  padding-right    : 11px;
  letter-spacing  : -1px;
  border-bottom    : 2px solid #999999;
}


If you use the developer extension in Firefox, it makes experimenting with and modifying css classes much easier: http://forum.joomla.org/index.php/topic,35531.0.html.

Best wishes.



Im using joomla 2.5 just installed and using beez_20 template. when I go to Template Manager->Site Templates. Click the radio box for the template then click Edit CSS. I dont seem to have a css? can you please tell me what css file to edit.

smcclure
Joomla! Apprentice
Joomla! Apprentice
Posts: 34
Joined: Wed Sep 19, 2012 10:07 pm

Re: how to use module class suffix

Postby smcclure » Wed Aug 28, 2013 12:16 am

But you don't say which CSS file to edit!

Celinalim
Joomla! Fledgling
Joomla! Fledgling
Posts: 4
Joined: Tue Jun 21, 2016 1:42 am

My module class suffix is the same for both modules but why it turns out differently???

Postby Celinalim » Thu Jun 30, 2016 3:45 am

I hope I can find an answer here.. I am using the same module suffix for both different modules because I want them to turn out the same way ,as in the display pattern and colour. BUT ITS THE OPPOSITE. Btw I am quite new at this , desperate for help :'( :( :'( :( What should I do?


Return to “Modules”

Who is online

Users browsing this forum: No registered users and 5 guests