LightIgnite https://lightignite.com Helping you create awesome websites with LightCMS Wed, 05 Apr 2017 06:37:21 +0000 en-US hourly 1 https://wordpress.org/?v=5.0 https://lightignite.com/wp-content/uploads/2016/12/cropped-favicon-150x150.png LightIgnite https://lightignite.com 32 32 Adding font sizes options back to the new text editor https://lightignite.com/adding-font-sizes-back-new-text-editor/ Thu, 09 Jun 2016 16:13:34 +0000 https://lightignite.com/?p=2589 Until the new text editor release earlier this week, there was a “font size” feature that allowed your clients a simple method for adjusting the size of any individual piece of text within their site. I’m personally not a huge fan of this functionality (because it introduces lots of non-standard formatting across the site) and was happy to see it go.

Many clients, however, love having this extra control. So much that several have written me to complain. And while I’ve voiced their opinions in the forums, most website owners are looking for a quicker fix than this discussion is likely to bring about.

The fastest solution I could think of was to implement similar functionality via the Class dropdown.

A step-by-step tutorial for adding font size options to your client sites

 

1. Enter the source editor and open one of the site’s CSS files

It doesn’t matter which specific file you edit as long as it’s something that’s loaded across the entire site and is not userstyles.css (which is dynamically generated by the design editor)

Design Editor

2. At the end of the CSS file, add new font size styles

They’ll go inside of texteditor comments to make sure the system adds them to the Class dropdown. You can, of course, modify or remove the styles to suit your client’s needs.

/* <textEditor> */
.font-size_25_percent{
  font-size:0.25em;
}
.font-size_50_percent{
  font-size:0.5em;
}
.font-size_75_percent{
  font-size:0.75em;
}
.font-size_125_percent{
  font-size: 1.25em;
}
.font-size_150_percent{
  font-size: 1.5em;
}
.font-size_175_percent{
  font-size: 1.75em;
}
.font-size_200_percent{
  font-size: 2em;
}


.font-size_12px{
  font-size:12px;
}
.font-size_14px{
  font-size:14px;
}
.font-size_16px{
  font-size:16px;
}
.font-size_18px{
  font-size: 18px;
}
.font-size_20px{
  font-size: 20px;
}
.font-size_22px{
  font-size: 22px;
}
.font-size_24px{
  font-size: 24px;
}
.font-size_26px{
  font-size: 26px;
}
.font-size_28px{
  font-size: 28px;
}
.font-size_30px{
  font-size: 30px;
}
/* </textEditor> */

Class Dropdown3. Head back to the nearest text editor

If everything was implemented properly you should immediately see the new styles in the Class dropdown menu.

]]>
Quickly hide LightCMS admin menus during site preview and development https://lightignite.com/hide-lightcms-admin-menus-during-site-preview/ Wed, 06 Jan 2016 12:57:07 +0000 https://lightignite.com/?p=2382 As a developer, one of the biggest headaches I run into on a regular basis is the admin menu and page bar getting in the way of previewing site functionality. If you’ve ever worked on a LightCMS site with a sticky header or other navigation components that show up near the top or right corner of the page you’ve likely run into this as well. It’s especially problematic when testing mobile sites while logged in on a desktop browser.

[efsnotification type=”” style=”” close=”false” ]In the past I’ve written about implementing advance styles to make site administration easier for your clients when the admin bar impacts site functionality. For the best long-term site administration experience, I still recommend enhancing your site this way before launch. This post just covers a quick workaround to use during initial site development.[/efsnotification]

I used to just open an incognito window in Chrome and preview the site that way, but this only works if the site is in its trial period or has been upgraded to a paid plan (otherwise you have to login to see the site). Recently, I’ve been using a handy bookmarklet I wrote to remove the admin menus from view. It’s been extremely helpful in my day-to-day development workflow.

To install it, save this page to your browser bookmarks bar and then edit the bookmark to rename it “Hide LightCMS Menus” and change the URL to:

javascript:(function(){document.getElementsByClassName('lcms_menus')[0].style.display='none'; document.documentElement.style.top="0"})();

