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

Drupal example source code file (style.css)

This example Drupal source code file (style.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

10px, 1px, 20px, background, background-color, border, color, font-size, li, margin, none, padding, solid

The style.css Drupal example source code

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

/**
 * Generic elements.
 */
body {
  color: #000;
  background: #fff;
  font: normal 81.3%/1.538em "Lucida Grande", "Lucida Sans Unicode", sans-serif;
}
a {
  color: #0074BD;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
hr {
  margin: 0;
  padding: 0;
  border: none;
  height: 1px;
  background: #CCCCCC;
}
legend {
  font-weight: bold;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: bold;
  margin: 10px 0;
}
h1 {
  font-size: 1.538em;
}
h2 {
  font-size: 1.385em;
}
h3 {
  font-size: 1.231em;
}
h4 {
  font-size: 1.154em;
}
h5,
h6 {
  font-size: 1.077em;
}
p {
  margin: 1em 0;
}
dl {
  margin: 0 0 20px;
}
dl dd,
dl dl {
  margin-left: 20px;
  margin-bottom: 10px;
}
blockquote {
  margin: 1em 40px;
}
address {
  font-style: italic;
}
u,
ins {
  text-decoration: underline;
}
s,
strike,
del {
  text-decoration: line-through;
}
big {
  font-size: larger;
}
small {
  font-size: smaller;
}
sub {
  vertical-align: sub;
  font-size: smaller;
  line-height: normal;
}
sup {
  vertical-align: super;
  font-size: smaller;
  line-height: normal;
}
nobr {
  white-space: nowrap;
}
abbr,
acronym {
  border-bottom: dotted 1px;
}
ul,
.block ul,
.item-list ul,
.item-list ul {
  list-style-type: disc;
  list-style-image: none;
  margin: 0.25em 0 0.25em 1.5em; /* LTR */
}
.item-list ul li,
li.leaf,
ul.menu li {
  list-style-type: disc;
  list-style-image: none;
}
ul.menu li {
  margin: 0;
}
ol {
  list-style-type: decimal;
  margin: 0.25em 0 0.25em 2em;
}
.item-list ul li.collapsed,
ul.menu li.collapsed {
  list-style-image:url(../../misc/menu-collapsed.png);
  list-style-type:disc;
}
.item-list ul li.expanded,
ul.menu li.expanded {
  list-style-image:url(../../misc/menu-expanded.png);
  list-style-type:circle;
}
quote,
code {
  margin: .5em 0;
}
code,
pre,
kbd {
  font-size: 1.231em;
}
pre {
  margin: 0.5em 0;
  white-space: pre-wrap;
}

/**
 * Skip link.
 */
#skip-link {
  margin-top: 0;
  position: absolute;
  left: 50%;
  margin-left: -5.25em;
  width: auto;
  z-index: 50;
}
#skip-link a,
#skip-link a:link,
#skip-link a:visited {
  display: block;
  background: #444;
  color: #fff;
  font-size: 0.94em;
  padding: 1px 10px 2px 10px;
  text-decoration: none;
  -moz-border-radius: 0 0 10px 10px;
  -webkit-border-top-left-radius: 0;
  -webkit-border-top-right-radius: 0;
  -webkit-border-bottom-left-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;
  border-radius: 0 0 10px 10px;
}
#skip-link a:hover,
#skip-link a:focus,
#skip-link a:active {
  outline: 0;
}

/**
 * Branding.
 */
#branding {
  overflow: hidden;
  padding: 20px 20px 0 20px;
  position: relative;
  background-color: #e0e0d8;
}
#branding div.breadcrumb {
  font-size: 0.846em;
  padding-bottom: 5px;
}
#branding div.block {
  position: relative;
  float: right;
  width: 240px;
  padding-left: 10px;
  background: #333;
}
#branding div.block form label {
  display: none;
}
#branding div.block form div.form-item {
  float: left;
  border: 0;
  margin: 0;
  padding: 0;
}
#branding div.block form input.form-text {
  width: 140px;
  margin-right: 10px;
}
#branding div.block form input.form-submit {
  text-align: center;
  width: 80px;
}

/**
 * Help.
 */
#help {
  font-size: 0.923em;
  margin-top: 1em;
}
#help p {
  margin: 0 0 10px;
}
#help div.more-help-link {
  text-align: right;
}

/**
 * Page title.
 */
