Post Featured Image

Designing & developing a premium LightCMS theme

Time and time again, we have received the same requests from dozens of LightCMS resellers looking to purchase premium themes for LightCMS. Earlier this year we decided it was time to address this obvious need and developed our first premium LightCMS responsive theme we call FreshStart.

Here is an overview of how we approached LightCMS theme development.

FreshStart is the culmination of months of rethinking what it means to run a site on LightCMS. The goals for the theme were simple – make it extremely clean and visually attractive, take advantage of all of LightCMS’s core functionality, expand upon that functionality where necessary, and above all retain the ease-of-editing that LightCMS has become famous for.

Planning & Wireframes

The first decision to make was what type of theme to develop. Lots of niche ideas were tossed around for different markets, but in the end we felt it would be most appropriate for our first theme to be general purpose to best showcase everything that can be achieved with a little ingenuity and out-of-the-box thinking.

Normally when designing a custom website one of the beginning steps would be to wireframe all of the templates necessary to best present a user’s content. In a general-purpose theme, however, it’s difficult to know exactly what specific content a user may have. Since our grid system is extremely flexible, we felt comfortable largely skipping this step and started focusing on the design immediately.

Design

Clean lines and lots of whitespace were the main guiding principles in the design of FreshStart. Too many CMS themes these days are based on whiz-bang features and unnecessary aesthetic embellishments, and we wanted to provide a clear message to our current and future customers – content and functionality will always take precedence over pure aesthetics.

Stripping away the desire for all unnecessary ornamentation left us with a smart, simple design that we are extremely proud of.

Code

FreshStart source code

We wanted FreshStart to be fully responsive, and that meant dissecting every aspect of the CMS and its default element styles (which, with the exception of single image elements, are inherently not responsive). Starting with a LightCMS-integrated version of Zurb Foundation, we sprinkled in lots of extra styling and functionality (for features like responsive web forms, large photo gallery thumbnails, and randomized testimonials) to create a LightCMS theme unlike any you’ve seen before.

Testing

Building a product isn’t all sunshine and rainbows. Testing is an ugly and boring – yet necessary – part of creating a reliable theme. I’m a big fan of BrowserStack and we used it extensively during this phase of development.

Documentation

The most important part of a DIY website product like a theme or plugin is quality documentation. Including all the features in the world isn’t going to matter if a user doesn’t know how to use them – or worse – doesn’t even know they’re available!

Extensive documentation for FreshStart covers everything from installing and upgrading to making your own custom CSS modifications. It’s something I’ve worked hard on and continue to expand as feature requests come in.

Why we chose to theme for LightCMS

We’ve used a lot of content management systems for our clients throughout the years but never before explored the possibility of releasing a theme on those systems. There’s certainly a market for those other platforms, but there are a few particular benefits to theming for LightCMS that drew me in.

A limited set of modules and CMS functionality

When creating something from scratch, I often find that I’m much worse off when given little direction versus having a specific set of guidelines laid out before me. I spend too much time spinning my wheels evaluating the options instead of just tackling the task at hand. No one wants to make the wrong decision about what to include or focus on, and I’m a prime example of someone who suffers from analysis paralysis.

With LightCMS being a proprietary solution we can’t extend the server-side system functionality beyond what’s provided, so we’re immediately given a set of constraints within which we must work. With those constraints in mind, the path to creatively expanding around them becomes much clearer as the line is drawn in the sand between what we can achieve and what simply isn’t possible.

Design editor integrationDesign editor

When building a theme, customization is at the forefront of the developer’s mind. The design editor is a great tool that allows us to put the power of custom CSS in a user’s hands – without them having to change a line of code.

Page-specific settings

Every page in LightCMS has a multitude of settings that can be applied to it. Two of the most useful when developing a theme are the “Body CSS Class” and “HTML head” settings.

Body CSS Class allows us to tell the template that we’d like this page to take advantage of a particular style or set of functionality that is available globally throughout the theme. An example from FreshStart is the fullScreenHeader functionality – just add that class to the homepage and now your gorgeous header photo will expand to fill the screen – no extra coding or separate templates required!

HTML head is equally useful, but it’s usually reserved for functionality or customizations that will only take place on a single page. We don’t often use it in development of the theme itself, but it provides a useful way for users to enhance functionality without having to modify the core theme.

Extensive CSS class hooks

Each element in LightCMS generates HTML markup with extensive (and predictable) class hooks that allow us to style and manipulate output to our specific needs. A custom theme like FreshStart benefits enormously from this by being able to anticipate the structure of the data we’ll be styling and enhancing with custom JS functionality.

Apply CSS class dropdownWYSIWYG editor integration (For applying custom styles)

One of the most useful LightCMS features to a theme developer is the ability to reach into the WYSIWYG editor and add custom styling options with the Apply CSS Class dropdown. This gives content administrators a point-and-click way of applying custom CSS classes to their content that the theme may then style as necessary.

In FreshStart, for example, we’ve included styles to manipulate text sizes, insert buttons, control content visibility across mobile devices, and add animations to any piece of content.

FTP Access

Only a handful of hosted website systems support FTP and LightCMS is one of them. This makes it extremely easy to publish templates to a staging site during development and quickly see how they’re performing.

LightCMS features that benefit resellers using themes

LightCMS doesn’t make things easy on theme developers alone, though. Several unique features enhance the reseller experience of using a LightCMS theme.

LightCMS source code editorSource editor (for editing themes to suit your client)

LightCMS’s recently updated source code editor is state-of-the-art for a hosted CMS platform. It makes quick work of small HTML, CSS, and JS modifications without requiring the reseller to access these files via FTP.

Revisions

Make a mistake in the source editor or accidentally overwrite an important theme file? A quick glance into the file’s revision history (accessible via the source editor) is all that’s needed to go back in time and restore the original contents.

Site duplication for easy staging sites

With a properly licensed multi-use theme like FreshStart, the enterprising reseller can create a boilerplate site to use as a foundation for quickly scaling up new sites using a theme.

Other perks for building sites with a premium LightCMS theme

These features are inherent to any quality CMS theme, but we’re proud to finally be bringing them to LightCMS:

Decreased setup cost

A premium LightCMS theme costs a fraction of a full custom site development, and with native Design Editor integration you likely may not need to touch a line of code. Even when there is a need to pay for customizations you’ll come out thousands of dollars ahead.

Decreased development time

Resellers can crank out a new site for a client much more quickly when opting to use a LightCMS theme. A good premium theme also goes the extra mile to anticipate various use-cases and template layouts, meaning the end client is paying the reseller for their consulting expertise or niche domain knowledge and not for coding templates.

Lower ongoing development costs

As features and bug fixes are added to a theme, any site running that theme can be effortlessly upgraded to the latest codebase in just a few minutes. Being built on a flexible CSS framework also means that themes can easily be extended and customized with less time and expense.

Have you considered building or designing a theme?

Through LightIgnite, we’ve worked with a large number of extremely talented LightCMS designers. Knowing the beautiful work they’re capable of bringing to the world, I don’t want the theme development opportunity to be limited to those with a background in coding. That’s why I’m proud to announce that we’re now accepting applications for our LightIgnite You Design, We Code (YDWC) program.

With YDWC, we’re bringing the power of our experienced LightCMS development team to your designs – and splitting the profit with you. If you’re a talented designer or design team we’d love the opportunity to work with you to turn your ideas into amazing LightCMS themes that provide a recurring, passive source of income for your business!

A bright future is in store for LightCMS themes

We’ve had a great experience building themes thus far, but the party’s just getting started. With FreshStart, we’ve provided a glimpse of what’s possible when you combine LightCMS and creative thinking. The door is now wide open and an active community of resellers is ready for more. Whether it’s through your own development team or in partnership with LightIgnite through You Design, We Code, I encourage you to explore what’s sure to become a prominent part of the LightCMS experience.

About the author

Denny is the founder of LightIgnite, a valuable resource dedicated to helping LightCMS resellers build amazing websites. With the power and flexibility of LightCMS, he has been exceeding customer expectations since 2008.

Tags

Archive

Try it today. It’s Free.

Takes less than 60 secondsNo commitmentNo payment information required

Get Started