How to make module title show a graphic or image?

General questions relating to Joomla! 2.5. Note: All 1.6 and 1.7 releases have reached end of life and should be updated to 2.5. There are other boards for more specific help on Joomla! features and extensions.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting.
Forum Post Assistant - If you are serious about wanting help, you should use this tool to help you post.
Locked
igolfniray
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 188
Joined: Tue May 10, 2011 3:30 pm
Location: Belfast, Northern Ireland
Contact:

How to make module title show a graphic or image?

Post by igolfniray » Thu Mar 01, 2012 12:13 pm

I want to replace some of my module titles with a simple graphic rather than the normal text title.

What way would you recommend I achieve this?

Ray

User avatar
shakur1911
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 104
Joined: Tue May 06, 2008 12:28 pm

Re: How to make module title show a graphic or image?

Post by shakur1911 » Thu Mar 01, 2012 1:57 pm

I recommend hiding the title and adding the image inside the module contents

igolfniray
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 188
Joined: Tue May 10, 2011 3:30 pm
Location: Belfast, Northern Ireland
Contact:

Re: How to make module title show a graphic or image?

Post by igolfniray » Thu Mar 01, 2012 9:15 pm

I tried that but It didn't give me enough control over the module in terms of class-suffix etc.

I got it working by adding a new module class suffix with a background image called in with the CSS:

in my templates "modules.php" file (every template has one! I'm using a YooTheme.) I added code like this:

Code: Select all

case 'imagetitle':
		$title_template = '<h3 class="image-title">%s</h3>';
		break;
Then I added this to my "modules.css":

Code: Select all

.image-title {
	background-image:url(../../../images/image.png);
	margin-bottom:5px;
	margin-right: 20px;
	line-height:53px;
	background-position:center; 
	background-repeat:no-repeat;
	font-size:0px;}
Then I have to make sure I enter (in a Yootheme at least) "style-imagetitle" to the Module Class Suffix, AND make sure my title is set to "Show".

That's how I achieved it but I imagine in other Templates, the files will be slightly different.

But the strategy will be the same:

Create a new Module Class Suffix.
Call your image in CSS.
Make the font size zero.

User avatar
shakur1911
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 104
Joined: Tue May 06, 2008 12:28 pm

Re: How to make module title show a graphic or image?

Post by shakur1911 » Thu Mar 01, 2012 9:37 pm

Nice one, thank you for sharing your solution


Locked

Return to “General Questions/New to Joomla! 2.5”