When I started out building Galaxie Blog, my initial goal was to create the most beautiful and themeable blog software for the ColdFusion community. In Galaxie Blog version 1, there were a dozen themes and nearly every aspect of the blog takes on the characteristics of your chosen theme. In Galaxie Blog 3, we have continued this tradition. 

Galaxie Blog now has around 30 prebuilt themes. I have spent a great deal of time ensuring that nearly every widget matches the selected theme. For example, if you upload a video the primary color of the play button will match your theme. Even a dynamic map route will match the primary color of your theme. You can also construct a post with the theme in mind and upload an image that matches your background theme.

You can have as many themes as you want, or design a single theme, but you should first choose a default theme from which to start with. Every theme is easily changed using WYSIWYG interfaces. The theme settings allow you to change the site appearance, for example, you can change the icons, backgrounds, fonts, and even the way that the columns are generated. There are nearly 40 different theme settings, and these settings have a dramatic impact on the site's appearance. 

When first creating a theme, it is far easier to start with a theme that is already built-in. Before going further you should acquaint yourself with the themes that already exist. All of the themes can be viewed by clicking on the Themes dropdown at the top of the page. Every theme takes on certain characteristics found in the 14 Kendo Themes.

Understanding the Kendo Core Less Based Themes

If you already know the Galaxie Blog theme that you want to start with, you don't have to read this part of the article. However, the Kendo Theme is important theme consideration so you may want to at least skim this section.

The open-source Kendo Core package that we are using is shipped with 11 different Less-based themes. I have personally incorporated a few more.

Telerik, the company that provides the open-sourced version of Kendo Core, is moving away from using Less themes and transitioning towards SASS-based themes that Kendo Core does not yet support. I will stray abreast of the new developments and will migrate Galaxie Blog to the new SASS based themes if and when there is official Telerik open source support. For detailed official information on the Less themes please read the Telerik documentation at https://docs.telerik.com/kendo-ui/styles-and-layout/appearance-styling.

I have also dissected each Kendo Less theme extensively and have developed ColdFusion-based tools to modify the theme properties. I will write more articles on how to change the default Kendo Less theme properties in the future.

Below are some appearance screenshots of the different Kendo Less themes. Compare these images when looking at the Galaxie Blog themes to get an idea of the Kendo theme's appearance. You can also sort the Theme grid by the kendo Theme to determine the underlying Kendo theme that each theme uses.

Editing an existing Theme

There are scores of settings that can be independently applied to each theme. These settings are applied using the Theme Interface. The theme interface is broken into nine different sections that organize the different theme settings.

It is safe to be curious and investigate these settings. If you make a mistake, you can always restore the default settings.

Main Theme Settings

1. Theme Name
   
   You can select your own theme name when creating a new theme, or override an existing theme. 
   
   
2. Use Theme
   
   The default setting is set to true for every theme. When this checkbox is checked, the theme will appear in the Themes dropdown at the top of the page and will be available to be assigned to a particular post. 
   
   
3. Select Theme
   
   When this checkbox is checked, the current theme will be the default Galaxie Blog theme and the theme menu at the top of the page will disappear. However, any themes that have the use theme checkbox checked will still be available to assign to a particular post.
   
   
4. Kendo Theme
   
   The Kendo Theme controls the look and feel of the interfaces that are used by the Galaxie theme. You can modify the Galaxie Blog and change the underlying Kendo theme, but be aware that all of the default Galaxie Blog themes are designed with a Kendo theme in mind. See the Kendo Theme section above for more information.
   
   
5. Dark Theme
   
   This setting changes the appearance of the theme to handle dark backgrounds. This should be checked if this theme uses a dark background.

Blog Theme Style and Column Display

These theme settings determine the column layout of the blog.

1. Main Content Width
   
   This setting requires some elaboration.
   

   The main content width sets the width of the main container. This setting will either increase or decrease the blog content depending upon your setting.

   The main content width will dynamically be adjusted depending upon the client's screen resolution. When the monitor is quite wide, the main content width will be set to a smaller percentage, conversely, when the monitor is smaller in width, this width will be automatically adjusted to take more screen real estate.

   This is done as you want to have a similar content width across various monitor sizes. The baseline content width that you set will be targeted at a screen resolution between 1700 and 1920 pixels wide.

   You should set the main container width to at least 45% when using the modern theme style, or 66% when using the classic style as you will have extra content on the right side. Setting it larger will stretch the main container across the page making the blog content more cumbersome to read. Generally speaking, the main blog content should be no more than 140 characters wide and focus the content in the center of the page.

2. Blog Theme Style
   

   Your choice here will dramatically affect the blog display.

   The Classic theme style displays the column on the right of the blog containing various information pods, such as the categories, recent posts, comments, etc. This layout appears dated, but can be useful if you want to include visible advertising on the right side of the page.

   The Modern theme style eliminates the visible panel, however, this information is still accessible by clicking on the hamburger at the top of the site. The Modern theme style is attractive and keeps the blog content center stage.

   
