Style Switcher

diff --git a/panikweb_templates/static/css/specifics.css b/panikweb_templates/static/css/specifics.css
index 103e577fcfd5427c256c39194443a8d6de037ff3..51a50aaa7ec2ff3bf339528fb523564634a59c60 100644 (file)
--- a/panikweb_templates/static/css/specifics.css
+++ b/panikweb_templates/static/css/specifics.css
@@ -41,7 +41,6 @@
        margin: 0.2em 0 0.2em 0;
 }
 #Main .sectionLabel{
        margin: 0.2em 0 0.2em 0;
 }
 #Main .sectionLabel{

-       color:#3333FF;

        margin-bottom:1em;
 }
 .iconLabel{margin-left:0.1em;}
        margin-bottom:1em;
 }
 .iconLabel{margin-left:0.1em;}


@@ -1027,29 +1026,53 @@ div.episode.resume div.title {
        margin: 1em 0;
 }
 
        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;}
+

 */
 */

diff --git a/panikweb_templates/templates/episodes/resume.html b/panikweb_templates/templates/episodes/resume.html
index 91b28558a994b823e1e32c6011f0fe22108c6c63..166dab752dfc427cf0d69b3c8ed17bd4421e3144 100644 (file)
--- a/panikweb_templates/templates/episodes/resume.html
+++ b/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' }}"/>
        <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' }}"/>
                        <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" %}"/>
                        <img src="{{ episode.emission.image|thumbnail:'150x150' }}"/>
                {% else %}
                        <img class="smooth" style="width:150px;" src="{% static "img/episode.png" %}"/>

diff --git a/panikweb_templates/templates/includes/metaNav.html b/panikweb_templates/templates/includes/metaNav.html
index 3499a9872ca0ffb426643b9ed25018a42ecd5271..f01212e8cb7b5ae72e19429340e02d99d20651b9 100644 (file)
--- a/panikweb_templates/templates/includes/metaNav.html
+++ b/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>
                                <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>
                </ul>
 </nav>