where is a tutorial on module class suffix?

[staceywest]

Trying to understand it, im told at times when moving modules around into different module positions, you might have to change the module class suffix, or leave it blank

1. When do you fill that field in?
2. What determines what your type in the field?
3. what modules do you do it on and which ones do you not?
4. If you have moved a module from user4 to user5 and then later you want to move it again, do you have to change the suffix again?

[Troubadour]

Module class suffixes are mostly there to help you assign different styles to modules. So if you've got one style applied (in the css stylesheet) to the standard module cass, but you wanted to create a different look & feel for another module, you'd give it a suffix in the module parameters page and then in your css write the code to determine its style.

The suffix can be anything you want, but for semantic purposes it's probably best to give it something that relates to the style you're wanting to apply.

[DeanMarshall]

Typically a Joomla module is a div with a class of .module or a table with a class of .moduletable.
Most templates will cater for these default module classes and will apply a specific style to ALL such modules.

If you want to customise a specific module - or if your template accommodates multiple module styles - then the module class suffix allows you to tell Joomla which style to use for each module.

For example if you have module suffices of 'light', 'dark' and 'mid'
These will be rendered by Joomla as
...
...
...

You will then need CSS for
div.modulelight{ ... }
div.moduledark{ ... }
div.modulemid{ ... }

None of this has any bearing on the specific template position that a module is published to.
It is purely for styling purposes.

So to answer your questions:
1. When? Whenever you want to apply styling other than the default style to a module.

2. What to type? Either a suffix pre-defined within your template, or a 'hand-rolled' style suffix which you will then have to build the style code for.

3. Which modules? Entirely between you, your eye for aesthetics and your template designer.

4. The suffix is (or should be) independent of location within the template.


Hope that helps.

Dean

[April_Floyd]

Could you give us an example of what you would put into the suffix box and how you would change the code for the css module

[accuda]

Could you give us an example of what you would put into the suffix box and how you would change the code for the css module

For some reason I am struggling with this also. I understand the process and have added banner.moduletable to the css file in order to change the style of the banner area, I have then added as the suffix in the banner module banner.moduletable and nothing has happened. Is the syntax correct for this?

If I work it out myself I will post back an answer.

[ludootje]

In your template's css there might be something like this:

Code: Select all

table.moduletable {
margin-bottom: 0px;
width: 97%;
background-color: white; 
border: 0px solid #6666CC;
color: black;
border: 0px solid #0000ff; 
}

Now, you might want to have special styles for moduletables which are on the righthand side of your screen. In your template's css file, you could then insert something like this:

Code: Select all

table.moduletable_right {
margin-bottom: 2px;
width: 150px;
background-color: green;
border: 1px solid #6666CC; 
color: red;
}

Basically, your "right" modules would then inherit the properties of table.moduletable, and the properties of table.moduletable_right would be added.

In the admin. backend, you'd fill in "_right" as your moduleclass suffix for the modules which you want on the right.

Hope this helps?

Ludo

[fairywitch]

If you want to style each module individually, you will have to give each of them a class suffix in your css file. Maybe like so:

.moduletable-polls
.moduletable-whosonline
.moduletable-latest

etc., and style each as you want. Like someone said earlier, it's best to use a suffix that relates to what you are styling it for.

Then you would have to take the last part, "-polls", "-whosonline" or "-latest" and put that into the relevant modules as their module class suffix. You don't need the "-" in front, I use that so I can find them quickly in my css file, but the suffix has to be right at the end of .moduletable, no space between.

There are great tutorials out there on template design, here's one: http://www.compassdesigns.net/tutorials ... orial.html

[accuda]

Thank you guys and gals that was great. I figured it out myself in the end as I have only just come back to this post but thank you for your efforts anyway.

The problem was not the coding but more syntax. Here's what I was going to give back to the community having solved it myself.

At last I have worked out why Module Class Suffix was not working for me, so here goes with a little sharing of knowledge.

My example is with customising the banner module for better spacing and separation within my template.

the css parameter that controls this is table.moduletable in the css file.

First set up a new css look which is called table.moduletable-banner or some other suffix.

The suffix is the -banner on the end. Although the module is looking for table.moduletable to serve up the css, by putting -banner in the Module Class Suffix box within the module it ignores the table.moduletable css entry and goes to the table.moduletable-banner entry.

So long as you use the table.moduletable or the css entry that applies to the module or area that you are modifying and you are able to add a suffix in the admin area, you can add a  suffix to the original css entry, as an additional entry in the css file without affecting the rest of the modules.

So recap:

1. Add css entry to your css file by naming it the same as the the existing module class and add the suffix of your choice to the end.

