theme Theme customization: allowing your members to switch theme skin or parts of skin

[Tech Support]

This article explains how to allow site users to switch between different skins using KVS default theme as example. Please note that the same approach can be used for a variety of ideas that involve different CSS styles display in your design, for example:

• Switching the whole skins
• Switching between big and small thumbs in video lists
• Switching between short / detailed video list display layout
• etc.

NOTE: if you are planning to use multiple CSS skins on your site, any CSS customizations should be put and tested with both skins. Otherwise for some users your site may become broken, if skin they are using has not been updated properly to include all the needed customizations.

 

Change KVS default theme to support switchable skins

KVS default theme provides 2 skins: dark and white. Skin is configured via theme configuration and the actual skin is rendered in site header template using this Smarty condition:

{{if $lang.theme.style=='white'}}
... show white skin
{{else}}
... show dark skin
{{/if}}

 

Use the following steps to make is adjustable.

 

1) In Settings -> Website Settings fill in name and default value for one of the free Dynamic HTTP parameters as skin and white (use dark if you want dark skin to be the default one). Leave lifetime value as set to 360 days by default:

 

2) In Website UI -> Page Components -> include_header_general.tpl change this block:

   {{if $lang.theme.style=='white'}}
       <link href="{{$config.statics_url}}/static/styles/all-responsive-white.css?v=7.0" rel="stylesheet" type="text/css"/>
       <link href="{{$config.statics_url}}/static/styles/jquery.fancybox-white.css?v=7.0" rel="stylesheet" type="text/css"/>
   {{else}}
       <link href="{{$config.statics_url}}/static/styles/all-responsive-metal.css?v=7.0" rel="stylesheet" type="text/css"/>
       <link href="{{$config.statics_url}}/static/styles/jquery.fancybox-metal.css?v=7.0" rel="stylesheet" type="text/css"/>
   {{/if}}

With the same logic using Javascript:

   <script type="application/javascript">
       if ('%skin%' == 'white') {
           document.write('<link href="{{$config.statics_url}}/static/styles/all-responsive-white.css?v=7.0" rel="stylesheet" type="text/css"/>');
           document.write('<link href="{{$config.statics_url}}/static/styles/jquery.fancybox-white.css?v=7.0" rel="stylesheet" type="text/css"/>');
       } else {
           document.write('<link href="{{$config.statics_url}}/static/styles/all-responsive-metal.css?v=7.0" rel="stylesheet" type="text/css"/>');
           document.write('<link href="{{$config.statics_url}}/static/styles/jquery.fancybox-metal.css?v=7.0" rel="stylesheet" type="text/css"/>');
       }
   </script>
   <noscript>
       <link href="{{$config.statics_url}}/static/styles/all-responsive-metal.css?v=7.0" rel="stylesheet" type="text/css"/>
       <link href="{{$config.statics_url}}/static/styles/jquery.fancybox-metal.css?v=7.0" rel="stylesheet" type="text/css"/>
   </noscript>

After this change, your site should be displayed with the skin that is configured as default value for skin dynamic HTTP parameter.

 

3) If you need to render skin switcher, you can do this multiple ways. You can open any URL of your site and pass skin=value parameter in the URL:

http://domain.com/?skin=white
http://domain.com/?skin=dark

The selected value will be remembered in user cookies. Alternatively if you don't want to expose this URL parameter to public, you can set the cookie explicitly via Javascript and refresh the page:

$.cookie('kt_rt_skin', 'dark', {expires: 360, path: '/'});
window.location.reload();

 

When only parts of design should be switchable

When you want users to switch only part of display functionality (e.g. bigger thumbs VS smaller thumbs, short list layout VS detailed list layout), it is easier to have only 1 CSS file and customize its display using CSS classes hierarchy, e.g.:

.list .thumb {
   width: 320;
   height: auto;
}

.list .small .thumb {
   width: 240;
}

With the above approach, all you need is to add small class name to the list HTML element in order to switch it to smaller thumbs. Here is where Dynamic HTTP parameters (Settings -> Website Settings) can be of your service again. Note that this time we don't specify any default value for thumb_size parameter, because bigger thumbs are default behavior and parameter should print empty value for bigger thumbs:

Now in template where you render list thumbs (e.g. Website UI -> Page Components -> include_list_videos_block_common.tpl) you should add %thumb_size% token into classes list of root thumb list element similar to this:

<div class="list %thumb_size%">
..rendering thumbs list here
</div>

