Using graphics for page titles

[Ulysses]

I want to use GIFs instead of text in the page Titles. How can I do this?

I have seen a nice module that transforms text input into a GIF, but I want to use styled titles, like the ones below instead of text.

http://susse.com.au/_siteres/images/head_01.gif
http://susse.com.au/_siteres/images/head_04.gif
etc...

Any thoughts?

Thanks

[Nullig]

Check out sIFR...

http://www.mikeindustries.com/sifr/

I think it will do what you want.

Nullig

[climberusa]

sIFR is definitely the way to go. Very customizeable and the best solution (i think) for using the exact typeface you want.

[Ulysses]

Thanks guys, interesting reading, but as you can see, we alread have the GIFs all set to go.

Anyway, our layout is too complex for sIFR to handle, and may include small illustrations down the track.

[climberusa]

so you want to you use one fo the various forms of image replacement.

try this

Code: Select all

<h2 id="yourid">Page title</h2>

styles:

Code: Select all

#yourid {
text-indent: -9999px;
height: 30px; /* height of gif image */
width: 500px; /* width of your image */
background: url(images/yourimage.gif) no-repeat;
}

This is pretty basic and there may be a few caveats but doing a quick google search will yield a lot of information on image replacement.

Good luck

[Ulysses]

Hi climberusa,

Yes I think you're on the right track. We need to replace

Code: Select all

<h2 id="yourid">Page title</h2>

with something, then add  the link to the GIF for each page in the Title field * because obviously each page has a diffrent title.

[Dr.CSS]

How bout...

  if you really need the h2...
the {title} will give you a '.title of page' class to work with in the CSS so for Blog it might be...
.Blog {width:??; height:??; background: url(uloads/images/head 01.gif)}

But you can also use a div class="{title}" ...

  this is so you don't get the 'empty h2 validation error'

[Ulysses]

Thanks Mark. That's useful.

So in the Title field of each page we would add a link to the graphic title such as

Code: Select all

<img src="http://susse.com.au/_siteres/images/head_01.gif" width="550" height="60" border="0" />

or

Code: Select all

http://susse.com.au/_siteres/images/head_01.gif

Is that right?

[cyberman]

You can use Truetype module for this too  ...

[calguy1000]

I think what mark and others meant is that you would use the background attribute in css to specify a background image for each page, but it would be done in your stylesheet.

I wouldn't use {title} though, I'd use $page_alias

i.e: 

Code: Select all

<h2 class="{$page_alias}"> </h2>

and then, lets say your page alias  was 'home'
you would then have (in one of your stylesheets, though I'd probably attach a separate stylesheet for this just for organizational purposes).

Code: Select all

.home {
  text-indent: -9999px;
  height: 30px; /* height of gif image */
  width: 500px; /* width of your image */
  background: url(images/yourimage.gif) no-repeat
}

[climberusa]

Here 's a solution I came up with last year for this very thing.

1. Create a seperate stylesheet (outside of cms) and call it headings.php
    a. place this code into:

Code: Select all

<?php
header('Content-type: text/css');
?>
h1 {
	text-indent: -9999px;
	height: 40px; /* height of image */
    width: 400px; /* width of image */
	background: url(/location/of/your/headings/h1_<?php echo $page ?>.gif) no-repeat; /*I named all the gif's like h1_page_alias */
}

    b. upload the headings.php file to your server. I created a css directory.

2. Create a user defined tag called h1_css (or whatever you want) and input this:

Code: Select all

$p = $_GET['page'];
echo "<link rel=\"stylesheet\" href=\"/css/headings.php?page=$p\" type=\"text/css\" />";

3. Create all of your gifs and make sure they correlate to your page alias' and place them into your desired folder.

4. Add a call to your user defined tag in you template:

Code: Select all

{h1_css}

5. Take the rest of the day off. (or come back here if it doesn't work:)

Here is the site that's using this:

www.greenacresusa.com


Jeff

[Ulysses]

climberusa you are a legend.

This worked like a dream. Fantastic. Thanks

Now. If only someone can make this CMS truly multilingual, and untangle Title, Heading and meta data for SEO, this will be the best CMS by far.

Cheers

[climberusa]

Don't I have to die first to be a legend?

[Ulysses]

Don't I have to die first to be a legend?

No, you can be a live legend. It's an Aussie thing. Not that I'm an Australian, I just live down here. You can of course also be a legend in your own mind, but that's not what I meant. 

[Dr.CSS]

You can of course also be a legend in your own mind, but that's not what I meant. 

That would be me...      ROFLMAO....