The Fellowship of Christian Athletes (FCA) is the largest Christian sports organization in America. With over 900 staff and thousands of volunteers deployed in locally-focused areas across the United States, FCA has a great need to provide powerful and accessible tools to allow each local chapter to thrive in its community. 

That's why FCA turned to LightCMS. Over the past few years, FCA has deployed over 200 locally-oriented websites on the LightCMS platform, each individually built and managed by the staff and volunteers in that local community. We're excited to share with you a bit about how LightCMS has enabled FCA to successfully deploy such an ambitious online strategy.

Samples of FCA Sites

Q & A with Danny Burns of FCA

Please explain a little bit about how FCA uses LightCMS.

On-page editing makes it easy for our staff members to create their sites and manage their content.

FCA has over 900 staff around the country and over 200 individual local websites. The ability for our staff members to easily create and maintain their own website is incredibly important. We spent over a year looking at different Content Management Systems. Since our staff vary in technical expertise, we needed a system that was both easy for the novice but powerful enough for advanced users. LightCMS is that solution for us.

With LightCMS, our staff members can create great local area websites and maintain them on their own. If they want to partner with local volunteers, the system can accommodate the extra help. And if they want to create a completely custom look and feel with the help of local designers, they can! LightCMS allows FCA to ensure brand consistency. It also provides an affordable solution to local staff and it is constantly evolving to add more value to those within our organization.

How does LightCMS make things easier for FCA?

On-page editing makes it easy for our staff members to create their sites and manage their content. Unlike other systems, LightCMS allows a user to see the entire page and then manipulate its content without guessing how it’s going to look. The user interface is easy to use and easy to train to. 

The recent addition of the developer role was a very significant help for us. Now, our staff can be empowered to upload templates that we provide and customize them with the built in design editor. We don’t have to login to each website to ensure the latest template is live. Site owners can easily keep their sites up-to-date.

What are your favorite characteristics of LightCMS?

First, we love its flexibility. LightCMS has made it easy for all of our staff to maintain websites, regardless of their level of web experience. LightCMS's infrastructure allows seasoned designers to create websites just like they would outside of a CMS. The flexibility of LightCMS to adapt to its website owners is paramount for FCA.

Second, we love its continual innovation. The LightCMS team is constantly investing and deploying new enhancements and features to the product. We’ve even been able to submit feature ideas over the years and we have seen some of those come to fruition. We don’t have to worry about “falling behind” with LightCMS. LightCMS allows us to keep in stride with ever-evolving web technologies and strategies. Thanks to LightCMS our staff members can spend more time accomplishing their mission and less time maintaining their websites.

Anything else you'd like to include?

Knowing that we have the entire LightCMS team helping our team is huge.

The LightCMS support team has been a tremendous asset as we’ve grown to over 200 sites on the platform. Any questions or issues have been promptly handled. Knowing that we have the entire LightCMS team helping our team is huge. 

The fact that LightCMS is a fully-hosted solution has also been a great help to us. We simply don’t have the bandwidth or expertise to manage servers, systems or security. With LightCMS, we can go to bed at night and know that the safety and reliability of our websites are in trusted hands.

Lastly, we greatly appreciate the incentives through the LightCMS Rewards program. As a non-profit, every little bit helps and a little has quickly turned into a lot for us. Thanks to LightCMS for providing incentives for customers with significant investment in the platform.

Another phase of our design area enhancement is rolling out this week. The Developer Role will allow LightCMS account owners to grant design-management capabilities to other users of their website. Businesses and organizations will be able to allow multiple staff members to have access to design controls. In addition, resellers can grant design access to clients, if they so choose.

The role can only be assigned by account owners. To apply it, account owners may simply visit a user's profile and check the box next to "Developers" under the roles section.

Account Owners see the option to assign users to the Developer Role on their profiles.

Admin users will be able to see which users have the developer role, but will not be able to assign or unassign the role, unless they are the account owner.

Administrators see if a user is assigned to the Developer Role, but they cannot change the setting.