#page-title {
  background: #333;
  padding-top: 20px;
}
#branding h1.page-title {
  color: #000;
  margin: 0;
  padding-bottom: 10px;
  font-size: 1.385em;
  font-weight: normal;
  float: left;
}

/**
 * Console.
 */
#console {
  margin: 9px 0 10px;
}

/**
 * Tabs.
 */
ul.primary {
  float: right;
  border-bottom: none;
  padding: 0.769em 0 5px 8px;
  text-transform: uppercase;
  font-size: 0.923em;
}
ul.primary li {
  display: inline;
  list-style: none;
}
ul.primary li a,
ul.primary li a.active,
ul.primary li a:active,
ul.primary li a:visited,
ul.primary li a:hover,
ul.primary li.active a {
  background-color: #a6a7a2;
  color: #000;
  font-weight: bold;
  padding: 6px 20px;
  border-width: 1px 1px 0 1px;
  border-style: solid;
  border-color: #a6a7a2;
  -moz-border-radius: 8px 8px 0 0;
  -webkit-border-top-left-radius: 8px;
  -webkit-border-top-right-radius: 8px;
  border-radius: 8px 8px 0 0;
}
ul.primary li.active a,
ul.primary li.active a.active,
ul.primary li.active a:active,
ul.primary li.active a:visited {
  background-color: #fff;
  border-color: #c9cac4;
}
ul.primary li a:hover {
  color: #fff;
}
ul.primary li.active a:hover {
  color: #000;
}
ul.secondary {
  float: none;
  clear: both;
  font-size: 0.923em;
  text-align: right;
  padding: 4px 10px 10px;
  line-height: 1.385em;
  overflow: hidden;
  background-color: #fff;
}
ul.secondary li {
  padding-left: 10px;
}
ul.secondary li a {
  background-color: #ddd;
  color: #000;
}
ul.secondary li a,
ul.secondary li a:hover,
ul.secondary li.active a,
ul.secondary li.active a.active {
  padding: 2px 10px;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  border-radius: 7px;
}
ul.secondary li a:hover,
ul.secondary li.active a,
ul.secondary li.active a.active {
  color: #fff;
  background: #666;
}

/**
 * Page layout.
 */
#page {
  padding: 20px 0 40px 0;
  margin-right: 40px;
  margin-left: 40px;
  background: #fff;
  position: relative;
  color: #333;
}
#secondary-links ul.links li {
  padding: 0 10px 10px 0;
}
#secondary-links ul.links li a {
  font-size: 0.923em;
  background: #777;
  color: #fff;
  text-align: center;
  padding: 5px;
  height: 55px;
  width: 80px;
  overflow: hidden;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
#secondary-links ul.links li a:hover {
  background: #999;
}
ul.links li,
ul.inline li {
  padding-right: 1em;
}
ul.inline li {
  display: inline;
}
#secondary-links ul.links li.active-trail a,
#secondary-links ul.links li a.active {
  background: #333;
}
ul.admin-list li {
  position: relative;
  padding-left: 30px;
  padding-top: 9px;
  border-top: 1px solid #ccc;
  margin-left: 0;
  margin-bottom: 10px;
  background: url(images/list-item.png) no-repeat 0 11px;
  list-style-type: none;
  list-style-image: none;
}
.admin-panel .item-list ul,
ul.admin-list {
  margin: 0;
  padding: 0;
}
.admin-panel .item-list ul,
ul.admin-list.compact {
  margin: 8px 0;
}
.admin-panel .item-list li,
ul.admin-list.compact li {
  border: none;
  background: none;
  margin: 0 0 0.75em;
  line-height: 1;
  padding: 0;
}
ul.admin-list li:last-child {
  border-bottom: none;
}
ul.admin-list li a {
  margin-left: -30px;
  padding: 0px 0 4px 30px;
  min-height: 0;
}
ul.admin-list.compact li a {
  margin-left: 0;
  padding: 0;
}
ul.admin-list li div.description a {
  margin-left: 0px;
  padding: 0px;
  min-height: inherit;
}
div.submitted {
  color: #898989;
}

/**
 * Tables.
 */
