home | career | drupal | java | mac | mysql | perl | php | scala | uml | unix

Drupal example source code file (toolbar.css)

This example Drupal source code file (toolbar.css) is included in the DevDaily.com "Drupal Source Code Warehouse" project. The intent of this project is to help you "Learn Drupal by Example".

PHP - Drupal tags/keywords

000, 10px, 20px, 25px, 3px, background, background-position, float, left, margin, none, padding, position, right

The toolbar.css Drupal example source code

/* $Id: toolbar.css,v 1.27 2011/01/03 07:04:48 webchick Exp $ */

body.toolbar {
  padding-top: 2.2em;
}

body.toolbar-drawer {
  padding-top: 5.3em;
}

/**
 * Aggressive resets so we can achieve a consistent look in hostile CSS
 * environments.
 */
#toolbar,
#toolbar * {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  line-height: inherit;
  text-align: left;
  list-style: none;
}

/**
 * Base styles.
 *
 * We use a keyword for the toolbar font size to make it display consistently
 * across different themes, while still allowing browsers to resize the text.
 */
#toolbar {
  font: normal small "Lucida Grande", Verdana, sans-serif;
  background: #666;
  color: #ccc;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 -20px;
  padding: 0 20px;
  z-index: 600;
  -moz-box-shadow: 0 3px 20px #000;
  -webkit-box-shadow: 0 3px 20px #000;
  box-shadow: 0 3px 20px #000;
  filter: progid:DXImageTransform.Microsoft.Shadow(color=#000000, direction='180', strength='10');
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#000000, direction='180', strength='10')";
}

#toolbar div.collapsed {
  display: none;
  visibility: hidden;
}

#toolbar a {
  color: #fff;
  font-size: .846em;
  text-decoration: none;
}

#toolbar ul li,
#toolbar ul li a {
  float: left;
}

/**
 * Administration menu.
 */
#toolbar div.toolbar-menu {
  background: #000;
  line-height: 20px;
  padding: 5px 50px 5px 10px;
  position: relative;
}

#toolbar-home a span {
  vertical-align: text-bottom;
  width: 11px;
  height: 14px;
  display: block;
  background: url(toolbar.png) no-repeat 0 -45px;
  text-indent: -9999px;
  margin: 3px 0px;
}

#toolbar-user {
  float: right;
}

#toolbar-menu {
  float: left;
}

#toolbar div.toolbar-menu a.toggle {
  position: absolute;
  right: 10px;
  bottom: 0;
  cursor: pointer;
  background: url(toolbar.png) 0 -20px no-repeat;
  text-indent: -9999px;
  overflow: hidden;
  width: 25px;
  height: 25px;
}
#toolbar div.toolbar-menu a.toggle:focus,
#toolbar div.toolbar-menu a.toggle:hover {
background-position:  -50px -20px;
}

#toolbar div.toolbar-menu a.toggle-active {
  background-position:  -25px -20px;
}
#toolbar div.toolbar-menu a.toggle-active.toggle:focus,
#toolbar div.toolbar-menu a.toggle-active.toggle:hover {
background-position:  -75px -20px;
}

#toolbar div.toolbar-menu ul li a {
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  padding: 0 10px;
}

#toolbar div.toolbar-menu ul li a:focus,
#toolbar div.toolbar-menu ul li a:hover,
#toolbar div.toolbar-menu ul li a:active,
#toolbar div.toolbar-menu ul li a.active:focus {
  background: #444;
}

#toolbar div.toolbar-menu ul li a.active:hover,
#toolbar div.toolbar-menu ul li a.active:active,
#toolbar div.toolbar-menu ul li a.active,
#toolbar div.toolbar-menu ul li.active-trail a {
  text-shadow: #333 0 1px 0;
  background: url(toolbar.png) 0 0 repeat-x;
}

/**
 * Collapsed drawer of additional toolbar content.
 */
#toolbar div.toolbar-drawer {
  position: relative;
  padding: 0 10px;
}

/**
 * IE 6 Fix.
 *
 * IE 6 shows elements with position:fixed as position:static so we replace
 * it with position:absolute; toolbar needs its z-index to stay above overlay.
 */
* html #toolbar {
  position: absolute;
  margin: 0;
  padding-right: 0;
  left: -20px;
  right: 0;
  width: 100%;
}

Other Drupal examples (source code examples)

Here is a short list of links related to this Drupal toolbar.css source code file:

new blog posts

"Drupal" is a registered trademark of Dries Buytaert.

my drupal tutorials and examples  

Copyright 1998-2016 Alvin Alexander, alvinalexander.com
All Rights Reserved.

Beginning in 2016, a portion of the proceeds from pages under the '/drupal-code-examples/' URI will be donated to charity.