Then you can switch between big and small thumbs:

http://domain.com/?thumb_size=small
http://domain.com/?thumb_size=

 

[xvids]

Hi,

 

For users on slow connections, external scripts dynamically injected via `document.write()` can delay page load by tens of seconds. Learn more.

[Tech Support]

There are no external scripts loaded here. This code doesn't have any performance impact on the end users.

[davex]

On 4/29/2019 at 9:54 AM, Tech Support said:

The selected value will be remembered in user cookies. Alternatively if you don't want to expose this URL parameter to public, you can set the cookie explicitly via Javascript and refresh the page:

$.cookie('kt_rt_skin', 'dark', {expires: 360, path: '/'});
window.location.reload();

 

 

hello, With this option, so that the url is not shown? to hide: 

http://domain.com/?skin=white 

http://domain.com/?skin=dark

[Tech Support]

14 hours ago, davex said:

hello, With this option, so that the url is not shown? to hide:

Yes, this is for hiding parameters from the URL.

[davex]

3 hours ago, Tech Support said:

Yes, this is for hiding parameters from the URL.

Thanks, where does the code go? since I don't see a place to put it.

[Tech Support]

59 minutes ago, davex said:

Thanks, where does the code go? since I don't see a place to put it.

It should be put into onclick event handler for your buttons to switch theme style.

[xvids]

Can someone please help for cookies with jquery

 

<input id="check1" type="checkbox" checked>

 

$(document).ready(function() {
if ($.cookie('kt_rt_skin') == 'yes') {
    
$('#check1').click(function() {
  $(this).toggleClass(function(){
    return $(this).is('.dark, .white') ? 'dark white' : 'dark';
  })
});

$("#check1").click(function() {
    
if($("#check1").hasClass("dark"))
  {
      $(this).removeClass($.cookie("dark")).addClass($.cookie("white"));
    
    window.location = "{{$page_canonical}}#skin=dark";
  }
else ($("#check1").hasClass("white"))
  {
      $(this).addClass($.cookie("dark"));
      window.location = "{{$page_canonical}}#skin=white";
  }
  $.cookie('kt_rt_skin', 'dark', {expires: 7 });
})};
});

 

Edited January 12, 2021 by xvids

[Tech Support]

Replace this:

window.location = "{{$page_canonical}}#skin=dark";

and

window.location = "{{$page_canonical}}#skin=white";

with

$.cookie('kt_rt_skin', 'dark', {expires: 360, path: '/'});
window.location.reload();

and

$.cookie('kt_rt_skin', 'white', {expires: 360, path: '/'});
window.location.reload();

 

and also remove this line from the end

$.cookie('kt_rt_skin', 'dark', {expires: 7 });

 

[davex]

On 1/1/2021 at 10:23 PM, xvids said:

Hi,

 

For users on slow connections, external scripts dynamically injected via `document.write()` can delay page load by tens of seconds. Learn more.

Since I put it, the google code indicates it is not convenient to put: document.write()

[davex]

3 hours ago, xvids said:

Can someone please help for cookies with jquery

 

<input id="check1" type="checkbox" checked>

 

$(document).ready(function() {
if ($.cookie('kt_rt_skin') == 'yes') {
    
$('#check1').click(function() {
  $(this).toggleClass(function(){
    return $(this).is('.dark, .white') ? 'dark white' : 'dark';
  })
});

$("#check1").click(function() {
    
if($("#check1").hasClass("dark"))
  {
      $(this).removeClass($.cookie("dark")).addClass($.cookie("white"));
    
    window.location = "{{$page_canonical}}#skin=dark";
  }
else ($("#check1").hasClass("white"))
  {
      $(this).addClass($.cookie("dark"));
      window.location = "{{$page_canonical}}#skin=white";
  }
  $.cookie('kt_rt_skin', 'dark', {expires: 7 });
})};
});

 

Why put this code if from admin the expiration is already configured and all because?

[phseven]

How to have two different logos for each skin?

Example: black text for white skin css and white text logo for black skin css

 

 

[Tech Support]

1 hour ago, phseven said:

How to have two different logos for each skin?

Example: black text for white skin css and white text logo for black skin css

 

 

Link logo image from CSS file via background-image property, so that white CSS will link white logo, and black CSS will link black logo.

Theme uses <img src="logo.png"> by default, but you can change this to <div id="logo"></div> + background-image in CSS files.