Some might consider this an over-engineered solution to an admittedly minor frustration, but when you encounter it multiple times every day those inconveniences stack up into measurable lost productivity. Here’s to a happy, productive 2016 :)

]]>
A brief thought on white-labeling https://lightignite.com/a-brief-thought-on-white-labeling/ Thu, 10 Dec 2015 16:22:44 +0000 https://lightignite.com/?p=2262 I don’t ever mislead clients and pretend that we build the software that runs their site. There’s really no reason to – reputable companies all over the world use software, hardware, and equipment manufactured by a third party in their mission to service clients.

That said, I also don’t mention LightCMS by name when pitching our solution. If ever asked I simply say we have a third-party vendor that manages software and hosting so we can focus on building an amazing site. Only once in my 7 years of building LightCMS sites have I had a client inquire any further than that.

At the end of the day, when a client wants more details, I don’t hesitate to tell them that LightCMS is powering their site. If the client is confident enough to sign up for LightCMS and set up his own site then he likely wasn’t in very great need of our services in the first place.

The fear of the white label being broken is something that I have seen from other resellers yet never understood. I think as a group we tend to undervalue the technical expertise that we bring to the table and the other problems we are solving for our clients.

Embrace the white label, but don’t rely on it. If that’s your only competitive advantage, you’re doing it all wrong.

]]>
Stop selling LightCMS https://lightignite.com/stop-selling-lightcms/ Fri, 04 Dec 2015 05:59:24 +0000 https://lightignite.com/?p=2259 Since you’re reading this blog, there’s a pretty good chance you’re already sold on the fact that LightCMS is a great system to power client websites for your business. A perfect mix of design and content control creates an ideal environment for your clients to easily manage the website you build. This is the reason I chose to work with the platform, but it’s also the reason I want you to stop selling LightCMS to your clients.

I don’t at all intend for you to stop using LightCMS, rather I suggest that you quit focusing on selling websites based on its features. The first thing a client needs to know (and really the only thing most care about before hiring you) is that you’re capable of solving their larger problem: generating more leads and sales, growing their audience, etc via their website. The specifics of how that’s done (and the place where LightCMS features come into play) are part of a larger conversation that is most likely taking place after contracts have been signed.

I see a lot of LightCMS resellers advertising websites on DesignCoCMS (or whatever they’re calling their rebranded version of LightCMS) and listing out the features, plan limitations, and so on. In most cases this is done without even highlighting what these particular features might mean to a client of DesignCo. I firmly believe this is the wrong way to resell a product like LightCMS (outside of very specific niches).

If you’re selling LightCMS and I’m selling LightCMS and the guy down the street is selling LightCMS then we’ve all just turned ourselves into a commodity – a product or service that can be swapped out interchangeably with relatively little overhead and discomfort. If you’re selling a commodity you’ve got to be doing some SERIOUS volume, and I personally don’t have any interest in playing that game.

Instead, find out what makes you unique – the special sauce that makes your service better, at least for a particular client, than everyone else selling websites on LightCMS. Do you offer stellar support? Are you amazing at working with non-technical clients and helping them understand the web? Do you know the local market better than anyone? Do you work well with a particular niche? Are websites just one piece of a kick-ass online marketing strategy that you provide to clients?

If you don’t immediately know what value you add on top of LightCMS then that’s likely the root of a very large problem – and if it’s not showing itself today then it will sometime soon. When you don’t add value, there’s simply no reason someone would need to work with you over a self-serve platform like Squarespace, Weebly, or even LightCMS directly.

Stop selling LightCMS and you’ll immediately stop competing on features and price. The race to the bottom is an exhausting and unsustainable way to do business. Figure out your unique selling point and focus on that instead. I promise you’ll thank me later.

]]>
Improving mobile compatibility of the photo gallery lightbox https://lightignite.com/improving-mobile-compatibility-of-the-photo-gallery-lightbox/ https://lightignite.com/improving-mobile-compatibility-of-the-photo-gallery-lightbox/#comments Mon, 14 Sep 2015 14:53:12 +0000 https://lightignite.com/?p=1753 I’ve recently discovered that the mobile compatibility of native image gallery light boxes is broken. As you can see, large images extend beyond the bounds of a mobile phone’s screen:

Broken lightbox functionality

 

That’s the bad news. The good news is the fix is simple, provided you’re comfortable getting your hands wet with a small template modification.

Using the built-in design source editor, insert this snippet of code just before the closing

