Page 1 of 1

How to make module title show a graphic or image?

Posted: Thu Mar 01, 2012 12:13 pm
by igolfniray
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

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

Posted: Thu Mar 01, 2012 1:57 pm
by shakur1911
I recommend hiding the title and adding the image inside the module contents

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

Posted: Thu Mar 01, 2012 9:15 pm
by igolfniray
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.

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

Posted: Thu Mar 01, 2012 9:37 pm
by shakur1911
Nice one, thank you for sharing your solution