How to integrate a skyscraper? [#1608788]

Some websites are financed by ads. And so there is a project where I have to integrate a syksraper banner beginning in the top right corner of the layout. it must have a fixed width, should be in the viewport even when the browser is shrunken an should disappear latest on the mobile display (to be replaced by another ad).

Since I am new to the responsive design I want to ask the experts: What is pest practice for doing this using the Omega theme?

Comment	File	Size	Author
#4	omega.jpg	110.09 KB	smitty

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

TelFiRE CreditAttribution: TelFiRE commented 25 June 2012 at 20:52

There's nothing unique to Omega about this. It's just basic CSS unless I'm misunderstanding you. What problem(s) are you running into?

Comment #2

smitty CreditAttribution: smitty commented 26 June 2012 at 17:35

Well, the first problem is, that it seems not to be possible to have a column with a fixed width in pixels. In Omega it is only possible to configure a width in "number of columns".

The second problem is: How can I get a region for the ad? It should be beside the header section.

Comment #3

TelFiRE CreditAttribution: TelFiRE commented 27 June 2012 at 22:23

Fixed width is a matter of saying width:140px on the element. Omega doesn't have anything that stops you from writing CSS. CSS overrides the settings of Omega, and besides, for this you most likely just want to make a block and then render it programatically in the theme (see http://drupal.org/node/1021902) using a TPL file such as page.tpl.php (copy it out of alpha to your subtheme's templates folder).

Realistically you don't even need to do that though, you could just put it in a region and make sure that none of the parents are position:relative and then you can position:absolute it to the top right of the page and z-index it below the page's container.

Comment #4

smitty CreditAttribution: smitty commented 30 June 2012 at 06:55

File	Size
omega.jpg	110.09 KB

Thank you very much for your support!

Here is what I did: I Created a page.tpl.php in my subtheme:

<div<?php print $attributes; ?>>
  <div class="page-content">
    <?php if (isset($page['header'])) : ?>
      <?php print render($page['header']); ?>
    <?php endif; ?>
  
    <?php if (isset($page['content'])) : ?>
      <?php print render($page['content']); ?>
    <?php endif; ?>  
  
    <?php if (isset($page['footer'])) : ?>
      <?php print render($page['footer']); ?>
    <?php endif; ?>
  </div>  

  <div class="vertical-ad" style="width:140px;position:absolute;top:40px;right:0;">
    <img title="skyscraper" alt="skyscraper" src="http://myserver/files/ads/skyscraper.jpg">
  </div>
</div>

Now the skyscraper is displayed in the upper right corner of the browser.

But I want it to be displayed top right inside the omega-grid .

What do I have to change?

How can I change the grid to containing two columns: the first one with the regular omega Content (header, content, footer) and the second one with my skyscraper?