Enabling the Developer Role allows a user to see and select the "Design" section on the top toolbar and access the Collection of designs applied to their website as well as our Design Gallery of available free designs. They may also edit designs using the Design Editor (if the designs are enabled for editing) or using the Source Editor. They can also upload new designs and they get FTP access to the "Templates" directory, which contains the source files for all designs in the website's collection.

This new feature is scheduled to be released on Wednesday, April 18, 2012.

We're continuing the roll out of design changes we began last month with a complete overhaul of the LightCMS Design Section. This release presents a stunning user interface that makes managing your designs so much easier. The update paves the way for the new Developer Role (coming soon) which will permit account owners to allow users of their choosing to access the Design Section controls.

Manage Designs With Fewer Clicks

The new Design Section is an extension of the LightCMS top toolbar that allows you to access and modify design settings while still previewing your live site content below. It saves clicks when performing most every design-related task, and it makes previewing your site with new designs a breeze.

Categorized Templates for Easy Access

The Design Section will present all of our built-in templates organized neatly into categories. Choose a category and scroll through the visual options presented. Then use the simple menus on each design to download, apply, or edit through the new Design Editor or the Source Editor.

My Designs = Collection

One important change you'll want to note is that what we have thus far referred to as "My Designs" will now be referred to as "Collection." So, look for your "Collection" in the new Design Section to locate all the designs you've previously applied to your website. Whenever you edit a design, even if that design is in the gallery, it will automatically be added to your Collection in the background.

All the other functionality of the current Design Section is still intact and very intuitive to access. In fact, you'll be able to perform most if not all functions with fewer clicks than before.

Scheduled for Launch

This release is estimated to launch on Thursday, April 12, 2012 at approximately 10am CDT (GMT -5). Just as a reminder, only account owners are able to see the Design Section, so this update will not affect your clients. In a future phase, we'll be rolling out the new Developer Role, which will allow you to grant access to the Design Section to users of websites under your account, if you so choose.

We look forward to bringing you these exciting new updates, and many more to come!

It's always a joy to spread the word about the good work designers are doing through LightCMS's Shine the Light! program. With Shine the Light! qualified LightCMS designers are able to donate websites to non-profit organizations of their choice. They provide the design services and LightCMS donates the CMS platform and hosting. It's our way of encouraging and participating in great pro bono work around the country and the world.

Today, I want to share with you about a recent Shine the Light! project completed by Clay Burnett and Macklin Chaffee at Inventure. Inventure is a long-time LightCMS reseller, and they recently chose to benefit Rod Dixon's Kid's Marathon Foundation of Los Angeles with a new website through Shine the Light! As is our custom, I asked both Inventure and Rod Dixon about this project in order to share their thoughts with you. Highlights from their responses are included below. But first, here's a look at the before and after images for the Kid's Marathon Foundation website.

Old Site

New Site

Q&A with Inventure

Here are a few highlights from our interview with Inventure about this project.

Why did you choose the Kid's Marathon Foundation?

Both of us here at Inventure are very active individuals, being elite middle distance runners. Rod Dixon is an elite runner and Olympic Bronze Medalist (1500m, Munich 1972) that we connected with several years ago. His program, KiDSMARATHON, is incredibly well-designed and aimed at promoting active, healthy lifestyles in young kids, age 7-12. It has grown in the last two years and was in desperate need of an online presence through which it could disseminate information to a growing list of supporters.

What inspires you most about their work?

The truly inspiring thing about this non-profit is that it doesn't just raise awareness for childhood obesity, it also actively engages kids and shows them that running is fun! The kids are educated on the issue, empowered to believe in themselves, and inspired by Rod and other charming and accomplished speakers. This program one of the rare few that is actually solving problems.

What was unique about this project?

Clay, our president and lead designer, has coached youth and teen runners for seven years. So, his passion for design was aligned with his passion for coaching and educating young people about fitness. Whenever we have the opportunity to combine work and play, the project is always rewarding.

Can you tell us a little about your company and your work?

Inventure is a web design and development company founded in 2001. We specialize in custom design. We work tirelessly to ensure that every client's website projects the precise brand image that they wish to display on the web. We've delivered LightCMS based websites since 2007 and we firmly believe that LightCMS is the premier CMS on the web.

