Commit 790da7b3 authored by webchick's avatar webchick

#683026 by jensimmons, JohnAlbin, Jeff Burnz, Jacine, stephthegeek, bleen18,...

#683026 by jensimmons, JohnAlbin, Jeff Burnz, Jacine, stephthegeek, bleen18, smerrill, et al: New core theme: Bartik, a flexible, re-colorable theme with many regions that shows off what Drupal can do. Truly a team effort. :)
parent a5e2404e
; $Id$
name = Bartik
description = A flexible, recolorable theme with many regions.
package = Core
version = VERSION
core = 7.x
engine = phptemplate
stylesheets[all][] = css/layout.css
stylesheets[all][] = css/style.css
stylesheets[all][] = css/colors.css
stylesheets[print][] = css/print.css
stylesheets[all][] = css/maintenance-page.css
scripts[] = scripts/search.js
regions[header] = Header
regions[help] = Help
regions[page_top] = Page top
regions[page_bottom] = Page bottom
regions[highlight] = Highlighted
regions[featured] = Featured
regions[content] = Content
regions[sidebar_first] = Sidebar first
regions[sidebar_second] = Sidebar second
regions[triptych_first] = Triptych first
regions[triptych_middle] = Triptych middle
regions[triptych_last] = Triptych last
regions[footer_firstcolumn] = Footer first column
regions[footer_secondcolumn] = Footer second column
regions[footer_thirdcolumn] = Footer third column
regions[footer_fourthcolumn] = Footer fourth column
regions[footer] = Footer
settings[shortcut_module_link] = 0
<?php
// $Id$
// Put the logo path into JavaScript for the live preview.
drupal_add_js(array('color' => array('logo' => theme_get_setting('logo', 'bartik'))), 'setting');
$info = array(
// Available colors and color labels used in theme.
'fields' => array(
'bg' => t('Main background'),
'link' => t('Link color'),
'top' => t('Header top'),
'bottom' => t('Header bottom'),
'text' => t('Text color'),
'sidebar' => t('Sidebar background'),
'sidebarborders' => t('Sidebar borders'),
'footer' => t('Footer background'),
'titleslogan' => t('Title and slogan'),
),
// Pre-defined color schemes.
'schemes' => array(
'default' => array(
'title' => t('Blue Lagoon (default)'),
'colors' => array(
'bg' => '#ffffff',
'link' => '#288CC9',
'top' => '#0779bf',
'bottom' => '#48a9e4',
'text' => '#3b3b3b',
'sidebar' => '#f6f6f2',
'sidebarborders' => '#f9f9f9',
'footer' => '#2d1e0f',
'titleslogan' => '#fffeff',
),
),
'Slate' => array(
'title' => t('Slate'),
'colors' => array(
'bg' => '#ffffff',
'link' => '#0073b6',
'top' => '#4a4a4a',
'bottom' => '#4e4e4e',
'text' => '#3b3b3b',
'sidebar' => '#feffff',
'sidebarborders' => '#d0d0d0',
'footer' => '#161617',
'titleslogan' => '#fffeff',
),
),
'Firehouse' => array(
'title' => t('Firehouse'),
'colors' => array(
'bg' => '#ffffff',
'link' => '#d6121f',
'top' => '#cd2d2d',
'bottom' => '#cf3535',
'text' => '#3b3b3b',
'sidebar' => '#f1f1f1',
'sidebarborders' => '#c2c2c2',
'footer' => '#1f1d1c',
'titleslogan' => '#fffeff',
),
),
'Plum' => array(
'title' => t('Plum'),
'colors' => array(
'bg' => '#fffdf7',
'link' => '#9d408d',
'top' => '#4c1c58',
'bottom' => '#593662',
'text' => '#301313',
'sidebar' => '#f8f3e7',
'sidebarborders' => '#e4e3d4',
'footer' => '#2C2C28',
'titleslogan' => '#fffeff',
),
),
'Ice' => array(
'title' => t('Ice'),
'colors' => array(
'bg' => '#ffffff',
'link' => '#019DBF',
'top' => '#d0d0d0',
'bottom' => '#c2c4c5',
'text' => '#4A4A4A',
'sidebar' => '#feffff',
'sidebarborders' => '#cccccc',
'footer' => '#24272c',
'titleslogan' => '#0b0b0b',
),
),
),
// CSS files (excluding @import) to rewrite with new color scheme.
'css' => array(
'css/colors.css',
),
// Files to copy.
'copy' => array(
'logo.png',
),
// Gradient definitions.
'gradients' => array(
array(
// (x, y, width, height).
'dimension' => array(0, 0, 0, 0),
// Direction of gradient ('vertical' or 'horizontal').
'direction' => 'vertical',
// Keys of colors to use for the gradient.
'colors' => array('top', 'bottom'),
),
),
// Color areas to fill (x, y, width, height).
'fill' => array(),
// Coordinates of all the theme slices (x, y, width, height)
// with their filename as used in the stylesheet.
'slices' => array(),
// Reference color used for blending. Matches the base.png's colors.
'blend_target' => '#ffffff',
// Preview files.
'preview_image' => 'color/preview.png',
'preview_css' => 'color/preview.css',
'preview_js' => 'color/preview.js',
'preview_html' => 'color/preview.html',
// Base file for image generation.
'base_image' => 'color/base.png',
);
/* $Id$ */
/* Bring in the rest of the theme's CSS styles. */
@import url("../css/style.css");
/* From color.css. */
#preview, #preview-header {
background-color: #000000;
}
/* Undoing Seven's reset. */
#preview #preview-header #preview-logo img {
border: 0;
}
/* ---------- Basic Preview Styles ----------- */
#preview {
width: 640px;
overflow: hidden;
font-size: 1em;
}
#preview #preview-header div.section,
#preview #preview-navigation div.section,
#preview #preview-featured div.section,
#preview #preview-main {
width: 960px;
margin-left: auto;
margin-right: auto;
padding: 0 20px;
}
#preview #preview-content,
#preview .sidebar {
display: inline;
float: left; /* LTR */
position: relative;
}
#preview #preview-content {
width: 720px;
}
#preview .sidebar {
width: 240px;
}
#preview #preview-content .section,
.sidebar .section {
padding: 0 10px;
}
#preview #footer-wrapper {
padding: 35px 20px 30px;
}
#preview #footer-firstcolumn,
#preview #footer-secondcolumn,
#preview #footer-thirdcolumn,
#preview #footer-fourthcolumn {
padding: 0 10px;
width: 220px;
display: inline;
float: left; /* LTR */
position: relative;
}
#preview #footer {
width: 940px;
}
<div id="preview">
<div id="preview-header">
<div class="section clearfix">
<a href="/" title="Home" rel="home" id="preview-logo" name="logo"><img src="../../../themes/bartik/logo.png" alt="Home" /></a>
<div id="preview-name-and-slogan">
<div id="preview-site-name">
<strong><a href="#" title="Home" rel="home"><span>Bartik</span></a></strong>
</div>
</div><!-- /#name-and-slogan -->
</div>
</div><!-- /.section, /#header -->
<div id="preview-main-wrapper">
<div id="preview-main" class="clearfix">
<div id="preview-sidebar-first" class="column sidebar">
<div class="section">
<div class="region region-sidebar-first">
<div id="preview-block-user-login" class="block block-user first last even">
<h2>
Etiam est risus
</h2>
<div class="content">
<p>
Maecenas id porttitor felis. Pellentesque mollis urna in nibh pharetra semper. Nulla erat odio, imperdiet quis cursus vitae, ultricies
at diam.
</p>
</div>
</div>
</div>
</div>
</div><!-- /.section, /#sidebar-first -->
<div id="preview-content" class="column">
<div class="section">
<a id="preview-main-content" name="main-content"></a>
<h1 class="title" id="preview-page-title">
Lorem ipsum dolor
</h1>
<div class="region region-content">
<div id="preview-block-system-main" class="block block-system first last even">
<div class="content">
<div id="preview-node-1" class="node node-page clearfix" about="/node/1" typeof="foaf:Document">
<div class="content clearfix">
<div class="field field-name-body field-type-text-with-summary field-label-hidden clearfix">
<div class="field-items">
<div class="field-item even" property="content:encoded">
<p>
Sit amet, <a href="#">consectetur adipisicing elit</a>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud <a href="#">exercitation ullamco</a> laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div><!-- /.section, /#content -->
</div>
</div><!-- /#main, /#main-wrapper -->
<div id="footer-wrapper"><div class="section">
<div id="footer-columns" class="clearfix">
<div id="footer-firstcolumn" class="region sitemap"><div class="section">
<ul>
<li><a>Donec placerat</a></li>
<li><a>Nullam nibh dolor</a></li>
<li><a>Blandit sed</a></li>
<li><a>Fermentum id</a></li>
</ul>
</div></div> <!-- /.section, /#footer-firstcolumn -->
<div id="footer-secondcolumn" class="region sitemap"><div class="section">
<ul>
<li><a>Imperdiet sit amet</a></li>
<li><a>Nam mollis</a></li>
<li><a>Ultrices justo</a></li>
<li><a>Sed tempor</a></li>
</ul>
<ul>
</div></div> <!-- /.section, /#footer-secondcolumn -->
<div id="footer-thirdcolumn" class="region sitemap"><div class="section">
<ul>
<li><a>Sit amet</a></li>
<li><a>Gravida eget</a></li>
<li><a>Porta at</a></li>
<li><a>Nam non</a></li>
</ul>
</div></div> <!-- /.section, /#footer-thirdcolumn -->
<div id="footer-fourthcolumn" class="region sitemap"><div class="section">
<ul>
<li><a>Sed vitae</a></li>
<li><a>Tellus</a></li>
<li><a>Etiam sem</a></li>
<li><a>Arcu eleifend</a></li>
</ul>
</div></div> <!-- /.section, /#footer-fourthcolumn -->
</div><!-- /#footer-columns -->
<div id="footer" class="clearfix">
Aliquam aliquet, est <a>a ullamcorper</a> condimentum.
</div><!-- /#footer -->
</div></div> <!-- /.section, /#footer-wrapper -->
</div><!-- /#preview -->
/* $Id$ */
(function ($) {
Drupal.color = {
logoChanged: false,
callback: function(context, settings, form, farb, height, width) {
// Change the logo to be the real one.
if (!this.logoChanged) {
$('#preview #preview-logo img').attr('src', Drupal.settings.color.logo);
this.logoChanged = true;
}
// Solid background.
$('#preview', form).css('backgroundColor', $('#palette input[name="palette[bg]"]', form).val());
// Text preview.
$('#preview #preview-main h2, #preview #preview-main p', form).css('color', $('#palette input[name="palette[text]"]', form).val());
$('#preview #preview-content a', form).css('color', $('#palette input[name="palette[link]"]', form).val());
// Sidebar background.
$('#preview .sidebar .block', form).css('background-color', $('#palette input[name="palette[sidebar]"]', form).val());
// Footer background.
$('#preview #footer-wrapper', form).css('background-color', $('#palette input[name="palette[footer]"]', form).val());
$('#preview .sidebar .block', form).css('border-color', $('#palette input[name="palette[sidebarborders]"]', form).val());
// CSS3 Gradients.
var gradient_start = $('#palette input[name="palette[top]"]', form).val();
var gradient_end = $('#palette input[name="palette[bottom]"]', form).val();
$('#preview #preview-header', form).attr('style', "background-color: " + gradient_start + "; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(" + gradient_start + "), to(" + gradient_end + ")); background-image: -moz-linear-gradient(-90deg, " + gradient_start + ", " + gradient_end + ");");
$('#preview #preview-name-and-slogan a', form).css('color', $('#palette input[name="palette[titleslogan]"]', form).val());
}
};
})(jQuery);
/* $Id$ */
/* ---------- Color Module Styles ----------- */
body {
background-color: #2d1e0f;
color: #ffffff;
}
html,
#page-wrapper,
body.overlay {
background-color: #ffffff;
color: #3b3b3b;
}
#navigation ul.links li.active-trail a {
background: #ffffff;
}
.tabs ul.primary li a.active {
background-color: #ffffff;
}
#header {
background-color: #48a9e4;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0779bf), to(#48a9e4));
background-image: -moz-linear-gradient(-90deg, #0779bf, #48a9e4);
}
a {
color: #288CC9;
}
a:hover,
a:focus {
color: #018fe2;
}
a:active {
color: #23aeff;
}
.sidebar .block {
background-color: #f6f6f2;
border-color: #f9f9f9;
}
#footer-wrapper {
background: #2d1e0f;
}
#header #name-and-slogan,
#header #name-and-slogan a {
color: #fffeff;
}
/* $Id$ */
fieldset legend {
left: 6px;
}
.tabs ul.primary li a.active {
padding: 0 10px 0 7px;
}
ul.action-links li a {
zoom: 1;
}
/* $Id$ */
.block {
zoom: 1;
}
input.form-text {
font-family: sans-serif;
}
#password-strength-text {
margin-top: 0;
}
fieldset legend {
left: -8px;
padding: 0;
}
.tabs ul.primary {
height: auto;
}
.tabs ul.primary li a.active {
padding: 0 7px 0 10px; /* LTR */
}
#footer-wrapper #footer .block {
height: 100%;
}
/* $Id$ */
#content {
overflow: hidden;
}
.form-item-search-block-form {
width: 50%;
}
.tabs ul.primary {
zoom: 1;
}
/* $Id$ */
/* ---------- Basic Layout RTL Styles ----------- */
#content,
.sidebar,
#triptych-first,
#triptych-middle,
#triptych-last,
#footer-firstcolumn,
#footer-secondcolumn,
#footer-thirdcolumn,
#footer-fourthcolumn {
float: right;
}
/* $Id$ */
/* ---------- Basic Layout Styles ----------- */
#header div.section,
#navigation div.section,
#featured div.section,
#messages,
#main,
#triptych,
#footer-columns,
#footer {
width: 960px;
margin-left: auto;
margin-right: auto;
}
#content,
.sidebar,
#triptych-first,
#triptych-middle,
#triptych-last,
#footer-firstcolumn,
#footer-secondcolumn,
#footer-thirdcolumn,
#footer-fourthcolumn {
display: inline;
float: left; /* LTR */
position: relative;
}
.one-sidebar #content {
width: 720px;
}
.two-sidebars #content {
width: 480px;
}
.no-sidebars #content {
width: 960px;
float: none;
}
.sidebar {
width: 240px;
}
#main-wrapper {
min-height: 500px;
}
#messages div.section,
#content .section,
.sidebar .section {
padding: 0 15px;
}
#breadcrumb {
margin: 0 15px;
}
#triptych-first,
#triptych-middle,
#triptych-last {
margin: 20px 20px 30px;
width: 280px;
}
#footer-wrapper {
padding: 35px 5px 30px;
}
#footer-firstcolumn,
#footer-secondcolumn,
#footer-thirdcolumn,
#footer-fourthcolumn {
padding: 0 10px;
width: 220px;
}
#footer {
width: 940px;
min-width: 920px;
}
/* $Id$ */
body.maintenance-page {
background-color: #fff;
color: #000;
}
.maintenance-page #page-wrapper {
margin-left: auto;
margin-right: auto;
width: 800px;
border: 1px solid #cbcbcb;
margin-top: 40px;
}
.maintenance-page #page {
margin: 20px 40px 40px;
}
.maintenance-page #main-wrapper {
min-height: inherit;
}
.maintenance-page #header,
.maintenance-page #messages,
.maintenance-page #main {
width: auto;
}
.maintenance-page #header div.section,
.maintenance-page #navigation div.section,
.maintenance-page #messages,
.maintenance-page #main {
width: 700px;
}
.maintenance-page #main {
margin: 0;
}
.maintenance-page #content .section {
padding: 0 0 0 10px;