3. Site Opacity
   
   Site Opacity allows the blog background image to be faintly shown behind the containers on the page. On some themes, I set the opacity level around 93% in order to allow the users to see a hint of the background image. For a cleaner look, especially on flat designs, you should set the opacity to 99% to eliminate background image ghosting.

Theme Fonts

Galaxie Blog has over 100 fonts that are available. However, if you need to support a different font set, upload new fonts using the Font Interface. The font will be previewed in the dropdowns when selecting a font so that you can see what you're selecting. 

The following font choices are available in the theme interface:

1. Title Font
   
   The title font is the font of the blog title. My blog title is Gregory's Blog.
   
   
2. Title Font Size
   
   Changes the font size of the blog title.
   
   
3. Top Menu Font
   
   Sets the menu font choice. In Galaxie Blog, the menu font contains Menu, About, and Themes.
   
   
4. Body Font
   
   Sets the font for everything else. The body font should be easy to read.
   
   
5. Desktop Body Font Size
   
   Sets the font size of the body on desktop devices.
   
   
6. Mobile Body Font Size
   
   Sets the font size of the body on mobile devices.

Logos

1. Desktop Logo
   
   The logo for desktop or large devices. Clicking on the Desktop logo form field will open up the tiny image uploader. You can use this uploader to upload and edit your logo image. My logos are 133 by 100 pixels.
   
   
   
   
   
   
2. Mobile Logo
   
   The logo for tablet and mobile devices. Clicking on this form field will also open up the tiny image uploader. You can use this uploader to upload and edit your logo image. My logos are 60 by 60 pixels.
   
   
3. Default Logo for Social Media
   
   The default image that you want to be shared to social media sites when your post does not have an enclosure image. Clicking on this field will open up the tiny image uploader. This image should be much larger than your site logo and is recommended to be 900x900 or 1200x1200. 
   
   
4. Mobile Logo Width
   
   Specify the width of the mobile logo. This can be exaggerated if you want more space between the logo and the content.
   
   
5. Logo Padding Left
   
   Used if you want to nudge the horizontal placement of the mobile logo. Enter a value in pixels.

Backgrounds

This section allows you to apply background images or background colors to your theme. 

1. Include Background Images
   
   Select yes If you want to apply a background image to your theme. You may not want a background image if you want a solid color or if you want the site to load quicker.
   
   
2. Blog Background Color
   
   If you selected no above and don't want blog background images, you may select a hexadecimal blog background color using an HTML5 color picker.
   
   
   
   
   
   
3. Desktop Background
   
   Upload or edit the background for desktop devices. This image should be compressed. This image should be at least 1200x1200. Opens the tiny image uploader.
   
   
4. Mobile Blog Background
   
   Other than the image size, same as above, but for mobile devices. My typical size for the images is 980x980.
   
   
5. Blog Background Position
   
   The blog background position must contain CSS to position the background image on the page. This is useful if you want to nudge the image around the page. See https://www.w3schools.com/cssref/pr_background-position.asp or search for the background-position CSS property for more information.
   
   
6. Blog Background Image Repeat
   
   The blog background image repeat must contain CSS to determine how a small background image will be repeated if can't fit the dimensions of the page. You can create interesting checkered tile designs that consume very little resources. See https://www.w3schools.com/cssref/pr_background-repeat.asp or search the web for the background-repeat CSS property. Unless you're after a tile-based design, it's suggested to leave this setting at 'no-repeat'.
   

Blog Title

Use this setting to apply a hexadecimal color to the blog title using an HTML5 color picker widget.

Header

1. Header Background Color
   
   This is used when sending out branded emails. The Header Background Color is used to cover a portion of the header image when sending out an email. It allows for the top portion of the page to match the webpage and be highlighted with the logo. If you're using a white background, you should leave this setting blank. Uses a color picker. 
   
   
2. Header Background Image
   
   Upload or edit the header background image using the Tiny Image Uploader.
   
   The Header Background Image is at the top of the page and it covers the menu items. If there is ghosting on the menu after changing this, make sure to use the same image here as the Menu Background Image found in the Menu section below. This ghosting will only occur with headers that contain a gradient and should not be used when creating a flat theme. 
   
   
3. Header Background Divider Image
   
   This is used when you want to create an interesting divider image that separates the header from the blog body. I am not using this image on any of my own themes. Clicking on this field opens up the Tiny Image Uploader.
   
   
4. Stretch Header Across Page
   
   This checkbox should be checked if you want the header to take the entire width of the page. 

Menu's

1. Align Menu with Blog Content
   
   When checked, this setting aligns the menu with the blog content. The default is yes.
   
   
2. Menu Background Image
   
   The Menu Background Image is used to cover a portion of the header image when there is ghosting that occurs after changing the Header Background Image. This is generally not used unless there is a gradient on the header. It is advised to use the same image that you used for the menu background image to remove the ghosting. Clicking on this field opens up the Tiny Image Uploader.
3. Cover Menu with Background Image
   
   When checked, the background image will be shown behind the menu items.
   
   
4. Top Menu Align
   
   Aligns the menu. Values are left, center, and right.

Footer

Allows you to upload or edit the image shown in the footer. Opens up the Tiny Image Uploader.