A Few Words from the Benefited Organization

We also posed a few questions to Rod Dixon of the Kid's Marathon Foundation. Here is some of what he had to say.

How has this website helped your organization?

The new website will assist the teachers and parents by providing information, skills, and ideas to help kids be more connected to activity and healthy eating choices. Kids will also be able to see stories and examples of what others are doing at schools and running clubs around the world.

What's your favorite part of your new website?

Everything! The kids' expressions through their drawings and art are very special. I'm so excited about the team of Macklin Chaffee and Clay Burnett. Their creative experience, together with their ability to communicate my ideas into the website have allowed us to create something which I believe will inspire and motivate.

Please note: This article was originally published on October 19, 2011 but has been updated and republished to reflect changes to Facebook's custom page tab layout for timeline view.

Keeping up with Facebook can be a challenge. It was just a couple of years ago that we published this tutorial on setting up custom tabs on Facebook pages using FBML. In the year following that article, Facebook announced they were deprecating the FBML standard and actually turning off all FBML page tabs by June 1, 2012. So, we spent some time figuring out how to convert our page tabs to the new iFrame standard, and put together this guide based on what we've learned in the process, publishing it in October of 2011. Now, a few months later, Facebook is again making changes as they shift all pages to timeline view. So, we've updated and republished this article to reflect these changes.

The Impact of Timeline View

The changes Facebook is making correspond to their migration of all brand pages to the new timeline view. The new timeline view affects how custom page tabs are integrated. Here are a few significant changes:

• Wider Content. Content on page tabs was previously restricted to 520px wide, but now content can be up to 810px wide, offering a much larger canvas for displaying content.
• No More Default Landing Tab. With Timeline, all traffic to a brand's Facebook page will end up on the main timeline, whether or not the visitor already likes the page. Previously, Facebook allowed the page owner to specify a tab to serve as the landing page for non-fans when they visited. This is no longer possible.
• New Branding Opportunities. Page tabs now provide an opportunity to insert additional branding onto the main timeline page. Each custom page tab can have a 110x74 cover image that can be displayed in the boxes below the timeline's main cover image. There are four boxes, of which one (the "photos" box) cannot be moved or changed. The other three can be replaced with custom imagery through the use of page tabs. You can see how we've replaced two boxes with custom artwork on the LightCMS Facebook page in the image below.

That's an overview of the most recent changes Facebook has made. Now, let's take a look at how you can put together your own custom page tabs.

Create Your Content

First, you need to determine what you want to include on your custom page tab and then create your content in HTML, CSS and JS standards. Whatever content you create, it needs to be no wider than 810px and you should remove any margin or padding around the body of your content so that it fits exactly in the space Facebook provides.

Host Your Content

You can host your tab content anywhere you like, but you must be able to provide secure hosting for your content or Facebook won't allow it. This is one reason that hosting the content on LightCMS is a convenient option. With LightCMS, SSL security is built into the publishpath.com domain and every LightCMS website can be accessed through the secure publishpath URL. You can provide your website's publishpath address to Facebook to retrieve the content without ever exposing the publishpath address to the public.

Of course, another plus for putting your content on LightCMS is that you can utilize LightCMS's content management tools, making it easy for you or your clients to update and change the content on the Facebook tab without having to edit any code. Simply create a design template and apply it to a hidden page on your LightCMS website to establish the page you'll provide to the Facebook custom tab.

Set Up Your Facebook App

To set up a simple page tab, Facebook requires you to create a custom Facebook App. Fortunately, this is actually much easier than it sounds. While there are several Facebook Apps out there that will create the tabs for you, I'm always a fan of doing things myself when possible and, in this case, it's a very simple process so I think it's worth it. Here's a quick rundown of the process:

Go to the Facebook Developer Website
Visit https://developers.facebook.com/apps. You must be logged in to Facebook to continue. If this is your first time to create a Facebook app, Facebook will ask you to authorize the developer tools, which you will need to do.

Click "Create New App"
You'll be asked to provide a name for your app. The name can be anything just to help you remember what the app is for. You don't need to put anything in the "App Namespace" box.

Fill in the Details
Facebook Apps have tons of settings, but there are only a few you need to worry about. When you edit the settings on your app, look for the section called "Page Tab." Click to enable that and you'll see five fields. Complete these fields as follows (see image below for reference):

• Page Tab Name - put the words you want to use to represent the tab. You can actually override this setting when you add the tab to your page so the name used here isn't critical.
• Page Tab URL - put the URL to the directory containing your iFrame content. This can't be a URL to a specific file, but must be to a directory or shortcut path. If using LightCMS, this is simply the URL to the page you set up earlier such as http://[yoursite].publishpath.com/facebook-tab
• Secure Page Tab URL - this is the secure version of your content. If using LightCMS, you simply need to add an "s" to the "http" as such -- https://[yoursite].publishpath.com/facebook-tab
• Page Tab Edit URL - you can leave this field blank.
• Page Tab Width - choose either Narrow (520px) or Wide (810px). Wide is recommended.

That's it! Now you can save your changes.

Add the Tab App to Your Page

Now that your app is set up you need to add it to your Facebook page. Facebook has, unfortunately, made this harder than it needs to be. The best way I've found is to paste the following URL into your browser's address bar:

https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL

Replace "YOUR_APP_ID" with the numerical ID of your app and replace "YOUR_URL" with the URL to the iFrame content you have created. Accessing this URL through your browser will bring up Facebook's dialog allowing you to choose the page on which you want to install your app.

Adjust the Look

Visit your Facebook page and you should now see the new tab added to one of the boxes below the main cover image. If you have a lot of boxes, you may have to click the arrow at the far right to expand the second row of boxes. Once you click that arrow, you can hover over any box and select the edit menu at the top right of the box to change its position. Remember, the "Photos" box is the only one that can't be moved.

To customize the image used to represent your tab, click the edit menu on the appropriate box and choose "Edit Settings." You'll be able to upload your own 110x74 image to display in the box. You can also adjust the text that is used to describe the tab (overriding the Page Tab Name you set when you created your app). Click your image and you'll be taken to your custom tab, displaying the custom content you created.

Overriding iFrame Height

One problem we ran into is that the content we set up on our custom tab was taller than the iFrame Facebook created to display it. This caused the browser to add scrollbars which really looked messy. Fortunately, there is a way to tell Facebook to increase the height of the iFrame by including some Javascript in the code of the tab page itself. We'll include the code below in case you run into this issue. You would only need to include this if your iFrame content is more than 800px in height.

Include the following in the head of your html document. Replace HEIGHT-IN-PIXELS with the desired height for the iFrame. Be sure to replace it in both locations below.

And include the following just before the closing body tag. Be sure to replace YOUR-APP-ID with the numerical id of your app.

If you operate a Facebook page for your business or organization, you are likely aware that on March 30, 2012 Facebook will be updating all pages to their new timeline view. Page owners can preview the timeline functionality prior to that date, and even opt to publish their timeline view ahead of the deadline, if they choose.

We took the plunge this week, updating the LightCMS Facebook page to work with the new timeline. I thought I'd take just a moment to share some tips and some of the things we learned in the process of updating our Facebook page.

The new LightCMS Facebook page in timeline view.

You Need a Cover Image

The cover image is the most striking improvement in timeline view and the only extra thing you absolutely must add to ensure your page looks right after the transition. Without a cover image, your page will look kind of strange in timeline view. But with a cover image, you can truly express your brand in a way never before possible on Facebook.

The cover image space is 851px wide and 315px tall. If your image isn't these exact dimensions, Facebook will size it to fit and allow you to drag the image up and down to center it on the part of the image you want to highlight. But why not create an image at exactly those dimensions so you can completely control the look and feel?

Your Last Uploaded Image is Now Very Important

In timeline view, Facebook now displays the last photo you uploaded in a very prominent place, just below the cover image at the top of your page (see the image above). This box cannot be moved or hidden and it will always show the last image uploaded. If you don't upload images to your page very frequently, an image may stay in this spot for a significant amount of time. So, it's worth checking how your images look in this space and, if you upload one that looks awkward here, you can always re-upload a different image to force it to display in this area.

