Joomla – Different Header Image On Each Page

Display a different header image at the top of each page + logo and text.

Goal: Different header background images at the top of each page, but same logo and text on top of each photo.

Theme: Ximenia by RocketTheme
Theme Position: Showcase
Joomla: 3.0.x
Live example will be: http://sd.califaep.org/awards-event

1. Create a Custom HTML Module

  • Module tab: add logo image and text
  • Module tab: Position dropdown: choose showcase-a
  • Module Assignment tab: assign all relative pages
  • Advanced tab: Module Class Suffix field: noblock

2. Background images

RGB file sized to 2000px X 515px at 72dpi in Photoshop; Saved for Web: Progressive JPG 50% quality; and run through ImageOptim.

FTP upload to server: root/images/HeaderImages – OR – upload them via Joomla Media Management.

3. Custom CSS file

Each background image will be assigned to its respective page via the Page Class tag.

Page Class tag: Since the name of the Menu Item is Awards Event – and the alias of the page is awards-event – we add the awards-event class to the body tag in the CSS file as follows: body.awards-event.

Image path: include the URL path to the background image.

And we end up with:

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

The custom CSS file (rt_ximenia_responsive-custom.css) is then FTP uploaded to: /root/templates/rt_ximenia_responsive/css/rt_ximenia_responsive-custom.css

4. Menu Item:

  • Menu Title: Awards Event
  • Alias: awards-event
  • Details tab: Template Style drop-down: Ximenia – Default
  • Page Display tab: Page Class field: awards-event

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *