Jump to content

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


Tech Support
 Share

Recommended Posts

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:

dynamic_parameters.png.ebe9a5e1e695c1625cca3da6c3efded9.png

 

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:

dynamic_parameters2.png.3f04a21f442c04009cbd18191f36828c.png

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=
 
  • Thanks 1
Link to comment
Share on other sites

  • 2 months later...
  • 2 weeks later...
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

Link to comment
Share on other sites

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 by xvids
Link to comment
Share on other sites

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 });

 

Link to comment
Share on other sites

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()

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

  • 4 weeks later...
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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...