New Opportunity for Branded, Custom Content

The other boxes to the right of the photos box now offer a new opportunity to integrate custom, branded content into your Facebook page through images representing your custom page tabs. If you have custom page tabs, you can now select custom imagery to place in these boxes and, when clicked, this imagery will direct you to your custom page tab content. These 110x74 pixel images give you a great place to add even more branded content to your main Facebook page. In the image above, you can see that we have added two custom images (the ones that say "Take the Tour" and "For Designers") in this way.

In typical Facebook page style, the method for updating the imagery to associate with your custom page tab is a little obscure, so we've laid out the steps for you below.

1. Once your custom tabs are installed, visit your Facebook page and click the small down-arrow icon to the right of the four boxes.
2. Hover over the tab whose image you wish to edit and click the edit icon that appears at the upper right.
3. Select "Edit Settings" from the menu that appears.
4. On the settings screen, you can change the Custom Tab Image and specify new text to use in the caption under the custom tab image as well.
5. Click "Okay" when finished.

In case you're wondering "What is a Facebook custom page tab?" you can check out the tutorial we wrote on creating custom page tabs last year. Just be aware that things have changed a bit since we published that article and we're working on an updated version of this tutorial to release soon.

A Few Other Items of Note

Here are a few more things that struck me as I began exploring Facebook's new timeline layout for pages.

• With Timeline, you can no longer set a default landing tab for non-fans who visit your page. All traffic to your page will be directed to the initial timeline view. We used to force non-fans to land on our "Welcome" tab when they visited our page. We can no longer do this, so we've gotten rid of the welcome tab and created tabs for other purposes. You can still link to a page tab with a direct URL.
• You can now allow Facebook users to message your page. Once they do, you can respond to them and have a private message conversation as your page. This was not previously possible.
• The timeline gives you the ability to highlight updates (which makes them span two columns and use larger text) and pin an update to the top (which keeps it at the top for seven days). These two features offer some nice, new opportunities to control the way updates display on your timeline.
• My favorite part of the new timeline is the ability to create milestones to tell the story of your company or product. If you enter the year you were founded, Facebook creates a "founded" milestone for you that you can edit to add more information and even photos. You can then add additional milestones for your company, associating pictures with them if you want. This is a neat way to document some significant things on your timeline.

I hope this has given you some insight into what's necessary and what's possible with Facebook's new timeline view for pages. Best of luck updating your own pages. If you have a page you've updated, please share it with us in the comments below. We'd love to check out what you've done!

We've got a new feature coming to the LightCMS platform. It's called the Store Manager role and it will allow you to grant store management capabilities to non-admin users on any website. Previously, users could not access the store management pages or manage product listings unless they were given the Administrator role, which gave them access to the entire website. Now, with the Store Manager role, you'll be able to set up users who can manage store functionality on a website without having access to any other controls or features.

With the Store Manager role, a user will be able to:

• Access the store menu items on the top toolbar 
• Adjust all store settings
• Add, edit and delete products
• Edit the settings on any product listing

The Store Manager role will be assigned by visiting a user's profile page. You'll find a check box for the Store Manager role immediately below the Administrators role. This check box will be visible only to Administrators and Account Owners who will be able to assign the role to any additional users on their site if they so choose.

The Store Manager role is scheduled to be released on Thursday, March 15th at approximately 10am CDT (GMT-5). We look forward to bringing you this update.

The SXSW Trade Show opened yesterday. Day one of the trade show is always the busiest day for us as many of the attendees of the Interactive Conference rush in to check out the trade show booths. Our team was ready and waiting for them. Here's a look at the LightCMS crew in our booth just before the open.

From left to right: Tim Wall, Marketing Director; Chad Jaggers, Support Director; Matthew Sanders, Creative Director; and Matt Grimm, Software Engineer and Designer.