table {
  width: 100%;
  font-size: 0.923em;
  margin: 0 0 10px;
  border: 1px solid #bebfb9;
}
table td,
table th {
  vertical-align: middle;
  padding: 8px 10px;
  border: 0;
  color: #000;
}
tr.even,
tr.odd {
  border-width: 0 1px 0 1px;
  border-style: solid;
  border-color: #bebfb9;
  background: #f3f4ee;
}
tr.odd {
  background: #fff;
}
tr.drag {
  background: #fe7;
}
tr.drag-previous {
  background: #ffb;
}
table th {
  text-transform: uppercase;
  background: #e1e2dc;
  font-weight: normal;
  border-width: 1px;
  border-style: solid;
  border-color: #bebfb9;
  padding: 3px 10px;
}
table th.active {
  background: #bdbeb9;
}
table th a {
  display: block;
  position: relative;
}
table th.active a {
  padding: 0 25px 0 0; /* LTR */
}
table th.active img {
  position: absolute;
  top: 3px;
  right: 3px;
}
table td.active {
  background: #e9e9dd;
}
table tr.odd td.active {
  background: #f3f4ee;
}
table tr.selected td.active,
table tr.selected td {
  background: #ffc;
  border-color: #eeb;
}
table.system-status-report tr {
  border-bottom: 1px solid #ccc;
}
table.system-status-report tr.ok {
  color: #255b1e;
  background-color: #e5ffe2;
}
table.system-status-report tr.info {
  color: #040f37;
  background-color: #bdf;
}
table.system-status-report tr.warning {
  color: #840;
  background-color: #fffce5;
}
table.system-status-report tr.error {
  color: #8c2e0b;
  background-color: #fef5f1;
}
/**
 * Exception for webkit bug with the right border of the last cell
 * in some tables, since it's webkit only, we can use :last-child
 */
tr td:last-child {
  border-right: 1px solid #BEBFB9;
}


/**
 * Fieldsets.
 *
 * Fieldset legends are displayed like containers in Seven. However, several
 * browsers do not support styling of LEGEND elements. To achieve the desired
 * styling:
 * - All fieldsets use 'position: relative'.
 * - All legend labels are wrapped in a single span.fieldset-legend that uses
 *   'position: absolute', which means that the LEGEND element itself is not
 *   rendered by browsers.
 * - Due to using 'position: absolute', collapsed fieldsets do not have a
 *   height; the fieldset requires a 'padding-top' to make the absolute
 *   positioned .fieldset-legend appear as though it would have a height.
 * - Various browsers are positioning the legend differently if there is a
 *   'padding-left'/'padding-right' applied on a fieldset and inherit the
 *   positioning even to absolute positioned elements within; we therefore have
 *   to apply all padding to the inner .fieldset-wrapper instead.
 */
fieldset {
  border: 1px solid #ccc;
  padding: 2.5em 0 0 0;
  position: relative;
  margin: 1em 0;
}
fieldset .fieldset-legend {
  margin-top: 0.5em;
  padding-left: 15px;
  position: absolute;
  text-transform: uppercase;
}
fieldset .fieldset-wrapper {
  padding: 0 13px 13px 15px;
}
fieldset.collapsed {
  background-color: transparent;
}
html.js fieldset.collapsed {
  border-width: 1px;
  height: auto;
}
fieldset fieldset {
  background-color: #fff;
}
fieldset fieldset fieldset {
  background-color: #f8f8f8;
}

/**
 * Form elements.
 */
.form-item {
  padding: 9px 0;
  margin: 0 0 10px;
}
.filter-wrapper .form-item,
div.teaser-checkbox .form-item,
.form-item .form-item {
  padding: 5px 0;
  margin: 0;
  border: 0;
}
.form-type-checkbox {
  padding: 0;
}
.text-format-wrapper .form-item {
  padding-bottom: 0;
}
.form-item label {
  margin: 0;
  padding: 0;
}
.form-item label.option {
  text-transform: none;
}
.form-item label.option {
  font-size: 0.923em;
}
.form-item label.option input {
  vertical-align: middle;
}
.form-disabled input.form-autocomplete,
.form-disabled input.form-text,
.form-disabled input.form-file,
.form-disabled textarea.form-textarea,
.form-disabled select.form-select {
  background-color: #eee;
  color: #777;
}

