Support Offline : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

Module Styling - how to remove outer border?

Featured Lock Resolved Issue
Hello,

I'm not finding any information on basic module class suffixes for Helix Ultimate?
In looking through the forum responses, you advocate for creating custom CSS to achieve these results.

However, this is not my strong suite :(

How can I go about simply removing the default border around modules in Helix Ultimate?
Or, control padding within?

Could you please provide a few small snippets of example code that I might use to achieve this, along with some steps for how to properly invoke this through custom CSS?

I've already managed a few basic changes via this method using a custom, update-safe CSS override and placed this into my templates directory. But I simply don't know how to carry out similar steps to achieve what I've described above.

Thanks in advance! :)

Attachments (1)

  • how-to-remove.jpg
    how-to-remove.jpg 17.6 KB

6 Answers

Paul Frankowski - Staff

More than a month ago #Permalink
Hi,
Tip for today:
To remove border under module title:

#sp-left .sp-module .sp-module-title, #sp-right .sp-module .sp-module-title {
padding-bottom: 10px;
border-bottom: none;
}


To remove module border:

#sp-left .sp-module, #sp-right .sp-module {
border: none;
padding: 20px;
}




Tip for tomorrow:
https://www.joomshaper.com/blog/which-line-of-css-i-have-to-edit-code-inspector-in-action

[email protected]

More than a month ago #Permalink
Many thanks, Paul!

Link bookmarked. ;)

[email protected]

More than a month ago #Permalink
Can you provide me one last tip on how to implement this as a module suffix so that I might style modules individually, instead of site-wide?

Cheers & thanks again! :)

Paul Frankowski - Staff

More than a month ago #Permalink
As always in joomla, you have to:
1) add extra class name for each module in module settings > Module Class Suffix
for example: noline
2) Then use modified version of my previous code:

#sp-left .sp-module.noline .sp-module-title,
#sp-right .sp-module.noline .sp-module-title {
padding-bottom: 10px;
border-bottom: none;
}

[email protected]

More than a month ago #Permalink
Most excellent! Thanks once again. :)


There are no replies made for this post yet.
Be one of the first to reply to this post!

Leaderboard (30 days)

Paul Frankowski

Paul Frankowski

Total Accepted Answers: 98
Toufiq

Toufiq

Total Accepted Answers: 51
Sifat

Sifat

Total Accepted Answers: 38
Ofi Khan

Ofi Khan

Total Accepted Answers: 21
Mehtaz Afsana Borsha

Mehtaz Afsana Borsha

Total Accepted Answers: 21

119

Templates

306692

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us