Joomla Ximenia Showcase – Separate Background Image On Each Page

Problem: Ximenia theme only has 6 different built-in sections for Showcase background images (blue, green, grey, orange, red, yellow). But what if you have 20 pages, and you want a separate background image in each Showcase section? How do you get 20 separate background images when there are only 6 Ximenia Showcase Background options?

Answer: Need a better naming/CSS system

1. Set all RT Ximenia templates to just “Blue”

– Admin Extensions > Templates > Ximenia > Style tab > Main Style row > Showcase Background: Blue

2. Add the following CSS to your Joomla Ximenia theme’s custom CSS file (root > templates > rt_ximenia_responsive > css > rt_ximenia_responsive-custom.css). This is for just the Home page’s custom Showcase background image. For multiple pages, re-use this same CSS, changing only the name of the “page” (IE: change “home” to “programs”)

body.home #rt-showcase {
background-image: url(/images/HeaderImages/bg-home.jpg);
background-position: center center;
background-color: blue;
}

3. For the Home page, make sure image file name is: bg-home.jpg, and placed in a new folder named HeaderImages: root > images > HeaderImages > bg-home.jpg

4. Add the page’s custom body tag name (“home”) to the Home page’s Menu item’s “Page Class field”: home

5. Now we have another problem: When there’s a custom background image on Showcase (via the Ximenia customization CSS file), for some reason, the H2 Article Title font switches from Ximenia’s nice-looking OxygenRegular font to plain, bold Helvetica.

6. Solution:
/* Add Ximenia font and padding settings to H2 Article Titles */
.item-pagehome h2 {
font-family: 'OxygenRegular', helvetica, arial, sans-serif;font-weight: normal;
color:#333;
margin-top:0;
}