Module Class Suffix and CSS files

[razeor]

Hi All,

I am having a slight problem getting the Module Class Suffix to work in a custom module I have made.

I have gone through the forums and net trying to find an answer to no avail. I don't know to much about CSS so be nice

First of all I would like to know, The CSS file that I am puting the new styles into, Is this the CSS file that belongs to the theme (I assume it is but I wanted to make sure)?

ok, what I have done thusfar.

I have the two following styles I would like to add to my module:

.headerannounce {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
font-weight: bold;
}
.bodyannounce {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
font-weight: normal;
color: 00309c;
}

and for this example I put announce in the module area for Module Class Suffix. I was expecting to be able to see body and header in the styles dropdown box.

Now this might show how little I know about css.

I also changed the them from above to header.announce, body.announce and I also tried ........ Well another combination.. I can't remeber what it was now 

Anyway, please can someone explain what I am doing wrong.

Thx

[Waseem Sadiq]

Raveor,

to use the moduleclass suffix you need to do this:

look for div.moduletable in your template_css.css

this will show what the current standard module looks like.

then for a module with a different look you need to add this in you css:

div.moduletable_class2 (or whatever you want to call it)

then in Joomla admin, go to modules
select the module you want to apply the class for

and in moduleclass suffix
type in "_class2" (or whatever you called it in the example above)

that should be it

[razeor]

Thanks for the help Haaris,

I have done what you said but I can't seem to get it working still. Once I have added the _class2 to the moduleclass suffix I still can't see anything new in the Styles dropdown box. Am I meant to be able to? How do I choose to put that style on my txt? What I am after is the ability to format txt in the module according to a long list of different customized styles I have added. Is this the way to go about it? if so what am I doing wrong?

[Waseem Sadiq]

Hi mate,

You don't actually get a drop down option or anything like that.

In module admin you should have an option in parameters for typing the module class suffix you want to apply. Simply type in "_class2"

[camos]

Content items whether they be pure content pages, menus, modules orr page types which pretty much means all content have the ability to use a suffix.  Picking a module as an example which by default uses moduletable, adding a suffix like _left in the Module Manager will add the suffix and will be written like moduletable_left.  The format of the suffix is not important but I like to use something that separates the addition to make it easier to read and understand what it is for.

The next step is to create a new set of declarations for moduletable_left in template_css.css.  Both steps are necessary and spelling counts which is one of the reasons for using a separator character rather than a space.

To get the dropdown style list in the editor it may be necessary to configure the parameters of the editor.  The styles in the dropdown list should display the same ones that are in the template_css.css.  For the most part it is not necessary to use or add styles directly in the content unless something different is desired for a small selection of content. 

Cheers

[razeor]

Thanks again for the help guys.

To get the effects I wanted, I ended up using tags, then formating the txt as I needed/wanted. Works perfectly but a little more time consuming than I would have liked.

Does the job tho 

[bugsmi0]

ok i got the module class suffix working,

is it also suppose to work for things like table.contentpaneopen ?

ie i moved the mod_newwflash below banner and want to style it even though its a module, in the html it shows as table.contentpaneopen

i tried to add table.contentpaneopen_news but the style didn't happen

[bugsmi0]

seems like the suffix option only applies to div tags, haven't been able to get it to work with table or td tags

[camos]

The suffix applies to whatever.

In the properties of content item page or module create a suffix EG:_news.
If using modules as tables create in CSS table.moduletable_news also table.moduletable_news th and table.moduletable_news td.

If using modules as in CSS create .modules_news.

Cheers

[aaanativearts]

When the editor opens after you add a class, are you remembering to refresh the page? I couldn't find some new classes I created until it occured to me that I wasn't seeing the refreshed page. After refreshing, my classes were in the editor style dropdown box and I could use them. To change existing text, highlight it, then choose your class from the dropdown, then when you click the page to remove the highlighthing, the text changes to the desired class style.

[corrado444]

Save yourself some tribolations and do a view source on the page you want to change. Save it as page.html or anything else you like and apply a copy of the css file relative to your template.
Go to town with Dreamweaver or any other editor you like until the page looks the way you want. Overwrite (after back up) the old CSS file and your template will look fine.

Repeat as needed

[belowHeights00]

/*Hi...I want to change the background only on selected menu items. I have tried many modules such as hd-background and bgmax - all should be working but depending on where I put the css rule in my template.css file - it either changes only the article background, or distorts the regular css. I've also used class suffix in the menu item options but no change. Can someone please walk me through this. Thank you very much for your time.

Also ----- If I change the background class in my css it will change...so it must be in the correct place (unfortunately it obviously changes the bg in entire site ~~~ If I add an attribute style to the css it defaults to its white bg and says invalid url...regular background still works.

I can get the browser to recognize the image file...but it still won't change using either class suffix under the menu item or with HD-Background Selector. */