Hi Sean,

You would most likely have to use custom css to customize the padding.

Regarding the number of entries, if you use the 'Module Class Suffix', you may reduce the number of entries in the custom css file.

What you have to do is use a unique module class and define your custom css rule under this class. Then apply this class in the advanced tab of modules which you want these rules applied.

Thank you very much for the reply. I did Google today and tried to learn how to add a class to this Joomla site. So far I am still missing the mark.

I am pretty sure that I just want to add css padding of 10px 0px 0px 0px to a bunch of modules on my site.

Maybe the answer instead is to just create another class file for each amount of padding I want to have added?

I have added some css to my custom.css to create a class to add some padding above some modules. In some places it seems to work and in other places it does not. I am sure I am just messing up the syntax.

The module titled "Most Popular Content" did work in that it added some padding above the module and pushed the bottom of the module level with the other modules in that row. So, I knew I was getting close.

But, in another row with the following three titled modules I had no such luck:
Recent Forum Discussions
Most Discussion Replies
Article & Blog Comments

I have been trying to add ten pixels above the Title of this module to give some padding to move them down and provide spacing away from the previous module when they stack on top of each other.

I tried using the following in my custom.css file:

.add10pxtop {margin: 10px 0px 0px 0px !important;}

and also

#sp-module .add10pxtop {margin: 10px 0px 0px 0px !important;}

Then in my Module Class Suffix field I added

add10pxtop

and then later I tried

sp-module add10pxtop

because I noticed that with Google developer tools that sp-module was appearing in the class name.

So, those are the things I have tried in my custom.css file:

I know that I must be close but close isn't quite cutting it.

The picture I attached shows the three modules stacking on top of each other with no padding between them. This is what I am trying to solve.

I would sure be grateful if you could point out to me what I am doing wrong so that I can continue to make this template ready for our new site design.

Sean

Hey Sean,

Your first custom css, .add10pxtop should already work. When I apply that custom css into the browser style editor, the rule is indeed being used as expected(https://www.screencast.com/t/J32FnWl5X).

If the code is already inserted properly and you are still not seeing this rule, perhaps there is some cache in place that is not applying it yet. Below is the code again.

.add10pxtop {margin: 10px 0px 0px 0px !important;}

Thank you very much for confirming the code it correct.

Is it correct than that all I have to put into the Module Class Suffix is "add10pxtop" ? (less the quotes of course)

Since it is supposed to be working I do wonder why the modules in the image I attached are not displaying with padding at the top of each module to space them out from each other a bit more.

Sean

Hey Sean,

Is it correct than that all I have to put into the Module Class Suffix is "add10pxtop" ?

That is correct.

I do wonder why the modules in the image I attached are not displaying with padding at the top of each module to space them out from each other a bit more.

Are you referring to this screenshot(https://www.screencast.com/t/2SoCxJpPi)? If you want to simulate the site layout on smaller screens, remember to use the browser's built-in responsive simulator(https://www.screencast.com/t/xyK1jKLYTiu) instead to resizing the browser because browser resize is not accurate.

I have checked the module in the simulator for smaller screens and noticed that the padding is indeed in place(https://www.screencast.com/t/Z9B442hsM). Perhaps there is still cached data on your end.

Thank you so much for that trick about the size simulator. :-) And it is working so that it great too. :-)

Hello Sean,

You are most welcome. Glad to hear that your issue has been resolved now.

As a gentle reminder, kindly start a new thread if you have any other issue in the future so it will be easier for us to manage your inquiry. I will lock and mark this thread as resolved.