Joomla Templates Club 406,261 posts

[mazhar shah Friend mazhar shahJoin date: September 2014Posts: 201Downloads:132Uploads:37 Thanks: 37 Thanked: 8 times in 5 posts]

#853459

in different sections/pages i need to use different heights for the masshead. I need the easiest way to do this PER MODULE instance… ie. for example a module class suffix? how can i do that.
at the moment the padding height is controlled by this i think:

.jamasshead {
    background-image: url("/templates/ja_social_ii/images/bg-masthead.jpg");
    background-size: cover;
    color: #FFF;
    padding: 120px 0px;
    position: relative;
    text-align: center;
}

I need to keep the 120px 0px for most of the module instances, BUT change the padding to 40px 0x for some modules and say 60px 0px for others.
What do i put in custom.css for the two padding sizes and what should i put in each of the module class suffix box.

———or is there another way?

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#861980

Hi
Try this way :

1. Add Module suffix in Module options > http://prntscr.com/9sdgsy
2. Now define the code with module suffix class and customize style in custom.css

this code

.jamasshead.joomlart {
    background-image: url("/social/templates/ja_social_ii/images/bg-masthead.jpg");
    background-size: cover;
    color: #ffffff;
    padding: 40px 0;
    position: relative;
    text-align: center;
}

joomlart is Module suffix in Module .

[mazhar shah Friend mazhar shahJoin date: September 2014Posts: 201Downloads:132Uploads:37 Thanks: 37 Thanked: 8 times in 5 posts]

#867894

Thank you. I will try this.
The background image always has a blue mask with some % transparency over it.
I have looked everywhere and cant seem to find how to control this.

What code do i add to the module suffix to vary this colour and transparency % ?
On some pages i need to show 100% transparency – to show a full sharp image, and on other sections an different semi-transparent colour.

Many thanks

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#868493

Hi
Use below code in custom.css file

.joomlart.jamasshead:after {
    background: rgba(1, 87, 155, 0.5)!important;
}

Add module suffix with the class like i added .joomlart in above code.

[Author]

Posts