Gregory's Blog

Theme Settings in the administrative web interface.

There are quite a few different theme settings in Gregory's blog. The themes are set using the Blog Settings page in the Blog administrative interface. I will briefly go over each new setting here. I will also create a how to document in the future to better document these features. It it safe to play around with these settings. If you make a mistake, you can always reset the default settings for the particular theme by clicking on the 'reset themes' button at the bottom of the settings administrative page.

  • Notes: this blog is highly optimized for mobile, and some of these settings will not apply. I have indicated what settings are not available to mobile devices in the notes section below.
  • The following three settings are global, and affect all themes.
    1. Parent Site Name and Link: The parent site name and parent site link form elements controls the behavior of the menu found at the top of the header. It allows the user to add an option in the menu that links to their home site.
    2. The 'Parent Site Name' will display the title of the site within the menu. On my site, the text is 'Gregory Alexander - Web Design'. The 'Parent Site Link' can be any link to another site. The link is triggered when a user clicks on the menu option. On this site, the link is www.gregoryalexander.com.
    3. 'Default Font Size' will set the font size for the blog content. You can choose any value between 8 and 26 points. Note: the 'Default Font Size' will not change the size of the text in the header. I manually set the header text to be at 16 point in the menu on desktop devices, and 12 points for mobile devices.

    All of the settings below can be set by theme. Each theme operates independently, and can have its own unique settings. You can modify up to 14 unique themes.

    1. The 'Modify Default Themes' checkbox is used when the owner of the blog is ready to modify the default themes. Until this button is checked, the site will operate as it is intended here, with the default settings intact.
    2. The 'Kendo Base Theme' allows the blog owner to review all of the default blog settings. Blog owners can look and see where the current images are stored, what library paths are used, and determine the element properties of the containers on the site. It is recommended that you browse the existing themes, and choose the theme that is closest to the theme that you want to create. In order to modify a theme, click on the default theme that you are interested in, and modify the settings that are displayed in the form.
    3. 'Kendo Theme .css Location' (string): if you want to create your own Kendo less based theme and replace the existing .less based theme, use the Kendo Theme Builder to modify the base theme, upload it, and change the default path and point it to the new .less file that you created using the Kendo theme builder.
    4. 'Kendo Mobile Theme .css location' (string): when you create your own Kendo theme, make sure to also specify the new path of the mobile theme as well.
    5. 'Custom Theme Name' (string): provide the theme name that you want others to see when they look at your own site.
    6. 'Dark Theme' (true/false): Gregory's blog has built in logic to pull in different resources depending upon the overall color of the theme. If the theme has a dark background for example, Gregory's blog will pull in a different version of the code highlighter. There are quite a few different adjustments that are made, but it is up to you to determine whether Gregory's Blog should adjust it's logic for to adapt to a light or a darker screen background. You can see this in action by comparing the following two default themes: Blue Wave (a light theme with dark text) and Blue Wave Dark, a dark theme with white text.
    7. 'Blog Content Width' (numeric): The current blog content is set at 66% of the screen and should be left at this setting unless you set it much higher. When you're looking at the blog, you can see that the blog content portion in the center of the screen. The blog content section may contain the header (we will go over this later), the blog content that contains the blog posts, the side bar to the right which contains the links to the various parts of the site (such as the subscribe interface), and the footer. The blog owner can adjust this as they see fit, they can set it to 100% if they don't want any background image at all. However, unless you want to set this quite a bit higher, it is strongly recommended to leave this particular setting at 66%. If this setting is set at 66%, the background width is programmatically optimized and will change depending upon the screen width of the device. Note: this setting has no effect on mobile devices.
    8. 'Main Container Width' (numeric): the main container holds all of the blog posts. It is currently set at 65% of the Blog Content Width (see above). If you set this higher, or lower, the side bar (also known as the 'pod width') to the right will also be adjusted accordingly. This setting has no effect on mobile devices. Note: the 'Main Container Width' plus the 'Pod Container' width will always equal 100.
    9. 'Pod Container Width (numeric): the pod container is the section to the right of the main container. It contains the subscribe interface, tags, recent posts, etc. The current setting is set to 35%, but you can adjust it as you see fit. Notes: if you change this setting, the Main Container Width will be adjusted accordingly. This setting has no effect on mobile devices. The 'Main Container Width' plus the 'Pod Container' width will always equal 100.
    10. 'Opacity' (numeric): If you look carefully at the site, you can see a faint trace of the background image underneath. I prefer this look as it creates visual interest. The opacity settings are different depending upon the theme, but you can change this setting to your own liking. You can set it at 100% to eliminate the opacity, or set it lower than the current setting if you want the background to bleed through.
    11. 'Background Image' (string): enter the absolute path to the image that you want shown as the background image for the desired theme. If you prefer the look of a clean site without any background, or don't want any background at all, leave this blank. Additionally, you can specify an image that will create a background pattern, and use the next variable, 'Background Image Repeat .css', to create a unique pattern as a background.
    12. 'Background Image Repeat .css' (string): you can use any valid background image repeat .css. This was built into the themes as a blog owner may want to create sophisticated pattern objects for the background.
    13. 'Background Image Position .Css' (string): setting your favorite background 'hero' image using the default 'center center' is not always the best approach. The background image position rule allows you to set the background image to exact coordinates to make sure that it looks good on all screen sizes. See background position for more information.
    14. 'Stretch Header across Page' (true/false): if you want your header to consume the entire width of the page, set this to true. The default setting is false. On mobile devices, this setting is automatically set at 100%.
    15. 'Align Header with Content' (true/false): the default setting is true for all of the current default themes, but setting this to false allows the header to be set at the far left or right of the page, or the absolute center. Leaving this to true adjusts the size of the header to fit the width of the content width (see Blog Content Width).
    16. 'Header Background Image' (string): currently, I use simple images with various gradient fills that are used as the header background. You can set the header background to use any image. You can get creative here, perhaps you want an image that is filled with a pattern, or a header that displays lots of floating bubbles, it is your call.
    17. 'Menu Align' (left, center, right): you can align the header to the left, center, or right. Use this in conjunction with the 'Align Header with Content' or 'Stretch Header across Page' properties to create the look that you like.
    18. 'Cover Menu with Menu Background Image' (true/false): this setting is a bit complex. For my personal 'Zion' and 'Orion' themes, I wanted a the color scheme on the menu to match the color scheme of the background images and the .less theme file that controls the forms and widgets. In order to have the selected menu item match the orange color scheme, I 'covered' the Kendo menu with the background image that I used on the header with .css. This setting allows the menu background image to be shown within the Kendo menu itself. All of the other current themes have this setting set at false. Setting this to false should be sufficient in most cases; the menu is already tailored to the .less based theme that is set. However, there are reasons that a blog owner may want to set this to true on occasion. For example, if a blog owner creates a menu image with a lot of little floating bubbles, setting this to true will also allow the menu items to show these little bubbles as well.
    19. 'Mobile Logo Image' (string): You will want your mobile logo image to be much smaller than the logo image for desktop devices. Enter the absolute location of the image.
    20. 'Mobile Logo Image Width' (numeric (pixel width): this typically is set to be 60 pixels or less.
    21. 'Desktop Logo Image (string): enter the absolute path pointing to the location of your logo that will be shown on desktop devices.
    22. 'Logo Padding (top, right, bottom, left)': you can fine tune the logo placement with these settings. The default settings are left at 0px.
    23. 'Blog Name Text Color' (hexadecimal string): this setting controls the text color of all of the items in the menu. Use any valid hexadecimal or valid HTML color value. If using a hexadecimal value, make sure to put a pound in front of the hexadecimal string it as well.
    24. 'Header Divider Image' (string). This is the horizontal image divider that separates the header and the blog content, and the blog content and the footer. Currently, it is a little grey bar, but you can design your own and specify it here using an absolute path.

      This entry was posted on May 22, 2019 at 9:56 PM and has received 42 views.

      There are currently 0 comments.

    Kendo Server Side Validation

    This post describes how to use Kendo's validator for server side validation. There are very few posts showing how to use Kendo's validator with server side validation (none of them are really clear), it took me a bit of time to figure it out, and want to share my approach and will provide extensive comments.

    One of the reasons that there are very few posts concerning server side validation with the Kendo validator is that it is not really built to do this. Unlike the majority of the other Kendo widgets which allow for customization, the validator was meant for simple validation. The built in validation is quite useful for simple client side validation, but it is not an extensive validation library and anytime that you need to extend it you will find yourself wanting more. I felt like I was trying to hammer a square peg into a circle while coding this. However, since one of the main goals of this blog is to share how ColdFusion can use the Kendo UI, I felt the need to dig into the kendo validator.

    I have a captcha form on this blog that is used to verify that the user is an actual user, and it encrypts a token and passes it off to the server side for validation. You can see this in action by making a comment on this post below.

    The meat and potatoes of this function, like most of the other Kendo widgets, lies in the Javascript. This script is heavily commented. Click the more button below to inspect the script.

    This entry was posted on March 1, 2019 at 5:34 PM and has received 51 views.

    There are currently 0 comments.

    Done with the draft version of Gregory's blog

    It is the first day of the New Year, and I am happy to say that I am done incorporating the features that I wanted into the new desk-top oriented blog. After working with Raymond's back-end code, I am quite impressed with the logic that it contains and how he anticipated functional logic, even though the logic was not used within the original BlogCfc UI. For example, the getEntries method allows passing in a string of categories when you are using the search interface, even though the original blogCfc only allowed one category to be selected at a time. With the new interface that I have programmed, I designed the search to use one or more categories with a Kendo multi-select drop down box. I had thought that I would need to revise Raymond's original getEntries method to allow one or more categories, but found out that I can pass more than one category value as a list. This is just how I would have designed this if I had the time, but Raymond already designed his function to be used for multiple arguments, even though the UI did not use that logic in the original interface. I also looked for various functions that I had thought to write, and I found them in Raymond's code-base, often with the same name that I would have used as if I had wrote them myself. I found Raymond's back-end logic both powerful and intuitive. It was a pleasure to use Raymond's back-end logic, and I am glad that I made the choice to use BlogCfc as the back-end when re-writing this application.

    I intend to work on getting my own personal site up, developing the responsive mobile blog, and then go through more testing before launching this new blog software. This is a part-time weekend project. I have a lot of other stuff vying for my attention, as well as being married, having kids, and a working a full time job; this may take several months.

    Gregory

    This entry was posted on January 1, 2019 at 11:04 PM and has received 33 views.

    There are currently 0 comments.




    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.