You are visiting the High Monkey blog archive. Posts prior to 2016 may not meet accessibility standards. Please visit our current blog area at https://www.highmonkey.com/blog to view accessibility compliant blog posts published since January 1, 2016.

Kentico Quick Tip

CSS Stylesheet Bookmarks

Written By: Virgil Carroll
Posted: 9/7/2015

Working with Kentico for as long as I have you would think I know every aspect of the interface.  Where I would love to say that is true, Kentico…like most complex systems…have many features I have never touched and many that I never will.  So much like everyone else, unless it is something I was used to doing in prior versions of Kentico or in other parts of my professional career, I tend to learn as I go.  These posts are my effort to share some of the things I have learned along the way with the rest of you.

One of the big advantages to a system like Kentico is the ability to store stylesheets, script files and assets natively inside the environment.  This is very efficient because Kentico has built in mechanisms to ‘minimize’ these files on the fly and provide the small file size possible for optimal performance.  Where this is of great advantage, one of the frustrations I run into often is how clunky the built-in interface for editing existing stylesheets and script files is.  Where this is definitely not just a Kentico issue, web-based WSIWYGs (including code-based ones) are still far behind their offline counterparts such as Dreamweaver, Visual Studio, etc..  So where I wish I could give you a quick tip on how to make these system better, instead I will give you a quick tip that will at least make your overall life a lot easier.

During a recent project which required some deep diving into the documentation I happened to run across an interesting tidbit that was hard to understand, but once I did it made my (and my staff’s) life much easier.  If you are often like us then in building a complex website you tend to have CSS Stylesheets that because immense in size.  The intricacies of balancing today’s design aspects across a responsive design environment often requires us to increase the amount of case specific styles that need to be created.  As the stylesheet grows in size, so does the frustration of trying to constantly find the right class to edit during the final production.

In enters the obscure little feature in the CSS code window called bookmarks.  Bookmarks allows you to put...umm bookmarks throughout your style sheet document and easily navigate through them.

The image below represents a pretty typical stylesheet for a project we might do.  You should note that while there are around 4-6 styles that are visible on the screen, there are over 1900 lines of styles in the stylesheet.  You can imagine how long a person, even one who is organized, can take to constantly sift through the style list to find that exact one which needs editing.



In the second image below you see a good example of the power of bookmarks, which allow you to jump around to different sections of the stylesheet for easy navigation.

The #1 below shows the toggle button which can be selected to show the bookmark panel (it should be noted this exists on every code editing interface throughout Kentico but the CSS screen appears to be the only one it works with)

To add a bookmark follow the example of #2.  Just like a typical comment block in CSS except adding the addition of the hash / pound sign at the start and end of the string block.

To get the bookmarks to appear you must save your CSS stylesheet.  Once saved you will see the right side block fill with bookmarks like #3.  Bookmarks are listed in alphabetical order (I have not found a way to change this) instead of order of placement in the document, so you will want to consider that in your planning.



So there you have it…something simple and easy to implement but provides a lot of time savings and decreases the frustration for all.

To read about this in the Kentico documentation, visit here https://docs.kentico.com/display/K82/Configuring+the+code+editor  

Chad's Bio Coming Soon!

More About Virgil

Virgil Carroll is the owner and president of High Monkey – based in Minneapolis Minnesota. Virgil also wears the multiple ‘hats’ of Principle Human Solutions Architect and SharePoint Architect.

Virgil is one of those rare individuals who can dive deep into technical topics while speaking clearly to the business owners of a project and never forgetting that the end user experience has the highest priority. He calls it using both sides of his brain. Virgil is passionate about leveraging technologies ‘out of the box’ as much as possible with a focus on the strategic use of content to create websites that deliver the right content to the right audience on the right device at the right time. Virgil brings high energy, an ironic wit, and a sense of grounded perspective whenever he speaks to an audience. Virgil regularly speaks at conferences and user groups throughout the United States and occasionally in Europe.

Posted: 9/7/2015 12:00:00 AM by Brian Haukos | with 0 comments