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.
- Introducing Gregory's Blog
- Theme Settings in the administrative web interface.
- Immediate steps after installation
- Installing Gregory's Blog on your own website.
- An open source version of Kendo Core is incorporated in Gregory's Blog
- Gregory's Blog default user name and password after fresh installation
- Social Media Sharing with Gregory's Blog
|July 2019 (3)|
|June 2019 (9)|
|May 2019 (7)|
|April 2019 (3)|
|March 2019 (2)|
|February 2019 (2)|
|January 2019 (2)|
|December 2018 (6)|
|November 2018 (1)|
|October 2018 (7)|