Replacing article titles with a background image

Everything to do with Joomla! 1.5 templates and templating.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Locked
JoseChung
Joomla! Apprentice
Joomla! Apprentice
Posts: 13
Joined: Sun May 20, 2007 5:46 am

Replacing article titles with a background image

Post by JoseChung » Sat May 09, 2009 2:43 am

Hi folks! Not sure if this is the best forum to post this particular question, but I'll give it a whirl.

I'm building a site for a client, and he's going to require that the article headings be replaced by a background image. (Because he wants to use a fancy font.)

I've tried using the "display:none" property to hide the text headings, but this also hides the background image.

Any advice?

If you head over to http://www.beingcharliekaufman.com/meaning-of-life, you'll see the "Welcome" heading, with "what is the meaning of life?" overlapping it. We'd like to hide "what is the meaning of life?" (the article title) and keep "Welcome."

Cheers!

User avatar
tastrax
Joomla! Ace
Joomla! Ace
Posts: 1874
Joined: Tue Sep 20, 2005 12:36 pm
Location: Tasmania

Re: Replacing article titles with a background image

Post by tastrax » Sat May 09, 2009 3:11 am

How about going to article manager/parameters and turning off "show article title - does that help or does that also turn off the image??
http://declarationoffreedom.com - Declaration of freedom - you are free..
http://www.kiva.org - Kiva - loans that change lives

Updated to 2.5.3

JoseChung
Joomla! Apprentice
Joomla! Apprentice
Posts: 13
Joined: Sun May 20, 2007 5:46 am

Re: Replacing article titles with a background image

Post by JoseChung » Sat May 09, 2009 3:36 am

tastrax wrote:How about going to article manager/parameters and turning off "show article title - does that help or does that also turn off the image??
Unfortunately, it turns off the image too. :'(

User avatar
tastrax
Joomla! Ace
Joomla! Ace
Posts: 1874
Joined: Tue Sep 20, 2005 12:36 pm
Location: Tasmania

Re: Replacing article titles with a background image

Post by tastrax » Sat May 09, 2009 3:44 am

Damn..... maybe a fullstop as the article title with a font colour set the same as the image background? Bit of a hack though...
http://declarationoffreedom.com - Declaration of freedom - you are free..
http://www.kiva.org - Kiva - loans that change lives

Updated to 2.5.3

JoseChung
Joomla! Apprentice
Joomla! Apprentice
Posts: 13
Joined: Sun May 20, 2007 5:46 am

Re: Replacing article titles with a background image

Post by JoseChung » Sat May 09, 2009 1:25 pm

Yeah, that's the way I think I'll have to go. Or keep the title, blend it with the background, and set the font size to something really tiny.

deanflyer
Joomla! Apprentice
Joomla! Apprentice
Posts: 37
Joined: Mon Apr 06, 2009 10:13 pm
Location: UK
Contact:

Re: Replacing article titles with a background image

Post by deanflyer » Mon Jun 08, 2009 12:57 pm

Why dont you use SIFR? There are a couple of plugins available - Im using JSIFR3, very good it is too.

Im using this for a client and it also means people without Javascript/Flash get to see the site properly, albeit without the fancy font.

With SIFR you also have the advantage that the client can edit the titles via Joomla without having to go into an image editor.

Cheers,

Dean

cf1237
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 161
Joined: Thu Mar 19, 2009 1:48 pm

Re: Replacing article titles with a background image

Post by cf1237 » Tue Jun 09, 2009 8:43 pm

The typical CSS way to do this is pretty simple, but you would have to be able to access the code for the headings. I haven't had a look at it, but here's the general idea:

1.)Say the heading is an <h2> element. So then the title looks like this in the code:

<h2>This is the Title Heading</h2>

You've figured out that you can turn of the display of this element by setting the CSS property of it to display:none. But that doesn't help with substituting the image for the <h2> element.

2.)You need to change the code to this, so that you can target only the text:

<h2 class="custom"><span>This is the Title Heading</span></h2>

3.)Then, in the CSS, use this:
/* the first step hides the h2 text */
h2 span {
display:none;
}
/*the second step specifies the bg image, which you can also position via CSS*/
h2.custom {
background-image: url (yourimage.gif);
}

Absolutely reliable and uses plain old CSS and HTML. Preserves the meaningful text for good search engine accessibility.

HTH!

pebroy
Joomla! Apprentice
Joomla! Apprentice
Posts: 5
Joined: Tue Dec 08, 2009 8:24 am

Re: Replacing article titles with a background image

Post by pebroy » Tue Dec 08, 2009 8:58 am

folks, is there a good solution to this. I have activated newsflash module and would like to add background on article itself and title. I have spent countless hours trying to get this to work, I have also looked into plugins or modules without success. Essentially what I need is if I have Newsflash for title I want its background say dark gray and in body for all news displays I would like to have same dark gray. Please help!

cf1237
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 161
Joined: Thu Mar 19, 2009 1:48 pm

Re: Replacing article titles with a background image

Post by cf1237 » Tue Dec 08, 2009 3:39 pm

The key is just to enclose whatever you want to style within an HTML element.

For instance, if your article is set up like this within a set of <div> tags:

<div id="news"><h1>Headline here</h1>Text of article here</div>

Then just use CSS to do something like this:

div#news, div#news h1 {
background-color: #666666;
}

This sets both the background color of the <div> and <h1> elements to dark grey.
There are many other similar ways to accomplish the same thing, but the general idea is the same.

If you want, post a piece of the article in question, or a link we can look at.

HTH


Locked

Return to “Templates for Joomla! 1.5”