Merge pull request #135 from rbertolette/#130add_logo_link_bling

#130add_logo_link_bling
kalamuna · Nov 7, 2016 · a900bb2 · a900bb2
2 parents 84d9771 + 4883992
commit a900bb2
Show file tree

Hide file tree

Showing 6 changed files with 148 additions and 8 deletions.
diff --git a/sites/all/themes/playbox_theme/css/logo-bling.css b/sites/all/themes/playbox_theme/css/logo-bling.css
@@ -0,0 +1,92 @@
+/**
+* Created on   : May 24, 2016, 4:36:44 PM
+*   Author     : Reed Bertolette [email protected]
+*   inspired &
+*   thanks to  : http://tympanus.net/codrops/2012/08/08/circle-hover-effects-with-css-transitions/
+*/
+
+.ch-grid {
+  margin: 20px 0 0 0;
+  padding: 0;
+  list-style: none;
+  display: block;
+  text-align: center;
+  width: 100%;
+}
+
+.ch-grid:after,
+.ch-item:before {
+  content: '';
+  display: table;
+}
+
+.ch-grid:after {
+  clear: both;
+}
+
+.ch-grid li {
+  width: 150px;
+  height: 150px;
+  display: inline-block;
+  margin: 20px;
+}
+
+.ch-item {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  overflow: hidden;
+  position: relative;
+  cursor: default;
+}
+
+.ch-img-1 {
+  /*  background-image added dynamically in custom.js */
+  background-color: transparent;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.ch-info {
+  position: absolute;
+  background: rgba(63,147,147, 0.8);
+  width: inherit;
+  height: inherit;
+  border-radius: 50%;
+  overflow: hidden;
+  opacity: 0;
+  transition: all 0.4s ease-in-out;
+  transform: scale(0);
+}
+
+.ch-info p {
+  /*  background-image added dynamically in custom.js */
+  background-color: transparent;
+  background-repeat: no-repeat;
+  background-position: center;
+  display: block;
+  color: rgba(255,255,255,0.7);
+  font-style: normal;
+  font-weight: 700;
+  text-transform: uppercase;
+  font-size: 9px;
+  letter-spacing: 1px;
+  padding-top: 4px;
+  font-family: 'Titillium Web', Arial, sans-serif;
+  width: 150px;
+  height: 150px;
+  text-indent: -9999px;
+  cursor: pointer;
+  padding-top: 10px;
+}
+
+.ch-item:hover {
+  box-shadow:
+    inset 0 0 0 1px rgba(255,255,255,0.1),
+    0 1px 2px rgba(0,0,0,0.1);
+}
+
+.ch-item:hover .ch-info {
+  transform: scale(1);
+  opacity: 1;
+}
diff --git a/sites/all/themes/playbox_theme/js/custom.js b/sites/all/themes/playbox_theme/js/custom.js
@@ -107,6 +107,23 @@
 	Disco Party Time!
 	==============================================*/
 	$( document ).ready(function(){
+
+    // add some css settings based on dynamic logo settings
+    $('.ch-img-1').css('background-image', 'url(' + Drupal.settings.logo_white + ')');
+    $('.ch-info p').css('background-image', 'url(' + Drupal.settings.logo + ')');
+
+    // added for logo_bling
+    $('#logo-hover').click(function(){
+      $(this).hide( "slow", function() {
+        if (window.location.pathname != Drupal.settings.basePath){
+          window.location.href = Drupal.settings.basePath;
+        } else {
+          $(this).css('text-indent', 0).html('You are home').show();
+        }
+      });
+    });
+
+
 		//If disco mode is enabled, periodically swap colors
 		if(Drupal.settings.playboxadmin.disco == 1){
 			var default_color = Drupal.settings.playboxadmin.default_color;

diff --git a/sites/all/themes/playbox_theme/playbox_theme.info b/sites/all/themes/playbox_theme/playbox_theme.info
@@ -11,6 +11,7 @@ stylesheets[all][] = css/styles.css
 stylesheets[all][] = css/syntax.css
 stylesheets[all][] = css/meflat-blue.css
 stylesheets[all][] = css/tweaks.css
+stylesheets[all][] = css/logo-bling.css
 
 scripts[] = js/jquery.easypiechart.js
 scripts[] = js/modernizr.min.js
@@ -42,3 +43,5 @@ fonts[google_fonts_api][] = "Titillium Web&subset=latin#900"
 fonts[google_fonts_api][] = "Titillium Web&subset=latin#italic"
 fonts[google_fonts_api][] = "Titillium Web&subset=latin#regular"
 
+settings[logo_white] = /sites/all/themes/playbox_theme/logo-white.svg
+
diff --git a/sites/all/themes/playbox_theme/template.php b/sites/all/themes/playbox_theme/template.php
@@ -95,7 +95,8 @@ function playbox_theme_process_page(&$variables) {
   // Check if we're to always print the page title, even on panelized pages.
   $variables['always_show_page_title'] = theme_get_setting('always_show_page_title') ? TRUE : FALSE;
 
-  // Add in the path for the white logo that we will need on larger screens.
-  $path = url(path_to_theme() . '/logo-white.svg');
-  $variables['logo_white'] = $path;
+  // Add js variable for path for the logo & alt logo that we will need on larger screens & alt screens.
+  drupal_add_js('jQuery.extend(Drupal.settings, { "logo_white": "' . theme_get_setting('logo_white') . '" });', 'inline');
+  drupal_add_js('jQuery.extend(Drupal.settings, { "logo": "' . theme_get_setting('logo') . '" });', 'inline');
+
 }
diff --git a/sites/all/themes/playbox_theme/templates/core/page.tpl.php b/sites/all/themes/playbox_theme/templates/core/page.tpl.php
@@ -158,11 +158,20 @@
             <!-- ======= LOGO (for larger screens)========-->
             <?php if ($logo): ?>
               <div class='brand'>
-                <a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home" id="logo" class="navbar-brand scrollto hidden-xs">
-                  <img src="<?php print $logo; ?>" alt="<?php print t('Home'); ?>" id="logo-dark" class="hidden" />
-                  <img src="<?php print $logo_white; ?>" alt="<?php print t('Home'); ?>" id="logo-white" />
-                </a>
-              </div>
+
+                <!-- changed for logo-bling START -->
+                <ul class="ch-grid">                
+                  <li>
+                    <div class="ch-item ch-img-1" >
+                      <div class="ch-info">
+                        <p id="logo-hover" title="<?php print t('Home'); ?>"> <?php print t('Home'); ?></p>
+                      </div>
+                    </div>
+                  </li>  
+                </ul>
+                <!-- changed for logo-bling END -->
+
+             </div>
             <?php endif; ?>
 
             <?php print theme('links__system_main_menu', array(

diff --git a/sites/all/themes/playbox_theme/theme-settings.php b/sites/all/themes/playbox_theme/theme-settings.php
@@ -0,0 +1,18 @@
+<?php
+
+/**
+ * @file
+ * Theme setting callbacks for playbox_theme (sub-theme of kalatheme.)
+ */
+
+/**
+ * Implements hook_form_FORM_ID_alter().
+ */
+function playbox_theme_form_system_theme_settings_alter(&$form, $form_state) {
+  $form['logo']['logo_white'] = array(
+    '#type'          => 'textfield',
+    '#title'         => t('Alternate logo'),
+    '#default_value' => theme_get_setting('logo_white'),
+    '#description'   => t("Path to the version of the logo to be used for larger screens and logo_bling."),
+  );
+}