e.g. table.moduletable (original)
     table.moduletable-banner (original + your suffix)

Code: Select all

table.moduletable-banner {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCCCCC;
	width: 97%;
	padding-bottom: 12px;
}

Do not delete the original from your css files as other modules may well be using it.


2. In the Site Module : Edit area of the admin panel add -banner to the Module Class Suffix box and your modifications are done.


Fairywitch and ludootje, this is exactly the syntax I was looking for many thanks.

[accuda]

There are great tutorials out there on template design, here's one: http://www.compassdesigns.net/tutorials ... orial.html

Just looked at this and and it seems to be one of the better ones that I have seen. Thanks, it is now bookmarked for the next template.

[accuda]

Basically, your "right" modules would then inherit the properties of table.moduletable, and the properties of table.moduletable_right would be added.

Hope this helps?

Ludo

Thanks Ludo, I never thought of it that way and is a great help with an overall style for a particular column that could work well in my case.

[sirSLR]

ok i have read all of your posts and i still can't apply module class suffix on my module and i really started to look like this-->

so if aneyone could help me ba making simple css that would change minifrontpage modul or at least tell me what to do

site is http://www.malitisak.hr

[Troubadour]

First of all, have you applied the module suffix in the module parameters?

What are you trying to achieve?

[sirSLR]

i tryed everything

and i would like to make a line that would separate articles in minifrontpage modul.

it is first under dropdown menu...

http://www.malitisak.hr

[Troubadour]

Sorry, I can't really see where you mean.

In the module parameters, you can add suffix. If you leave a space before the suffix you will get in your source code something like this:

Code: Select all

<div class="moduletable suffix"> </div>

You can then write into your stylesheet parameters that will target directly that module:

Code: Select all

div.moduletable.suffix {
border-bottom: 1px dashed #666;
}

That would do it.

[sirSLR]

thank you for your reply i managed to make it by adding this code

Code: Select all

.minifp td {
border-right:1px solid;
}

and now the only thing that is bothering me is module class suffix

[Troubadour]

Why do you think you need it?

If you've done what you were trying to do, why do you still need the module suffix?

[sirSLR]

well i dont need it for that but it is not only change i wanted to make
so i want to understand module class suffix so i can make various changes and stuff

[Troubadour]

Alright. I'm not sure where you're going wrong.

1) Which version of Joomla are you on?
2) What exactly isn't working?
- Can you find the area of the 'parameters' section to insert the module suffix?
- If you do add it to your parameters, is it visible when you 'view source' on your site?

[sirSLR]

it is joomla 1.5 newstheme template

i have module class suffix box in module

i make a code that would let's say change text colour and whatever i write in module class suffix box
nothing changes..

[Troubadour]

What are you putting into the module class suffix box?

[sirSLR]

i tryed

_name -name (space)name

but nothing made difference i also tryed in css making all those changes like

moduletablename moduletable_name.....

[Troubadour]

But did you do both?

You need to set the module suffix and then use css to style the element based on that suffix.

So if you add (space)name to to the module suffix, you then need to 'call' that suffix via css:

.moduletable.name {
border: 1px solid red;
}

[sirSLR]

ok now this is wierd

i changed text color in red

and i changed colour again to black and inserted background colour but modul stayed on red letters

[Troubadour]

Can I see your code?

[sirSLR]

Code: Select all

moduletable.pool1{
color:#CCC;
background-color:#cc0000;
}

in class suffix i wrote

(space)pool1

[Troubadour]

Send me a screenshot of the modules and a link to the page on the site where they appear and I'll take a look.

Most likely it's because of the 'cascading' bit in 'cascading style sheets' - there is other css code that specifies the text should be red overriding your code.

[sirSLR]

i found a way to do it witouth class suffix

1-i copy module's style css in template css and change its name (.minifp --> #newname)

2-than in template index.php i copy and paste module i want to change and name it 'newname

and it really works tough it is a bit longer way but i managed to change everything



and now i want to remove those dots before news




site is http://www.malitisak.hr

[Troubadour]

Yeah, I've got your site, but which specific page? I don't know which link to look at it.

If it's the front page, you need to remove 'border-bottom: 1px dashed #999' from '#bottomcontent a' in template.css

You should be testing in Firefox, using the FireBug extension to track down these sorts of issues.

[sirSLR]

wrong not underlines but those black dot's and it is on front page

i am using firebug but those dot's seem to be like ghosts cant find them anywhere

[Troubadour]

You just need to know a little css. The reason you can't see anything in the css is because they are set by default by the browser: it's a list and it automatically has bullet points unless you tell it not to.

So you simply need to find this: #noviid ul li

On line 1537 of template.css

and add this line: list-style-type:none;