Gregory's Blog

Fine tuning your theme with Kendo Theme Builder

Gregory's Blog is built from scratch to be fully themeable, and using the Kendo theme builder in addition with the built in theme settings allows you to have full control over the look and feel of your own theme.

It was my goal to have dozens of themes and interfaces built into Gregory's Blog that would help to allow you to build a theme that you love- or to get you 95% of the way. If the theme does not perfectly match the look and feel of your site, using the Kendo UI Theme builder should be able to take you the rest of the way there.

The Kendo UI Theme Builder enables you to modify Kendo UI themes to perfectly match the look and feel of your website or application. Without scripting or using HTML, you will have complete control over the design of the buttons, backgrounds, windows, widgets, such as the calendar and HTML5 media player, dialog's, and even alternating color schemes with an easy to use interface.

To modify the .less based theme file, first preview and choose one of Gregory's Blog default themes that comes close to the look and feel of your site. The base Kendo theme can be found by either looking at the URL, or on the settings page in the administrative interface.



Once you jot down the name of your desired theme, head over to the Kendo UI Theme Builder.

On the far left of the interface, click on the Kendo theme that you have chosen. Here, you have hundreds of different options to choose from, but first start out by changing the accent and widget base colors. You'll notice that any changes that you have made will be shown to you on the right immediately. The first dozen or settings are important, you don't need to check out the series colors, most of these are for various charts. Investigate and set everything as you would like, and when you're ready, click on the download button at the top of the page.


After downloading the files and extracting the .zip file, you should see 3 different files: kendo.custom.css: kendo.custom.dataviz.json, and kendo.custom.less. Upload the two .css and .less files to your server. I suggest saving these two files in a new folder named 'myStyles' in the /common/libs/kendoCore directory, but you can save them anywhere on your server that you would like.
Note: you don't need to do anything with the .json file.



After uploading the file to your server, jot down the path that you uploaded the kendo.custom.css file to, and head over to Gregory's Blog administrative interface and click on the settings link.

In the settings page, look for the Customize Kendo Themes section. Click on the modify themes checkbox, and type in the path and file name that you uploaded the kendo.custom.css file to. Don't worry about the mobile theme location setting, the mobile settings should work with the custom .css file. Leave the rest of the forms as is, and click on the save button at the bottom of the page. You may have to iterate through the same steps again if you want to continue to dink around with the look and feel of the theme.



Happy Theming!

This entry was posted on June 28, 2019 at 6:42 PM and has received 171 views.

There are currently 0 comments. Download attachment.




Your input and contributions are welcomed!

If you have an idea, BlogCfc based code, or a theme that you have built using this site that you want to share, please contribute by making a post here or share it by contacting us! This community can only thrive if we continue to work together.

Images and Photography:

Gregory Alexander either owns the copyright, or has the rights to use, all images and photographs on the site. If an image is not part of the "Gregory's Blog" open sourced distribution package, and instead is part of a personal blog post or a comment, please contact us and the author of the post or comment to obtain permission if you would like to use a personal image or photograph found on this site.

Credits:

Portions of Gregory's Blog are powered on the server side by BlogCfc, an open source blog developed by Raymond Camden. Revitalizing BlogCfc was a part of my orginal inspiration that prompted me to design this site. Some of the major open source contributers to BlogCfc include:

  1. Peter Farrell: the author of 'Lyla Captcha' that is used on this blog.
  2. Pete Freitag: the author of the 'ColdFish' code formatter that is also used on this blog.

Version:

Gregory's Blog Version 1.1 July 14th, 2019.