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.
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”