Scrolling image in masthead has disappeared

patvandenbosche

On my website on all pages other than the homepage, I had an image of the county courthouse that would scroll like the demo did for all the Joomla pages in that site. It is supposed to be in Masthead module position. This has now just disappeared on my site, and I need to get it back. The entire image is gone from display.

I have the position in the template, and I added the image as the background image, and it shows in the template settings display, but not in the actual template. I'm adding a screenshot here so you may be able to better understand what I'm talking about.

Please let me know what I've done wrong here. I've updated the template and T4 plugin but I don't know if that had an effect or not.

Thanks,
Pat

and this is what the template layout settings look like now:

Ninja

patvandenbosche
Hi
I checked your site and the Masthead section in layout has different overlay Image.
Not the same as in your last screenshot under Overlay tab.
To display the Masthead image and title open the Menu item > Page display options > Show Page heading : Yes
Now add the Page Heading example : Contact us
save it and check. In Menu item option you will see more options to add background image behind the page heading and color setting as well.

Regards

patvandenbosche

My menu item I'm working with is Elected Officials > Mayor John Carroll:
https://gov.perrycountytn.com/mayor-john-carroll

I've got the overlay image to work now, but discovered in the menu item, not only must I have Show Page Heading set to yes, I must enter at least spaces in the Page Heading field for the image even to appear.

For this example I set the text to "Mayor John Carroll". Then the background image set in the template settings appears as I want it, using the image I set in the template settings for Masthead.

But can't figure out how to get the title text color to appear as #ffffff. It looks like a dark green. If I use the color setting in the menu item, it colors the background of an entire paragraph. I just want to change the text to white so it's readable. I even tried setting up a new palette and selecting it for the module position. But no luck.

So, how do I make this happen? I also need to make the font a bit heavier, just for the purpose of this module position. Is there a way to make this work or will it need custom css?

Thanks,
Pat

Ninja

patvandenbosche
Hi
Add this code in custom css for color and font size

.t4-masthead-title { color:#fff; font-size:26px;}

patvandenbosche

Thank you! That was exactly what I wanted. Just one quick question. What if I wanted a thicker font, perhaps a Google font. Is there an easy way to use a Google font through CSS for this module? If it's not just a quick fix, then I'll let it go.

Thanks,
Pat

Ninja

patvandenbosche
Hi
If a font is present on your site you can use it, add font family in the same code
example : .t4-masthead-title { color: #fff; font-size: 48px; font-family: cursive; }