margin: 0.2em 0 0.2em 0;
}
#Main .sectionLabel{
- color:#3333FF;
margin-bottom:1em;
}
.iconLabel{margin-left:0.1em;}
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;}
+
*/
<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" %}"/>
<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>