</body>
  tag in your site template(s):

<script>
  if(LCMS.jq('.photoGalleryElement').length){
    LCMS.jq(document).unbind("click.fb-start");
    LCMS.jq(".photoGalleryElement .thumbContents a").fancybox({
      fitToView: false,
      maxWidth: '100%',
      maxHeight:'100%',
      autoResize: true
    });
  }
</script>

The snippet doesn’t require any extra dependencies as it uses LightCMS’s built-in version of jQuery. It will check if any photo galleries are present and, if so, strip out the system-generated lightbox functionality. Then, using the exact same plugin, we reinitialize the light boxes with proper mobile configuration.

You’ll potentially need to update your CSS to style the new lightbox to suit your needs, but you should now see that your photos are no longer being cropped or extending off the screen:

Fixed lightbox functionality

]]>
https://lightignite.com/improving-mobile-compatibility-of-the-photo-gallery-lightbox/feed/ 2
Quicker access to global element embed tokens https://lightignite.com/quicker-access-to-global-element-embed-tokens/ Wed, 05 Aug 2015 18:22:50 +0000 https://lightignite.com/?p=1637 LightCMS recently released official support for global elements, an improvement I was thrilled to see. We’re still exploring the functionality internally and will have more to report soon, but for now I wanted to leave you with a quick Chrome Extension I wrote this morning to make accessing the element token just a bit faster.

This extension simply grabs the element’s global ID and wraps it in the required token syntax, inserting it into a input field where it can quickly be selected and copied. It’s nothing revolutionary, but it will certainly save you a few precious seconds every time you need to implement a global element.

Free Download

]]>
Designing & developing a premium LightCMS theme https://lightignite.com/developing-premium-lightcms-themes/ Tue, 04 Aug 2015 12:27:10 +0000 https://lightignite.com/?p=1539 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.

]]>
Developing around the LightCMS admin bar https://lightignite.com/developing-around-the-lightcms-admin-bar/ Wed, 27 May 2015 19:38:59 +0000 https://lightignite.com/?p=929 In the past, we’ve discussed how you can style certain areas of your LightCMS site to show up differently depending on whether the user is in admin or preview mode. This doesn’t help, however, in cases where the admin bar interferes with the design of your site. Your client will have an admin bar every time they login, so they’ll also see examples of your incompetence as a developer any visual discrepancies it introduces every time as well.

Honestly, if it’s a purely aesthetic bug that’s not particularly easy to work around, I usually just explain to the client that they’re only seeing this as an admin and won’t ever encounter it on the live site. For smaller projects it’s simply not worth extra time and cost to make sure a few pixels line up nicely.

But what when it’s not just an aesthetic issue?

Sometimes problems introduced by the admin bar are more serious, such as covering up vital site components or pushing important elements out of alignment.

Here’s an example we encountered during a site build last week – a menu toggle (shown on the left as it was designed) that completely disappeared when we built out the site (shown on the right):

2015-05-27 LCMS Admin Bars Example

 

In this case the menu was being covered up by the admin bar and we simply needed to bump the menu container down the page a bit. Though it would only require a few lines of CSS, LightCMS doesn’t provide us with any native classes to hook into when someone is logged in as an administrator. In other words – there’s no built-in way to serve a different set of CSS rules to the visitor based on whether they are logged in or not.

Fortunately, adding our own hook via jQuery is easy enough. All we need to do is check if the class for the admin menus exists on the page and, if so, add an appropriate class to the html element:

$(function(){
  if($('.lcms_account_menus, .lcms_menus').length){
    $('html').addClass('adminBarPresent');
  }
});

Now you can use the

.adminBarPresent
  class in your CSS to adjust elements accordingly and provide a better experience for admin users.

 

]]>
Mobile compatibility will soon affect your search engine rankings https://lightignite.com/mobile-compatibility-will-soon-affect-your-search-engine-rankings/ Tue, 17 Mar 2015 18:08:31 +0000 https://lightignite.com/?p=812 Late last month Google made an announcement that mobile-friendly sites will soon start ranking higher than their non-mobile competitors (all other things being equal). As a website reseller, this update presents an excellent opportunity to provide immediate value to your clients by letting them know about the upcoming changes and the improvements they may need to make to maintain optimal search engine positioning.