/* Filter */
.filter-wrapper {
  border-top: 0;
  padding: 10px 2px;
}
.filter-wrapper .fieldset-wrapper {
  padding: 0 6px;
}
.filter-wrapper .form-item,
.filter-wrapper .filter-guidelines,
.filter-wrapper .filter-help {
  font-size: 0.923em;
  padding: 2px 0 0 0;
}
ul.tips,
div.description,
.form-item div.description {
  margin: 5px 0;
  line-height: 1.231em;
  font-size: 0.923em;
  color: #666;
}
ul.tips li {
  margin: 0.25em 0 0.25em 1.5em;
}
body div.form-type-radio div.description,
body div.form-type-checkbox div.description {
  margin-left: 1.5em;
}
input.form-submit,
a.button {
  cursor: pointer;
  padding: 4px 17px;
  margin-bottom: 1em;
  margin-right: 1em;
  color: #5a5a5a;
  text-align: center;
  font-weight: normal;
  font-size: 1.077em;
  font-family: "Lucida Grande", Verdana, sans-serif;
  border: 1px solid #e4e4e4;
  border-bottom: 1px solid #b4b4b4;
  border-left-color: #D2D2D2;
  border-right-color: #D2D2D2;
  background: url(images/buttons.png) 0 0 repeat-x;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  border-radius: 20px;
}
a.button:link,
a.button:visited,
a.button:hover,
a.button:active {
  text-decoration: none;
  color: #5a5a5a;
}
div.node-form input#edit-submit,
div.node-form input#edit-submit-1 {
  border: 1px solid #8eB7cd;
  border-left-color: #8eB7cd;
  border-right-color: #8eB7cd;
  border-bottom-color: #7691a2;
  background: url(images/buttons.png) 0px -40px repeat-x;
  color: #133B54;
}
input.form-submit:active {
  background: #666;
  color: #fff;
  border-color: #555;
  text-shadow: #222 0px -1px 0px;
}
input.form-button-disabled,
input.form-button-disabled:active {
  background: #eee none;
  border-color: #eee;
  text-shadow: none;
  color: #999;
}
input.form-autocomplete,
input.form-text,
input.form-file,
textarea.form-textarea,
select.form-select {
  padding: 2px;
  border: 1px solid #ccc;
  border-top-color: #999;
  background: #fff;
  color: #333;
}
input.form-text:focus,
input.form-file:focus,
textarea.form-textarea:focus,
select.form-select:focus {
  color: #000;
  border-color: #ace;
}
html.js input.form-autocomplete {
  background-position: 100% 4px;
}
html.js input.throbbing {
  background-position: 100% -16px;
}
ul.action-links {
  margin: 1em 0;
  padding: 0 20px 0 20px;
  list-style-type: none;
  overflow: hidden;
}
ul.action-links li {
  float: left;
  margin: 0 1em 0 0;
}
ul.action-links a {
  padding-left: 15px;
  background: transparent url(images/add.png) no-repeat 0 center;
  line-height: 30px;
}

/* Exceptions */
#diff-inline-form select,
div.filter-options select {
  padding: 0;
}

/**
 * System.
 */
div.admin .right,
div.admin .left {
  width: 49%;
  margin: 0;
}
div.admin-panel,
div.admin-panel .body {
  padding: 0;
  clear: left;
}
div.admin-panel {
  margin: 0 0 20px;
  padding: 9px;
  background: #f8f8f8;
  border: 1px solid #ccc;
}
div.admin-panel h3 {
  font-size: 0.923em;
  text-transform: uppercase;
  margin: 0;
  padding-bottom: 9px;
}

/* admin/appearance */
#system-themes-page h2 {
  font-weight: normal;
  text-transform: uppercase;
}
.theme-selector h3 {
  font-weight: normal;
}
.theme-default h3 {
  font-weight: bold;
}
.system-themes-list-enabled .theme-selector h3 {
  margin-top: 0;
}

/* admin/content and admin/people */
dl.multiselect,
dl.multiselect dt,
dl.multiselect dd {
  margin: 0 10px 0 0;
}
dl.multiselect select,
dl.multiselect dd select {
  font-size: 0.923em;
  background: #fff;
  border: 1px solid #ccc;
}

/* Update options. */
div.admin-options {
  background: #f8f8f8;
  line-height: 30px;
  height: 30px;
  padding: 9px;
  border: 1px solid #ccc;
  margin: 0 0 10px;
}
div.admin-options label {
  text-transform: uppercase;
  font: 0.846em/1.875em Lucida Grande, Lucida Sans Unicode, sans-serif;
}
div.admin-options label,
div.admin-options div.form-item {
  margin-right: 10px;
  float: left;
}
div.admin-options div.form-item {
  padding: 0;
  border: 0;
}

/* Update status */
.versions table.version {
  border: none;
}

