CMS Made Simple Forums

Posted: **Fri Jun 22, 2007 11:34 pm**

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

Posted: **Sat Jun 23, 2007 12:29 am**

Check out sIFR...

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

I think it will do what you want.

Nullig

Posted: **Sat Jun 23, 2007 12:47 am**

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

Posted: **Sat Jun 23, 2007 12:57 am**

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.

Posted: **Sat Jun 23, 2007 1:10 am**

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

Posted: **Sat Jun 23, 2007 2:07 am**

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.

Posted: **Sat Jun 23, 2007 4:37 am**

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'

Posted: **Sat Jun 23, 2007 4:45 am**

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?

Posted: **Sat Jun 23, 2007 6:32 am**

You can use Truetype module for this too

...

Posted: **Sat Jun 23, 2007 3:17 pm**

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
}

Posted: **Sat Jun 23, 2007 4:41 pm**

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

Posted: **Thu Jun 28, 2007 8:53 pm**

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

Posted: **Thu Jun 28, 2007 9:13 pm**

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

Posted: **Fri Jun 29, 2007 1:20 am**

climberusa wrote: 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.

Posted: **Fri Jun 29, 2007 4:14 am**

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

That would be me...

ROFLMAO....

CMS Made Simple Forums

Using graphics for page titles

Using graphics for page titles

Re: Using graphics for page titles

Re: Using graphics for page titles

Re: Using graphics for page titles

Re: Using graphics for page titles

Re: Using graphics for page titles

Re: Using graphics for page titles

Re: Using graphics for page titles

Re: Using graphics for page titles

Re: Using graphics for page titles

Re: Using graphics for page titles

Re: Using graphics for page titles

Re: Using graphics for page titles

Re: Using graphics for page titles

Re: Using graphics for page titles