The booth is looking great this year, with a new banner reflecting the design of the new LightCMS website and including an "iPad, please!" thought bubble. "Why the thought bubble?" you ask. It's a part of our iPad giveaway. Visitors to the LightCMS booth can take their photo under the thought bubble and tweet it to be entered to win an iPad. So far, we've had a good number of fun tweets and photos. You can check some of them out by searching Twitter for LightCMS.

Of course, the best part of any conference is always getting to have conversations with so many great people about the LightCMS product. We've talked to designers and agencies who make websites for their own clients as well as individuals looking to build websites for themselves or for their businesses. It's always great to see and hear their feedback as we demonstrate the product to them. 

This is the first conference we've attended since rolling out the new toolbar interface and the feedback on its look and feel has been very positive. "Beautiful," "sleek," and "intuitive" are some of the words we commonly hear from visitors to the booth as they interact with LightCMS. We also hear a lot of great reaction when we demonstrate the online store and how easily it integrates into any site. Of course, the flexibility of design and the reselling tools like client billing are always big hits with those who sell websites to their own clients.

Matt and Matt answer questions about LightCMS while Tim demonstrates the software.

Every year, it seems that the familiarity with software-as-a-service (SaaS) platforms like LightCMS increases. When we started at SXSW four years ago, most people were familiar with downloadable products but had less familiarity with the concept of using an SaaS model. But each year, the pendulum shifts more toward the SaaS model. This year continues that trend, which helps to solidify our belief that the SaaS model provides a very desirable option and that LightCMS is on the right side of that trend.

That's the report from Austin for today. We appreciate those of you who have stopped by to see us while here. For those of you who are not here in Austin, we've got another announcement for you that should be posted tomorrow. It's a nice little feature add that's scheduled to roll out later this week so stay tuned!

As we mentioned in a previous post, we're attending and exhibiting at SXSW Interactive again this year. Four of us arrived in Austin on Friday including: Chad Jaggers, Support Director; Matt Sanders, Creative Director; Matt Grimm, Software Engineer and Designer; and myself, Tim Wall, Marketing Director.

Here's a typical view of the foyer of the Austin Convention Center. We took this from the level above. As you can see, there are lots of people here.

The big story thus far has been the rain. It has been raining in Austin since before we arrived here. As I am typing this, I am just seeing the clouds break up and rays of sunlight beginning to come through. That's a welcome sight.

Of course, this part of Texas desperately needs the rain so we can't complain too much. The only problem is that SXSW sessions take place in a number of buildings scattered across downtown Austin, so there is often a lot of outdoor walking involved. And, unfortunately, we only had one umbrella among the four of us. I had another umbrella, a nice big blue and white one I bought at Walmart before I left, but I conveniently left it in the registration room on day one and was unable to recover it. All this to say, we have gotten a little wet down here. In fact, here's a picture of Matt and Matt after walking to the convention center Saturday morning. I'm sorry the photo is a little blurry, but I just had to include it to illustrate all of this talk about the rain.

Matt (left) and Matt (right) after walking from the parking garage to the Convention Center in the rain.

Despite the rain, there are still plenty of good times to be had. Though we've been at SXSW for four consecutive years as an exhibitor, this is the first year we've actually been able to attend any of the sessions. In previous years, we've arrived just in time to set up and operate our booth. But this year, we came in early so we could be a part of the educational sessions SXSW has to offer.

There are hundreds of solo, dual, and panel-driven sessions on a wide-range of topics here at the Interactive Conference. From design and development to emerging technologies to PR to Journalism to Marketing and beyond. There truly is a lot to be learned here. Anyone involved in the Interactive space should be able to find sessions of interest to them.

One of my favorites so far has been an interview with Vic Gundotra, Senior VP Engineering for Google+ in a session devoted to talking about Google+. Now, I'm no Google+ devotee, but I do use it (did you know we actually have a LightCMS Google+ page?) and of course I'm interested in where the product is heading. Mr. Gundotra was a masterful presenter. If nothing else, I learned a lot about how to present your product in the best light possible. By the end of the session, my esteem for Google+ had increased at least ten times over due almost entirely to his performance.

