By bstrange on

I am trying to get a graphic to display across the top of a content block but NOT on the content blocks on the front page. I found the following (using google as a site search turned up nothing on the subject)

"Using a text editor like notepad.exe, kate, TextWrangler or an equivalent, copy and paste the snippet into your page.tpl.php or your custom page-type.tpl.php file.
Remove the exclamation point (!) to show on the front page and use it to show everywhere except the front page.
Change the div class names or the link prefix text to suit.
The following example snippet will insert an image called blocks-top.jpg on all pages EXCEPT the front page.

<?php if (!$is_front): ?>
  <div id="snapshot">
    <img src="http://www.example.com/images/blocks-top.jpg" /><br />
  </div>
<?php endif; ?>

"

So I tried to implement that instruction by adding the folowing to page.tpl.php

<?php if (!$is_front): ?>
	<div id="snapshot">
    <img src="http://www.theweeneehut.com/images/img11.gif" /><br />
  </div>
<?php endif; ?>

and got nothing (frontpage or content)

So I tried adding the repeat to the end as it is a 1px gradient so the code looked like:

<?php if (!$is_front): ?>
	<div id="snapshot">
    <img src="http://www.theweeneehut.com/images/img11.gif" repeat-x/><br />
  </div>
<?php endif; ?>

but as I suspected, that did nothing

Then I created a class in style.css to govern the image I want on the content page:

.imgset
float: top;
background:transparent url(images/img11.gif) repeat-x;
}

and changed page.tpl.php to 

<?php if (!$is_front): ?>
	<div id="snapshot">
    <img class='imgset' src="http://www.theweeneehut.com/images/img11.gif" /><br />
  </div>
<?php endif; ?>

and still nothing happens, no image on any pages.

The only way I seem to be able to get a gradient on the content pages is to put in the following line in style.css:

.node .content {
background:transparent url(images/img11.gif) repeat-x;
}

but then every node on the front page loads that gradient and it looks like crap...

ANY help would be greatly appreciated...

Comments

bstrange’s picture

bstrange commented

btw, the site is http://www.theweeneehut.com in case anyone needs to inspect w/firebug or whatever :)

jwatte’s picture

jwatte commented

There is no "repeat-x" HTML attribute for the IMG element.

Changing the CSS for the element will not change the size of it. I'm assuming the problem here is that your single-pixel image isn't stretching across the page.

Try with an image that's 500 pixels wide and 100 pixels tall, just to see whether you can get it to show. If you can, then what you want to do is to set the width of the element to 100%, so that it stretches across the page. Else the size of the image will only be 1 pixel, and changing the CSS of the image won't make it wider.

jwatte’s picture

jwatte commented

Two more things:

View Source shows that the image reference is showing up, although the reference seems to be at the bottom, not the top.

I got hungry from viewing your site. Curse you!

bstrange’s picture

bstrange commented

Thanks very much for the reply :)

I actually found the image on my page it is in the bottom left hand corner. There is a textured bar that holds bottom site nav, then going up there is a medium grey bar then there is a 1" tall (apx) dark grey bar that if you look very closely along the left hand edge, has my gradient.

The question now is how do I get it to display across the top of the content page and how do I make it stretch.

Sorry I made you hungry, if you are ever in Sandusky OH, you can have a couple on the house (just let me know in advance) :)

Thanks again for the help.

I am going to play around with the placement of the code in page.tpl.php

bstrange’s picture

bstrange commented

Update: moving the line of code within page.tpl.php governs where the graphic is displayed. Unfortunately, I can make it appear either above the title of the content page or below the bottom graphic on the content page, but if I put it in the middle of the page code (where I think) it should be to get it where I want it, then the page does not load and I get an end if syntax error.

I am going to keep playing with it.

BTW, attempts to make it span the entire width have been unsuccessful

bstrange’s picture

bstrange commented

OK I cheated and just added to the final node. content line hehe not textbook but end result is ok

.node-page .content, .node-page .meta, .node-page .links {
  padding-left: 0;
  padding-right: 0;
  background:transparent url(images/img11.gif) repeat-x;
  font-size: 1em;
}

one of these days I'll learn how to do em correctly, but till then I guess I'll just keep bastardizing the code hehe

Thanks again for the help