/* Maintenance theming */
body.in-maintenance #sidebar-first {
  float: left;
  width: 200px;
}
body.in-maintenance #content {
  float: right;
  width: 550px;
  padding-right: 20px;
}
body.in-maintenance #page {
  overflow: auto;
  width: 770px;
  margin: 0 auto;
  padding-top: 2em;
}
body.in-maintenance #branding h1 {
  width: 770px;
  margin: 0 auto;
  float: none;
}
body.in-maintenance .form-radios .form-type-radio {
  padding: 2px 0;
}
body.in-maintenance div.form-item:after {
  content: "";
  display: none;
  clear: none;
}
body.in-maintenance .form-submit {
  display: block;
}
body.in-maintenance #logo {
  margin-bottom: 1.5em;
}
ol.task-list {
  margin-left: 0; /* LTR */
  list-style-type: none;
  list-style-image: none;
}
ol.task-list li {
  padding: 0.5em 1em 0.5em 20px; /* LTR */
  color: #adadad;
}
ol.task-list li.active {
  background: transparent url(images/task-item.png) no-repeat 3px 50%; /* LTR */
  padding: 0.5em 1em 0.5em 20px; /* LTR */
  color: #000;
}
ol.task-list li.done {
  color: #393;
  background: transparent url(images/task-check.png) no-repeat 0px 50%; /* LTR */
  color: green;
}

/* Overlay theming */
.overlay #branding {
  background-color: #fff;
  padding-top: 15px;
}
.overlay #branding h1.page-title,
.overlay #left,
.overlay #footer {
  display: none;
}
.overlay #page {
  margin: 0;
  padding: 0 20px;
}
.overlay #branding div.breadcrumb {
  float: left;
  position: relative;
  z-index: 10;
}
#overlay-tabs {
  bottom: -1px;
  font-size: 1.54em;
  line-height: 1.54em;
  margin: 0;
}
#overlay-tabs li {
  margin: 0 -2px;
}
.overlay ul.secondary {
  background: transparent none;
  margin: -2.4em 0 0.3em 0;
}
.overlay #content {
  padding: 0;
}
h1#overlay-title {
  font-weight: normal;
}

/* Shortcut theming */
div.add-or-remove-shortcuts {
  float: left;
  padding-top: 6px;
  padding-left: 6px;
}

/* Dashboard */
#dashboard .dashboard-region div.block h2 {
  background: #E0E0D8;
}
#dashboard div.block h2 {
  margin: 0;
  font-size: 1em;
  padding: 3px 9px 3px 19px;
}
#dashboard div.block div.content {
  padding: 10px 5px 5px 5px;
}
#dashboard div.block div.content ul.menu {
  margin-left: 20px;
}
#dashboard .dashboard-region .block {
  border: #ccc 1px solid;
}

/* Field UI */

#field-display-overview input.field-formatter-settings-edit {
  margin: 0;
  padding: 1px 8px;
}
#field-display-overview tr.field-formatter-settings-changed {
  background: #FFFFBB;
}
#field-display-overview tr.drag {
  background: #FFEE77;
}
#field-display-overview tr.field-formatter-settings-editing {
  background: #D5E9F2;
}
#field-display-overview .field-formatter-settings-edit-form .form-item {
  margin: 10px 0;
}
#field-display-overview .field-formatter-settings-edit-form .form-submit {
  margin-bottom: 0;
}

/* Recent content block */
#dashboard div#block-node-recent div.content {
  padding: 0;
}
#block-node-recent table,
#block-node-recent tr {
  border: none;
}
#block-node-recent .more-link {
  padding: 0 5px 5px 0;
}

/* User login block */
#user-login-form .openid-links {
  margin-left: 0; /* LTR */
}
#user-login-form .openid-links .user-link {
  margin-left: 1.5em; /* LTR */
}

/* Disable overlay message */
#overlay-disable-message {
  background-color: #addafc;
}
#overlay-disable-message a,
#overlay-disable-message a:visited {
  color: #000;
}
#overlay-disable-message a:focus,
#overlay-disable-message a:active {
  outline: none;
  text-decoration: underline;
}
.overlay-disable-message-focused a {
  padding: 0.4em 0.6em;
}
.overlay-disable-message-focused #overlay-dismiss-message {
  background-color: #59A0D8;
  color: #fff;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

Other Drupal examples (source code examples)

Here is a short list of links related to this Drupal style.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.