We also took a break from the sessions to drive our little van into the giant exhibitor loading bay and roll our booth materials into the trade show area. We're in booth #605, which is a quaint little booth in a nice neighborhood with good visibility to the Northeast trade show entrance. We haven't met all of our neighbors yet but Red Laser is the big end cap on our aisle and directly across from us.

We're not finished setting up the booth just yet, but we'll post again soon with more pics of the booth and more details on the trade show portion of our trip. We're exited to be giving away three iPad 3s at the SXSW trade show so if you're here, be sure to come by for details on how you can win.

That's it for now. More details to come from Austin soon.

Today, I want to take a closer look at the new LightCMS Design Editor, which we began rolling out last week. The Design Editor offers the opportunity to make changes to the design of a LightCMS website without editing any code. The Design Editor works out of the box with all of LightCMS's built-in designs. In addition, designers who create custom designs for LightCMS can choose to enable the Design Editor to work with part or all of their designs.

In this post, we're going to take a closer look at how the Design Editor works and how you can enable your own designs to work with it, if you so choose.

One of LightCMS's built-in designs loaded inside the new Design Editor. Click the image to view full size.

Accessing the Design Editor

Currently, account owners can access the Design Editor in the same way they have previously accessed our code-based editor. First, select "Design" on the top toolbar and then select the "My Designs" tab. This will show you a list of all the designs enabled on your current website. Select a design and then select the "edit" button. This will load up the new Design Editor.

Once the Design Editor loads, you may get a message indicating that your design isn't set up to work with the Design Editor. This is because all designs must be specifically enabled to work with the Design Editor. We have enabled all of the designs in our built-in design gallery. To grab one of our built-in designs, select the "Design Gallery" tab, choose a design and either apply it to your website or add it to "My Designs" (note: if you already have a design by the same name in "My Designs" the system will overwrite it with the design from the gallery).

Once you have an enabled design set up in "My Designs," you should be able to access the editor's controls.

Templates and Panels

Once the Design Editor is up and running, take a look at the very top left. You'll see the name of your design and just below it, you'll see the name of the currently-selected template. Selecting the template name will open a drop-down list of all the templates that can be edited within your current design.

Just below the template name, you'll see the name of the currently-selected panel. This will say something like "Base Styles," "Wrapper Styles," "Header Styles" ... etc. Selecting this will open a drop down of all the available panels for the currently-selected template (see image to the right). A panel is basically a set of controls that are assigned to a particular area of your template. For example, the "Nav Styles" panel presents a set of controls that adjust the design of the site's navigation. Each template may present a different list of available panels. This is because the designer of the template can determine what areas of the site are able to be controlled by the Design Editor.

Global vs. Template-Specific Panels

The Base Styles panel and the Nav Styles panel will make global changes to your design. Edits made on these two panels will be reflected across every template in your design. 

On the other hand, all other panels make template-specific changes. This means, for example, that you can adjust the sidebar or the header uniquely on each individual template in the design. Or, you can set them all the same. The choice is yours.

Behind the Scenes

The Design Editor implements its changes by creating a new CSS file called userstyles.css. This is an actual file that exists in your design files and it can be edited via the Advanced Editor (see below) or via FTP. However, each time new changes are saved by the Design Editor, the file is rewritten, so it is not advisable to make changes to the userstyles.css file directly as they can be easily lost.

The Advanced Editor

Our built-in code editor is still available by selecting the "Advanced Editor" button at the bottom of the Design Editor. The advanced editor functions exactly as it did before, allowing you to edit any of your HTML, CSS, JS and INC files directly inside the system. Of course, you can also still access these files by FTP.

Design Integration

One of the most powerful features of the Design Editor is the fact that it can be easily enabled to work with your own custom designs. The integration is simple, but done in a way to give the designer complete control over how his or her designs can be edited, if at all. You can enable editing on entire designs, specific templates, or even very specific areas of a page. Or, if you don't want to allow your designs to be edited, you don't have to.

Enabling the Design Editor on your designs is a simple process. We've recently published complete documentation on Design Integration which you can find here on our support site. If you need more information about creating custom designs for LightCMS in general, please see this section about Creating Designs.