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?

CommentFileSizeAuthor
#4 omega.jpg110.09 KBsmitty

Comments

TelFiRE’s picture

TelFiRE commented

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?

smitty’s picture

smitty commented

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.

TelFiRE’s picture

TelFiRE commented

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.

smitty’s picture

smitty commented
StatusFileSize
new omega.jpg110.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?

smitty’s picture

smitty commented
Issue summary: View changes

Typo