Joomla Templates Club 406,261 posts

[daynw Friend daynwJoin date: July 2013Posts: 12Downloads:0Uploads:0 Thanks: 2]

#205909

Hi There,

How would i go about have a different masthead image for different pages? I have 4 pages with masthead showing and would like a different background image for each page I thought of just making multiple masthead modules but I find the configuration conditions and CSS confusing.

I have uploaded the 4 images to templates/ja_nuevo/images/masthead-images/ and they are named to match the page they will go on.

Any idea how I go about linking the images to the correct pages?

Thank you,
D

[pavit Moderator pavitJoin date: September 2007Posts: 15749Downloads:199Uploads:2274 Thanks: 417 Thanked: 4028 times in 3778 posts]

#568724

Hi

You can have only 1 masshead module published in masshead position and assigned to the pages where the masshead should be showed and use this code inside Configuration Conditions panel :

[Masshead Itemid="page_id" title="Title" background="image url"]Description[/Masshead]

each one for each page, changing page id

[daynw Friend daynwJoin date: July 2013Posts: 12Downloads:0Uploads:0 Thanks: 2]

#568800

Thanks but that didn’t change the image, just the title and description, whicht i don’t need to do as they already change per page as required. I tested the url and it definitely is correct.

[daynw Friend daynwJoin date: July 2013Posts: 12Downloads:0Uploads:0 Thanks: 2]

#733893

Thanks but that didn’t change the image, just the title and description, whicht i don’t need to do as they already change per page as required. I tested the url and it definitely is correct.

[pavit Moderator pavitJoin date: September 2007Posts: 15749Downloads:199Uploads:2274 Thanks: 417 Thanked: 4028 times in 3778 posts]

#568851

Hi

Ja Nuevo has one standard background masshead image loaded by template.css file in this way

.jamasshead {
background: url('../../../../images/bg-masthead.jpg') no-repeat;
}

So masshead module doesn’t override this

You can simply change this btw using a Css Class Suffix

Add suffix to your custom.css , for example for contact page you should create this in custom.css file

.contactpage .jamasshead {
background-image: url("../images/payroll.jpg")!important;
}

then add the suffix contact page to your contact menu item

This is the resulting page

You can create new class suffixes inside custom.css file for each menu item, changing masshead background image

example: hr-management page

.hrmanagement .jamasshead {
background-image: url("../images/yournewmassheadimage.xxx")!important;
}

then add the suffix hrmanagement to the page

Hope was clear

---

Attachments:

1. 
2. 

[pavit Moderator pavitJoin date: September 2007Posts: 15749Downloads:199Uploads:2274 Thanks: 417 Thanked: 4028 times in 3778 posts]

#733944

Hi

Ja Nuevo has one standard background masshead image loaded by template.css file in this way

.jamasshead {
background: url('../../../../images/bg-masthead.jpg') no-repeat;
}

So masshead module doesn’t override this

You can simply change this btw using a Css Class Suffix

Add suffix to your custom.css , for example for contact page you should create this in custom.css file

.contactpage .jamasshead {
background-image: url("../images/payroll.jpg")!important;
}

then add the suffix contact page to your contact menu item

This is the resulting page

You can create new class suffixes inside custom.css file for each menu item, changing masshead background image

example: hr-management page

.hrmanagement .jamasshead {
background-image: url("../images/yournewmassheadimage.xxx")!important;
}

then add the suffix hrmanagement to the page

Hope was clear

[Author]

Posts