Topic-icon Styling Question

Active Subscriptions:

None
10 years 6 months ago - 10 years 6 months ago #38063 by miamiman
Styling Question was created by miamiman
After all this time, I don't know how to style using module suffix class in the css files.

Could somebody tell me?

1. Name & add suffix to module leaving space. ie " my-module-sclogin"
2. Add the sample code to template css:

_login-modal my-module-sclogin
{
background-image: url (/images/headers/blue-flower.jpg);
background-repeat: no-repeat;
background-position: left top;
}

Is that it? What am I missing to properly set sc-login module?

Further to my question - AND TO AVOID OVERWRITING WHEN UPDATING - so far, I've been messing around with the module's css and bootstap css files.

How/where do I control the css for the module?

Thanks,
Last edit: 10 years 6 months ago by miamiman.
The topic has been locked.
Support Specialist
10 years 6 months ago #38064 by alzander
Replied by alzander on topic Styling Question
If you're Module Class Suffix is " my-module-sclogin", then the style you want to target is:
.moduletable.my-module-sclogin { // your styles }
You could also just target the style of:
.my-module-sclogin { // blah}
If you don't put the space before the suffix, then you can target .moduletablemy-module-sclogin The issue with that is that 'general' styles your template may have for moduletable won't work anymore.

The final caveat with that it's up to your template to properly include the module on the page in a way that the module class suffix ability. So, test with that setting, but it's not really a feature of the SCLogin module, it's a feature of Joomla that your template has to support for modules.

Further to my question - AND TO AVOID OVERWRITING WHEN UPDATING - so far, I've been messing around with the module's css and bootstap css files.

Generally, we recommend adding the styles to your own template file. Most template's have a 'custom.css' file or something similar to add your own styles. If you target .moduletables.my-module-sclogin .any-specific-style it should overwrite any of our styles.

I hope that helps, but should you need anything else, just let me know.

Thanks,
Alex
The topic has been locked.