Public Forums 71,145 posts

[thevisionboard Friend thevisionboardJoin date: October 2010Posts: 10Downloads:13Uploads:0 Thanked: 3 times in 2 posts]

#199340

I am running Joomla 3.3.1 with the latest version of Purity iii

I can seem to get any documentation around Module Class suffix with Purity iii

What I want to to is create a specific background colour to Position 1

Any help would be greatly appreciated

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#540831

Perhaps the following resource may be helpful–> HOW TO USE MODULE CLASS SUFFIX in JOOMLA

🙂

[malibu63 Friend malibu63Join date: September 2012Posts: 31Downloads:4Uploads:0 Thanks: 7]

#540969

Hi!

I am also trying to add a bit of color to my Purity III site … I am trying to apply background color to an entire module by using existing classes such as ‘example-colors’ and ‘color-brand-…’.

I have tried to add the formatting both as Class Suffixes (as per docs mentioned above) and classes within a ‘div’ tag around my content, but neither works.

I must be missing something very obvious, because I’m sure it shouldn’t be this difficult … :((

(PS … the only ‘Typography’ class I’ve been able to get to work is the ‘Well’ by putting ‘<div class=”well well-sm”> … </div>’ around my code, but this does not apply to entire module.)

Cheers,
Mal.

[thevisionboard Friend thevisionboardJoin date: October 2010Posts: 10Downloads:13Uploads:0 Thanked: 3 times in 2 posts]

#540971

Hi Mal

I figured this one out…

What you need to do is create a custom.css file that is saved in /templates/purity_iii/css/

Within this file (custom.css) create your stylesheet for what you want to achieve in your module:

This is what I did…

Within custom.css I created:

.module_aboutus {
background-color: #e1a400 !important;
padding-top: 40px;
padding-bottom: 40px;
}

“_aboutus” is a variable and can be changed to whatever you want.

Now go to your Module

Click on the Advanced Tab and under the Module Class Suffix input the “variable” in my case it was “_aboutus”

Hope this helps…
Paul

1 user says Thank You to thevisionboard for this useful post

1. lockdown

[malibu63 Friend malibu63Join date: September 2012Posts: 31Downloads:4Uploads:0 Thanks: 7]

#541032

Hi Paul – that was a great help, BIG THANKS!

So going back to your original question, I’m wondering if it’s possible to apply a background color to a *position* rather than a module? For example, the entire ‘Sidebar’ position could have a background color, similar to Spotlights, and the color would fill regardless of the column height of the Sidebar?

Just a thought … 😉

Cheers, Mal.

PS … just tested applying a background-color via CSS

.t3-sidebar {
background-color: #0ff
}

however, background does not extend if Content is longer than modules in sidebar.

[Author]

Posts