update Restyling of the default theme

[Tech Support]

We are happy to announce that we finalized restyling of our default theme. Our main goal was to keep template and HTML structure intact and only affect CSS files, so that everyone can update.

This post summarizes how to update and what are the implications.

 

NO WARRANTY WARNING

Please note that theme update is not the same as KVS version update. In theme you may have updated your templates, added new features, changed existing styles and etc. customized the default theme look and behavior you've got after the initial installation. Therefore there is no way to guarantee that this procedure will go smooth for your project. You are doing this at your own risk.

What is affected by this procedure:

• You will lose your style customizations if any.
• You will lose JavaScript customizations if added them to minified files (main.min.js and main.deps.js).
• If you've added any new features in templates, they may stop displaying correctly with the new styles. You may need to adjust new styles to support your new theme features.

What is NOT affected:

• Any text customizations are fine.
• Any SEO customizations are fine.
• Any advertising is fine.
• Any custom logo image is fine, but it may be rendered incorrectly with the new styles.
• Theme behavior is not changed, only rendering is changed.

In order to reduce risk, make sure you backup the following folders locally:

/js
/styles

In general if you only changed logo, advertising and SEO texts - you are good to go and should not experience any major issues.

 

Who can update

This update is designed for KVS default theme. If you are using another theme, you can't apply this update, it will break your theme functionality! No need to update if you already have theme version 5.3 or above!

Please go to Website UI -> Theme settings and check your theme name and version there. If it shows KVS Default 4.1 or above, you can apply this update. Otherwise please don't do.

 

Update procedure

Upload the contents of kvs_default_theme_new_styles folder from this archive on top of your project:

https://kernel-scripts.com/updates/kvs_default_theme_new_styles.zip

IMPORTANT! Please make sure you are NOT USING sync functionality in your FTP client, which will delete many files on your server, because obviously update archive contains only part of all files. What you need is just to drag and drop files from kvs_default_theme_new_styles folder on top of your project root folder and confirm their re-writing.

Once uploaded, it should switch to the new style. If you don't see any changes, refresh your browser's cache (Ctrl + F5).

If your logo image had another size than original KVS logo, it may be truncated. Then you should update sizes in this style (/styles/all-responsive-metal.css or /styles/all-responsive-white.css file depending on which theme skin you are using):

.logo a {
 display: block;
 width: 181px;
 height: 42px;
 background: url("../images/logo.png") no-repeat;
}

 

If your video thumbs have another proportions than default, you will also need fixing padding-bottom % in these styles (/styles/all-responsive-metal.css or /styles/all-responsive-white.css file depending on which theme skin you are using):

.list-videos-screenshots .img,
.list-videos .img {
 width: 100%;
 padding-bottom: 75%;
 -webkit-backface-visibility: hidden;
 backface-visibility: hidden;
}

 

.list-playlists .img {
 width: 100%;
 padding-bottom: 75%;
 position: relative;
}

 

You can find your new percent by using the following formula: thumb_height / thumb_width * 100%. You can specify percent with decimal values if needed, e.g. for 16:9 video it will be 56.25%.

Please do not break CSS syntax when adding changes. Other than that you should not experience any issues.

 

Aside advertising on video / album / playlist pages

Old theme used 315x300 size for aside advertising on content pages. The new theme reduced size to 300x250.

If you have advertising there, please change its size to 300x250.

 

New video screenshot size

Old theme style used small 180x135 screenshot size. The new style will still use the same screenshot images as before, but they will be ugly upscaled due to bigger thumb rendering. It is recommended to create a new screenshot format with the size 320x240 (Settings -> Add screenshot format). If you don't know what you are doing, please use all options by default and simply specify 320x240 as Title and Size - the only 2 empty required fields.

WARNING! If you have a lot of videos on your site, creating a new screenshot format may take days and even weeks and all new content processing will be paused.

When you save the new format, it will create a background task (Administration -> Background tasks) and you will be able to follow its progress %. If the task ends with error, please create support ticket. When the task disappears, it will mean that it was finished OK and now you can switch theme to a new format.

Go to Website UI -> Theme settings and switch to a new format in these options:

• Videos thumbs format
• Playlists thumbs format (if available)

After that you should see that all thumbs are displayed nicely. For saving disk space and CPU resources you can remove 180x135 screenshot format if you don't need it for any reasons.

 

Adding HD icon

This is something that was not supported by the original templates, but new styles allow this, so you can update template if you want.

Please go to Website UI -> Page components -> include_list_videos_block_common.tpl and add this line:

{{if $item.is_hd==1}}<span class="is-hd">HD</span>{{/if}}

As shown on the image under <div class="img">:

 

Troubleshooting

If you see any major issue, make sure you refreshed your browser cache several times (Ctrl + F5). If this doesn't help, restore /styles directory from your local backup copy.

You can order KVS update service and we will try to do this update procedure for you:

https://www.kernel-video-sharing.com/en/services/#update

Please provide FTP details and information that you want to update to a new theme style in support ticket.

[Tech Support]

Added section about aside advertising on content pages.