#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. :)

6 files changed, 338 insertions, 0 deletions

diff --git a/themes/bartik/color/base.png b/themes/bartik/color/base.png
new file mode 100644
index 000000000..8a9cf7d13
--- /dev/null
+++ b/themes/bartik/color/base.png
diff --git a/themes/bartik/color/color.inc b/themes/bartik/color/color.inc
new file mode 100644
index 000000000..8688f34aa
--- /dev/null
+++ b/themes/bartik/color/color.inc
@@ -0,0 +1,134 @@
+<?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',
+);
diff --git a/themes/bartik/color/preview.css b/themes/bartik/color/preview.css
new file mode 100644
index 000000000..cb95c1960
--- /dev/null
+++ b/themes/bartik/color/preview.css
@@ -0,0 +1,62 @@
+/* $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;
+}
diff --git a/themes/bartik/color/preview.html b/themes/bartik/color/preview.html
new file mode 100644
index 000000000..13537edad
--- /dev/null
+++ b/themes/bartik/color/preview.html
@@ -0,0 +1,105 @@
+<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 -->
diff --git a/themes/bartik/color/preview.js b/themes/bartik/color/preview.js
new file mode 100644
index 000000000..7365f6f55
--- /dev/null
+++ b/themes/bartik/color/preview.js
@@ -0,0 +1,37 @@
+/* $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);
diff --git a/themes/bartik/color/preview.png b/themes/bartik/color/preview.png
new file mode 100644
index 000000000..8018ed95e
--- /dev/null
+++ b/themes/bartik/color/preview.png