By Felix2k on

Hi!

I use a modified Spreadfirefox theme. So I have right of my site much blank space. Now I want put there a banner or an image.
I think that I can do that with a div tag. But I don't know what exactly must i write in the style.css file. And in which .php file of my theme must i put that div tag?
Hope you can help me.
My site can you visit unter http://www.fill.de.vu

felix

⋅ Categories: Drupal 4.6.x

Comments

gateone’s picture

gateone commented

Hi,

basically what you try to achieve is rather easy. Now, Spreadfirefox is based on the PHPTemplate engine, so I suppose you are using this. However, this works with other template engines more or less the same way.

Okay, I am not completely into the Spreadfirefox theme so I am going to explain a more general approach to what you try to do. This then could also be applied to other themes as well.

Using PHPTemplate, the main page layout is defined in the page.tpl.php file. You might want to check with the PHPTemplate Section in the Handbook on this site.

So first, you will want to edit this file. The most general approach is to put everything on your site (so all that is inside the body-Tag into a wrapping DIV (this could already be the case since it looks like you have already modified the Spreadfirefox layout to have a fixed width). You can do this by the following code:

<body ...some more code here...>
<div id=wrapper>everything within the <body>-Tag comes here
</div></body>

So this wraps up your site. Next, you need to introduce a new DIV that will hold your Google Ads. You can do that after the closing tag of the wrapper-DIV, right before the closing body-Tag:

<body ...some more code here...>
<div id=wrapper>everything within the <body>-Tag comes here
</div>
<div id=ads">
Your Google-Ads come here...
</div></body>

That is it with the page.tpl.php - now you can move on the the CSS-file. You need to add floats to the new DIVs to make the Google Ad float right from the main content:

#wrapper {
      float: left;
      }
#ads {
      float: left;
      margin-left: 10px;
      border: 1px solid black;
      }

As all is now floating left, the ads-DIV will sit next to the main wrapper holding all the content. I have added a margin-left of 10px to make the ad-block sit away 10 px from the main block and also added a 1px black border around the box. You might leave the border away as I guess, that the Google Ads block gets a border from Google already... Just play around with the ads-DIV until it suits your taste

There are certainly more ways to achieve the same, but I guess, this is the most easy way to start out and explore more options.

Greetings from Munich,
Steve

P.S.: Just found this site, this might be a little heavy, but it really contains nearly all hands-on tricks and techniques CSS offers to build a typical modern web site.