Style Switcher

panikweb_templates/static/css/specifics.css

@@ -41,7 +41,6 @@
 	margin: 0.2em 0 0.2em 0;
 }
 #Main .sectionLabel{
-	color:#3333FF;
 	margin-bottom:1em;
 }
 .iconLabel{margin-left:0.1em;}
@@ -1027,29 +1026,53 @@ div.episode.resume div.title {
 	margin: 1em 0;
 }
 
-
-#Nav, #metaNav ul li.active, #metaNav ul li.active a{
-	background:#0000dd !important;
-    color:#ffffff;
-}
-#Nav .active,#Nav .active *{
-	background: white;
-    color:#0000dd;
-}
+/*******************************/
+/**** VARIANTES ****************/
+/*******************************/
+
+#Nav,
+ #metaNav ul li.active,
+  #metaNav ul li.active a
+   {background:#111111 !important;color:#ffffff;}
+#Nav .active,
+ #Nav .active *,
+  .sectionLabel
+  {background: white;color:#111111;}
+
+.style-3333ff #Nav, 
+.style-3333ff  #metaNav ul li.active, 
+.style-3333ff   #metaNav ul li.active a
+   {background:#3333ff !important;color:#ffffff;}
+.style-3333ff #Nav .active,
+.style-3333ff  #Nav .active *,
+.style-3333ff   .sectionLabel
+  {background: white;color:#3333ff !important;}
+
+.style-0000ff #Nav, 
+.style-0000ff  #metaNav ul li.active, 
+.style-0000ff   #metaNav ul li.active a
+   {background:#0000ff !important;color:#ffffff;}
+.style-0000ff #Nav .active,
+.style-0000ff  #Nav .active *,
+.style-0000ff   .sectionLabel
+  {background: white;color:#0000ff !important;}
+
+.style-ff6633 #Nav, 
+.style-ff6633  #metaNav ul li.active, 
+.style-ff6633   #metaNav ul li.active a
+   {background:#ff6633 !important;color:#ffffff;}
+.style-ff6633 #Nav .active,
+.style-ff6633  #Nav .active *,
+.style-ff6633   .sectionLabel
+  {background: white;color:#ff6633 !important;}
+
+.style-ff6633 #mainHeader {background:#ff6633 50% 50% no-repeat url('../img/logo-panik.png');}
+.style-ff6633 #mainHeader *{background:transparent !important;}
 /*
-#Nav, #metaNav ul li.active, #metaNav ul li.active a{
-	background:#111111 !important;
-    color:#ffffff;
-}
-#Nav .active,#Nav .active *{
-	background: white;
-    color:#111111;
-}
 
-#Commons, #Commons *, #player-container,  #player-container *{color:#fff !important;
-    background-color:#3333ff !important; 
-    border-color:#fff !important;
-}
-#mainHeader {background:transparent 50% 50% no-repeat url('../img/logo-panik.png');}
-#mainHeader *{background:transparent !important;}
+#Commons,
+ #Commons *,
+  #player-container,
+   #player-container *{background-color:#3333ff !important; border-color:#fff !important;color:#fff !important;}
+
 */

panikweb_templates/templates/episodes/resume.html

@@ -25,13 +25,13 @@
 	<div class="logo">
 		{% if model = "inline" and episode.image %}
 			<img src="{{ episode.image|thumbnail:'60x60' }}"/>
-		{% elif model = "inline" and emission.image %}
+		{% elif model = "inline" and episode.emission.image %}
 			<img src="{{ episode.emission.image|thumbnail:'60x60' }}"/>
 		{% elif model = "inline" %}
 			<img class="smooth"  style="width:60px;" src="{% static "img/episode.png" %}"/>
 		{% elif episode.image %}
 			<img src="{{ episode.image|thumbnail:'150x150' }}"/>
-		{% elif emission.image %}
+		{% elif episode.emission.image %}
 			<img src="{{ episode.emission.image|thumbnail:'150x150' }}"/>
 		{% else %}
 			<img class="smooth" style="width:150px;" src="{% static "img/episode.png" %}"/>

panikweb_templates/templates/includes/metaNav.html

@@ -25,5 +25,23 @@
 				<span class="nav-icon icon-search" ></span>
 				<span class="iconLabel">{% trans 'Search' %}</span>
 			</a></li>
+			<li id="StyleSwitcher" class="small">
+                <button class="small icon-sign-blank" data-class="style-ff6633" style="color:#ff6633;"></button>
+                <button class="small icon-sign-blank" data-class="style-0000ff" style="color:#0000ff;"></button>
+                <button class="small icon-sign-blank" data-class="style-3333ff" style="color:#3333ff;"></button>
+                <button class="small icon-sign-blank" data-class="style-111111" style="color:#ffffff;"></button>
+            </li>
+            <script type="text/javascript">                
+            $(function() {
+                var currentStyle = localStorage['class'];
+                $('#StyleSwitcher button').on('click',function(e){
+                    e.preventDefault();
+                    $('#All').attr('class','').addClass($(this).attr('data-class'));
+                    localStorage['class'] = $(this).attr('data-class');
+                });
+                $('#StyleSwitcher button[data-class="'+currentStyle+'"]').trigger('click');
+            });
+            </script>
+    
 		</ul>
 </nav>