How to create a corner ribbon with Drupal 7

Estimated reading time of this article: 2 minutes 30 seconds

Do you want promote something? You know the curlypage module, but it is too nervous for your site?

Create your own corner ribbon/banner.

How to do it?

  1. Create a region, "right_corner":
    1. In your theme's info file:
              regions[right_corner] = Right corner
              scripts[] = js/right_corner.js
    2. Add somewhere in your page.tpl.php
              <?php if ($page['right_corner']): ?>
                <div id="right-corner-wrapper">
                  <div id="right-corner">
                    <?php print render($page['right_corner']); ?>
                  </div>
                </div>
              <?php endif; ?>
    Clear your theme cache, e.g. through visting and hitting Ok on the theme's settings dialog.
  2. Set in the CSS the top right position. Add the code in your CSS file:
    /**
    * Right corner for ribbon images
    */
    #right-corner-wrapper {
      position: absolute;
      top: 0;
      right: 0;
    }

    #right-corner-wrapper .content {
      margin-top: 0;
    }

    /**
    * Move contextual links down since the menu bar is using the top of the page.
    */
    #right-corner-wrapper div.contextual-links-wrapper {
      margin-top: 67px;
    }

    #right-corner {
      overflow: hidden;
      z-index: 1;
    }

    /**
    * Fade-In/Slide-In effect for images. Don't show the pics on site load. Wait for JQuery.
    */
    img.fade-in,
    img.slide-in {
      display: none;
    }
  3. Add some magic with JQuery: show something different on hovering over the corner. You can add this code in js/right_corner.js or another Javascript file.
    (function ($) {
      Drupal.behaviors.imgchangeonhover = {
        attach: function (context, settings) {

          /*
          * Exchanges an image with another having a _hover suffix in img.change-on-hover
          * images while hovering.
          * Reference: http://stackoverflow.com/questions/540349/change-the-image-source-using-jquery
          */
          $('img.change-on-hover').each(function() {
            var t = $(this);
            var src = t.attr('src'); // initial src
            var baseName = src.substring(0, src.lastIndexOf('.')); // let's get file name without extension
            t.hover(function() {
                $(this).attr('src', baseName + '_hover.' + /[^.]+$/.exec(src)); //last part is for extension
            }, function() {
                $(this).attr('src', baseName + '.' + /[^.]+$/.exec(src)); //removing '-over' from the name
            });
          });

          /* Fade-in effect for images. */
          $('img.fade-in').each(function() {
            $(this).fadeIn(800);  // ms
          });

          /* Slide-in effect for images. */
          $('img.slide-in').each(function() {
            $(this).slideDown(800);  // ms
          });

        }
      };
    })(jQuery);
    If you add the class 'change-on-hover' to your image, then on hovering, your image foo.png will be exchanged by an image foo_name.png. Optionally, you can attach also other effects.
  4. Create a Drupal block and assign it to your region. Put your stuff in it. If it's not an image style="display:block" might be necessary. An example.
    <p><a href="http://www.unbestechlich.ch" title="Transparenzinitiative unterschreiben"><img alt="Transparenzinitiative unterschreiben" class="change-on-hover" src="/sites/scito.ch/files/images/transparenzinitiative.png" style="width: 267px; height: 189px;" title="Transparenzinitiative unterschreiben"></a></p>
  5. If the region should not be printed, then it can be excluded from the print. Add the following code into your CSS file:
    @media print {
      #right-corner-wrapper {
        display: none!important;
      }
    }
    or if you've defined a print specific CSS file in your .info file,
    stylesheets[print][] = YOUR_THEME-print.css
    then you can simply add tot this print CSS file:
    #right-corner-wrapper {
      display: none!important;
    }

And ready is your ribbon at the top right position.

If there are spaces shown, there might be CSS classes having margins or paddings. Inspect your site with Firebug and disabled them in your CSS file. This was necessary for the Bartik theme, therefore the above CSS contains the following lines:

#right-corner-wrapper .content {
  margin-top: 0;
}

The image shows an example.