Here are a few talking points to go over with your clients:

This change only affects mobile searches.

Obviously a desktop visitor will not need to see the mobile site, so it becomes a less important factor for ranking any searches from a regular desktop web browser. Note: it’s suspected that desktop results already get a small boost from increased mobile compatibility, but an un-optimized site will not fall in desktop search results the same way it will from mobile results when the switch is flipped on April 21.

This doesn’t mean your site will disappear from search results.

Thought it may drop in mobile search rankings, it will still be available somewhere in the results. This change is simply meant to present mobile searchers with the most relevant results, and a site with better mobile compatibility is deemed to have more relevance than a site that makes no effort to optimize the mobile browsing experience.

You may not need to do anything.

Although having a mobile site is generally considered a best practice, the decision to optimize for mobile is unique to each organization and will be based on many factors. Before investing in converting a site, it may be prudent to at least take a quick look through a site’s analytics data and see what percentage of users are coming from mobile devices (and especially the total percentage of mobile visitors who arrived via search engines). Though we generally expect that this number will only get larger, there are certain sites and even entire industries where mobile visitors make up a very small portion of visitors. In that case, money may be better spent elsewhere.

Upgrading your site has a multitude of benefits.

The purpose of most websites is to disseminate information, generate leads, or make sales. It should be our number one priority to make these goals as easy as possible no matter what device a visitor is using. Though it will soon be true that increasing mobile compatibility will help boost your search rankings, it’s probably more important that it also makes the browsing experience more enjoyable for visitors who would’ve found you anyway.

Check your compatibility today

Fortunately you don’t have to wait to see if your sites will fall in mobile search rankings. Google has a convenient tool that will give you a quick look at where your mobile compatibility stands. If you hook the site up to Webmaster Tools, you can also use the Mobile Usability utility to see a full list of issues.

Did you find an issue you don’t know how to fix? Get in touch, I’d be happy to help out.

]]>
Date-based cache busting: hands-free asset refreshing during site development https://lightignite.com/cache-busting-during-development/ Tue, 24 Feb 2015 17:17:30 +0000 https://lightignite.com/?p=699 In a previous post about cache busting, I described a way to force a visitor’s web browser to grab the latest version of a site’s CSS or JS assets. In a production environment, that technique is an ideal solution for the problem of old cache data and is a tool you should keep in your back pocket at all times. During development, though, it’s not always convenient to manually update these includes upon each minor tweak to a stylesheet or javascript file.

As a developer, you’ve likely become familiar with forcing a refresh of all site data and aren’t losing any sleep over the issue. Clients, on the other hand, are (almost by definition) wholly unaware of what a browser cache is, why it exists, or how to clear it. If you’re tired of educating each client on this issue and reminding them about it multiple times throughout their project then this tip is for you.

Automatic asset refresh based on access date

It’s no secret that LightCMS has a built-in date token. What you might not know is that this token can also be used to tell you—down to the second—exactly what time a page is loaded. With a little creative use we can repurpose this functionality by inserting it into a file include and taking advantage of time’s inevitable march forward to trick browsers into always retrieving the current version of that file from the server.

We’re going to create a full timestamp with a custom formatted date token

<$date format="yyyy-MM-dd_HH:mm:ss"/$>
 and use it in the query string for a stylesheet include. Normally that would look something like this:

<link href="/css/main.css?<$date format="yyyy-MM-dd_HH:mm:ss"/$>" rel="stylesheet"/>

That doesn’t work, though. LightCMS goofs up the include and leaves you without a proper stylesheet path.

Instead, we’ll need to use the full absolute path to the file:

<link href="/Websites/SUBDOMAIN/templates/TEMPLATENAME/css/main.css?<$date format="yyyy-MM-dd_HH:mm:ss"/$>" rel="stylesheet"/>

If you view the page source you’ll see the token has been replaced with a timestamp that changes with every tick of the clock:

<link href="/Websites/SUBDOMAIN/templates/TEMPLATENAME/css/main.css?2015-02-20_10:54:16" rel="stylesheet"/>

Wrapping up

From now until the time you remove the

date
 token every visitor will get the latest copy of your file. It’s a perfect way to make sure your client is always looking at the same version of the site as you—just don’t forget to remove it when you go live or your load times will suffer!

]]>