Your Top Five Concerns With Using Rock as a CMS

1. Rock will never have all the features of my current CMS.
   Yep, you're right. We'll never be able to have every feature that your current CMS has, although chances are, they don't have every feature we have either. Rock makes creating powerful websites easy. We’ve stolen borrowed the best ideas from the top CMS out there. We've leveraged our years of experience building sites to create tools we’ve always wanted.
2. We'll never be able to find someone who knows Rock; everyone knows xxxxx.
   We're working hard to establish an ecosystem full of vendors and freelancers who can help you. Not only that, but documentation like this manual makes it simple to quickly bring any web designer vendor up to speed. You should probably hesitate to use any vendor who resists using the tool the customer wants and instead uses their favorite tool. Remember, you're the one who needs to live with the site.
3. Rock is built on Microsoft .Net. Come on, no serious CMS uses that.
   While there are several popular .Net CMS systems (Umbraco, DotNetNuke, Orchard) that really isn't the point. When looking for a CMS, you need powerful features with blazingly fast performance that can scale. Rock excels at each of these. Think about it this way: Should the builder be judged by the tools he brings to the worksite or the building that stands when he's finished? That's not to say we're not proud of our tools. We LOVE .Net and we think you will too once you try it on.
4. There are a limited number of .Net webhosts to run Rock on and the ones that do exist are more expensive.
   True, there are fewer than our PHP/MySql cousins, but there are numerous vendors to pick from. We've outlined a couple of recommended choices in our Rock Solid External Hosting guide. As far as price, .Net hosting on average costs about 20% more than Linux hosting. On the lower end this translates into $2-$3 dollars a month. The return on investment with using Rock as your CMS will far outweigh this small difference.
5. But I’m a PHP developer; I don’t know .Net.
   That's just a part of the job. Constant change is the career you’ve chosen. Technologies like LESS, jQuery and Bootstrap didn't exist two years ago. To not change is to become extinct. Don't see yourself as a .Net Developer, instead look at yourself as just a developer who today uses .Net. If you're a developer, you'll have no trouble with .Net. It's an elegant and well-designed language.

But What Are the Benefits?

Hopefully you're starting to see that some of the barriers aren't as large as they may appear. But there's no reason to change for change's sake; the benefits must out weight the cost. Reading through this manual will show you numerous ways to exploit the power of Rock's CMS features. But let’s touch on one simple example. The biggest "killer app" of Rock is personalization. Just picture adding the markup below into your baptism page using Rock's on-page HTML editor (You’re going to love the editor!):

{% if Person %} 
    {% if Person.BaptismDate != '' %}
        {{ Person.NickName }}, remember the joy of your baptism? Share that joy
        with a friend who hasn't yet taken the plunge at one of our upcoming
        baptism events!
    {% else %}
        {{ Person.NickName }}, now is the time! Don't put off baptism any longer,
        take the plunge at one of our upcoming events!
    {% endif %}
{% else %}
    Take the plunge at one of our upcoming baptism events!
{% endif %}

Rock uses an upcoming templating engine called Lava. Paired with Rock data, Lava is very powerful. The markup above does this:

• If the user is logged in and has been baptized it shows the message: "Alisha, remember the joy of your baptism? Share that joy with a friend who hasn't yet taken the plunge at one of our upcoming baptism events!"
• If the user hasn't been baptized yet they will see: "Alisha, now is the time! Don't put off baptism any longer, take the plunge at one of our upcoming events!"
• Otherwise, if the user is not logged in, the greeting reads: "Take the plunge at one of our upcoming baptism events!"

Armed with just a little knowledge of Lava, we've created a very personal experience on our site; one that is much more likely to draw the user in and promote action. Are you starting to see the power of Rock? And we're just getting started.

Sites

The top of the CMS hierarchy is the site. Each website you create should be created as a unique site. Think of sites as a collection of related pages that share a consistent look and feel. Site aren't limited to external websites though. You can use them to contain your check-in pages or a set of pages for a metrics dashboard.

Sites are created and managed under Admin Tools > CMS Configuration > Sites. Be sure to use the chapter Creating a New Site before setting out on your own.

Themes

Themes are a set of resources that add styling to the pages of a site. The theme is defined at the site level. This makes it very easy to change the look of an entire site with a single configuration change. You can read more about themes in the chapter Working With Themes.

Pages

The concept of pages is pretty obvious; they represent a single web page. Unlike many CMS however, the page does not exist as a file on the website. Instead, a page is dynamically assembled by Rock with each request. This allows each page to be personalized by the person requesting it and allows you to secure portions of the page based on the security rights of the user.

Pages are arranged in a parent-child hierarchy. This hierarchy allows us to build dynamic menus.

Layouts

Each page is configured to have a specific layout. This determines the content areas (or zones) that the page has. Available layouts are defined by the theme that the site is configured to use. While you can create as many new layouts as you'd like, we strongly recommend that you use the standard names for reasons that will be made obvious in future chapters.

Zones

Zones are content areas that are defined by the layout. They represent things like the header, navigation menu, footer and content areas.

Blocks

Blocks make up the actual content of the page. They come in all shapes and sizes. Each has a specific purpose. The most common block is the "HTML Content" block. This block allows you to display and edit HTML content to a specific zone. Other blocks are used to generate navigation menus, list groups, show maps, etc. Think of blocks as your Legos® that you can use to build a world of new inventions.

Blocks can be placed on either a page or a layout. When tied to a layout they are displayed on every page that uses the layout. This is very helpful when adding content like navigation in the header or footer text that should be the same across all pages.

The Anatomy of a Page

Now that we've covered all of the components of the Rock CMS system let's look at a visual representation of a page.

1 Header Zone

The header zone is used for the organization's logo and tagline.

2 Navigation Zone

The navigation zone holds the site's main menu.

3 Login Zone

The login zone allows users with accounts to access protected portions of the site.

4 Feature Zone

The feature zone holds the main content of a homepage which in many cases will be an ad rotator.

5 Sub Feature Zone

The sub feature zone seconary ads or content on the homepage.

6 Footer Zone

The footer zone wraps links and content in the footer.

Adding a Page

As you work on your site, you'll want to add new pages. Rock makes this simple; just follow these steps:

1. Navigate to the parent page that you want the new page to be under.
2. Click the (Child Page) button from the Admin Toolbar.
3. From the Child Page dialog, click the button to add a new page to the list.
4. The Add screen will allow you to provide a name for your page and choose a layout. To configure the page fully you'll need to click on it from the child page list and then click its (Page Properties) button on its Admin Toolbar.

Adding a Block to a Page

A small part of your content management duties will be to add and configure blocks on a page. To add a block to an existing page follow these simple steps.

1. Navigate to the page you’d like to add the block to.
2. Select the (Page Zone Editor) button in the page’s Admin Toolbar.
3. This will highlight all of the zones on the page for you.
4. Select the fly-out toolbar for the zone you wish to add the block to and click its (Zone Blocks) button. This will bring up the zone's block list.
5. From here you have a decision to make. Do you want the block to live on just this page, or on every page that uses this layout? Decide by picking the appropriate tab at the top of the dialog.
6. Next, click the (Add Block) button to add the block to the layout. Like adding a page you'll just provide a name for your block and the type of block you wish to add. You'll add more configuration later.
7. Next, determine what order you want your block to appear in the zone. You can move it up or down by dragging and dropping the order on the list.
8. Now that you've added your block to the list, click the Done link and reload your page. Your new block will now be on the page.
9. In most cases, you'll now need to configure your block. To do so click the (Block Configuration) button in the Admin Toolbar. This will highlight each block on the page.
10. To edit the settings, click the (Block Properties) button from the block's fly-out menu. This will bring up the block properties dialog with all of the settings for the selected block.

Page Load Time

When we started to plan for Rock, we listed out our high-level goals for the project. One of these was "Speed as a Feature." For us that was more than just words, we wanted it to real and measureable. One of the first features we added was the page load time in the admin bar. From that moment on speed was put in front of us on every page we loaded. We kept it there, not only as our contract with you, but also so you could measure your custom modifications.

Block Configuration

Clicking the block configuration button in the admin toolbar will bring up a fly-out menu over each block on the page. Rolling over these menus will allow you to:

• Block Settings: This brings up a dialog that allows you to manage the block settings for that block.
• Block Security: This item allows you to edit the security of the block. This not only allows you to control who can view a block, but also who can edit and administrate blocks.
• Move Block: Selecting this item allows you to move the block to a different zone on a page. You can also move the block from the pages zone to the layouts zone. This will make the block available to each page that uses the layout.
• Delete Block: For everything there is a season; a time to add and a time to delete. When it’s time to delete, use this option.

Page Properties

The page properties dialog allows you to edit all of a page's settings. We'll walk through each in detail.

Basic Settings Tab

1 Parent Page:

You can easily change the parent page for your selected page. This will alter where that page is displayed in the navigation.

2 Internal Name:

This is the name of the page that is used in the admin menus and page pickers. Often, in these situations, you want the page to have a more descriptive name than you might want to be displayed in a menu on the site. For instance you might want the homepage of a site to have the internal name of "Youth Sports Homepage" but when you're on the site the title should be simply "Home" on the menu.

3 Page Title:

This is the name that will be used for the page title element on the page. It will also be used in the navigation menus and breadcrumbs.

4 Browser Title:

For Search Engine Optimization it's often important to have a different name in the browser's title. This setting allows you to edit this.

5 Site:

Each page belongs to a site. You can change the site for a page with this setting. Keep in mind that the page gets its theme from the site so changing this setting could change how the page is displayed.

6 Layout:

This selects the layout that the page should use. Further discussion of layouts can be found in the chapter Looking Deeper at Layouts.

7 Show Icon:

An icon can be used in the page title and breadcrumbs if it is enabled with this setting.

8 Icon CSS Class:

This setting allows you to enter the CSS class for the font icon you wish to use. While Font Awesome is installed, there's no reason you can't add your own alternate font icon collection and enter your custom class here. When using Font Awesome, you should use the syntax fa fa-.

9 Description:

The description gives a short summary of the page and its intent. You can use this as "internal documentation" or, using Lava, you can use it in your menus and page listings.

Display Settings

1 Page Display Settings:

These settings control the view state of various components of the page (title, breadcrumbs, description, etc.) How these actually render on the page is somewhat dependent on the theme you are using.

2 Menu Display When:

How and when a page is displayed in a menu has several different options.

• When Allowed:With this default option a page will only be displayed in the menu when the user has view permissions to the page.
• Always:You may want some pages that require a login to be displayed in the menu even when a user isn't logged in. When the user clicks the link, they will be asked to log in before proceeding to the page. This is helpful for things like group toolboxes where you want the user to see the option and then log in before they can view the contents.
• Never:Some support pages aren't meant to ever be navigated to directly. Setting them to never display ensures that a user never accidentally views them in a menu.

3 Breadcrumb Settings:

These settings determine whether a page should be displayed in the breadcrumbs and if so, whether an icon should be included. Some designers set the name to not display but they do show an icon for homepages.

Advanced Settings

1 Force SSL:

This ensures that the page will always load using SSL. This is important for pages like giving or online registration where credit card information will be used on the page. This does require that your webserver is configured to support SSL.

2 Enable ViewState:

ViewState is a .Net technology that allows a page to remember it's state across postbacks. If this doesn’t make complete sense to you, you probably should not uncheck the box. In most cases bad things will happen if you do.

3 Cache Duration:

This setting sets a page cache header in the page that tells the browser to cache the page locally for the provided timeframe.

4 Page Routes:

You can enter page routes for the page here. Several routes can be configured by delimiting them with commas. For more see the Routes chapter below.

5 Header Content:

As a web designer we know you'll have custom scripts, meta tags, styling and more that you'll want to add to the page's header. Whatever text you add to this setting will be placed into the page's header.

Child Pages

The child pages dialog allows you to see a list of child pages of the current page. From this list you can reorder the pages, delete a page or add a new page. You can also use this list to navigate to a page that might not be available in the menu.

Page Zone

Clicking the Page Zones will enable the zone fly-out menu for each zone defined on the page. From this menu you can bring up the zone dialog below.

From the zone dialog you can add or delete blocks in a zone. The tabs at the top of the page determine if the blocks will be added to the current page or the layout. Adding the block to the layout will enable it to be shown on all pages that use that layout.

Page Security

This dialog allows you to set security for the page. This allows you to determine who can view and administrate the current page. Note that page security is hierarchical. If no specific security rights are defined by a page, it will use the security settings of its parent and its parent's parent. If no page above it defines any specific rights it will use the rights defined for the site. This allows for a robust and flexible security implementation with minimal configuration.

Rock Information

Version Info

1 Rock Version:

This shows the current version of Rock that you are running.

2 Server Culture Setting:

These are the language and culture settings that the webserver is configured to use. This setting helps Rock determine how some of the international settings should be configured.

3 Clear Cache:

As you'll see, Rock's cache is an incredible thing. It drastically speeds up the performance of the site. It’s also very smart and will clear old or modified content. At times though, you may need to clear the cache to remove information that is no longer valid. If you make a change and don't see it reflected on a page, consider trying to clear the cache with this option.

4 Restart Rock:

Rarely you might get into a situation where you need to "reboot" Rock. This button acts as Rock's reboot switch.

Diagnostics

The diagnostics tab lists the complete configuration of your Rock environment. It’s useful when working with others to debug an issue.

Basic Usage

To edit the HTML, click the icon in the Admin Toolbar at the bottom of the page. Next, place your cursor over the (Block Fly-out) toolbar and select the (Edit) button. This will bring up the edit modal (shown below). This modal allows you to edit the contents of the HTML. You can also set a date range that the content is valid for. This is great for adding date-sensitive messages.

HTML Content Block Settings

While the default HTML block settings are great for typical usage, you have a ton of extra options that you can use to do some really cool things. Like any block, to get to the settings click the icon in the Admin Toolbar at the bottom of the page and then select the button from the block fly-out menu. This will bring up the block settings dialog. Let’s look at each setting in detail.

Merge Fields

It's time to change the paradigm of how you write content. With Rock, content doesn't have to be impersonal any longer. Using merge fields, you can customize the content for the logged-in user. Not only can you add their name, but you can look at all of the person attributes and make the content relevant to their relationship with your organization. Let's revisit the example from the introduction.

Adding the following on a baptism page allows for a personal and actionable content:

{% if Person %} 
    {% if Person.BaptismDate != '' %}
        {{ Person.NickName }}, remember the joy of your baptism? Share that joy
        with a friend who hasn't yet taken the plunge at one of our upcoming
        baptism events!
    {% else %}
        {{ Person.NickName }}, now is the time! Don't put off baptism any longer,
        take the plunge at one of our upcoming events!
    {% endif %}
{% else %}
    Take the plunge at one of our upcoming baptism events!
{% endif %}

Note the use of Lava syntax to add logic to the page. Here's how the markup above would look:

• If the user is logged in and has been baptized it shows the message: "Alisha, remember the joy of your baptism? Share that joy with a friend who hasn't yet taken the plunge at one of our upcoming baptism events!"
• If the user hasn't been baptized yet they will see: "Alisha, now is the time! Don't put off baptism any longer, take the plunge at one of our upcoming events!"
• Otherwise, if the user is not logged in they are greeted with: "Take the plunge at one of our upcoming baptism events!"

Besides information on the current person you also have access to all organization attributes and items in the context of the page. For more information on Lava syntax see the Lava Basics.

Pages vs Layouts

While it's already been noted before, remember that blocks can be assigned to either a page or a layout. When a block is assigned to a layout, it will be displayed on all pages that use that layout. This is especially useful with the HTML editor block as you'll often want bits of content to be consistently applied to several pages.

Channel Types

The first concept we'll discuss is channel types. As you work on your site, look for repeating data patterns. Items like web promotions are well-structured having data items like title, image, summary text, intended audience and content. While you could edit all of this content with the HTML editor, hopefully you can already see how that would be very tedious and prone to error. Here's where content channel types come into play.

Content channel types help define reusable data structures (think of a container for specific types of data). Rock ships with a couple of these channels already defined. Let's look at each one to see its role and purpose:

• Website Ads: This channel type is used to help manage your website promotions. It allows your staff to enter promotion information that your website administrator can approve, with the option to edit, and then publish to the site.
• Bulletins: This content type is used to help manage the bulletin creation process.
• Blogs: The blog content type is useful to build blogs for your organization.
• Universal Channel Type: This is a unique and powerful tool to help you from having to create 'One-off' channel types. We discuss this channel type in more detail below.

Anatomy of a Content Channel

As we mentioned before, the role of the content channel type is to define the container and settings for a particular type of content. Let's walk through the administration screen found under Admin Tools > CMS Configuration > Content Channel Types.

1 Name:

The name of the content channel type.

2 Date Range Type:

The individual content items that are added to the content channels can be valid for a specific date (for example a blog post would have a specific publish date) or a date range (a web promotion ad would be valid for a range of dates).

3 Disable Priority:

Some content items might have the concept of priority, while others may not. For instance, a web ad might be low priority (which would limit when and how it's shown), while a blog post would not need to use the concept of priority. This setting allows you to turn the need for priority on or off.

4 Channel Attributes:

This section allows you to define attributes that relate to the channel. For a blog channel this might be something like blog description, author, or image. Channel attributes aren't as common as item attributes; so don't worry if you have a hard time coming up with any.

5 Item Attributes:

Item attributes apply to each content item that is added to the channel. Each content item does get a date (either a single or date range depending on the Date Range Type discussed above) and a content field. Any other bit of information you want to track for the content item will need an attribute to store it. For example, the website ads channel has the following item attributes:

• Summary Text
• Image
• Detail Image
• Campuses
• Primary Audience
Secondary Audiences

Content Channels

If content channel types define the structure, content channels represent the implementation. Here's an example: you might have a channel type of Blog and channels Pastor Foster's Blog and Rock Solid Church's Blog that implement this type. You might be wondering why channel types are even needed. The answer is that they help enable reuse. In our blog example above, if you didn't have channel types you would have to define the structure every time you wanted to create a new blog - yuck!

When you create a new channel under Admin Tools > CMS Configuration > Content Channels, you have the following options:

1 Name:

The name of the channel.

2 Description:

A brief description of the channel. This description is available to be displayed on the page.

3 Icon CSS Class:

A CSS icon class to be used on the various internal entry and administration screens.

4 Enable RSS:

This setting enables the channel's RSS features. This allows the content items to be published to an RSS feed that can be consumed by an individual's RSS aggregator or another software system that supports RSS integrations.

5 Type:

The content channel type that this channel is implementing.

6 Items Require Approval:

Depending on your use case, you might want content items to require approval before they are displayed. This setting allows you to define this on a per channel basis.

7 Item Attributes:

Content channels inherit all of the item attributes defined by the channel type. There maybe times when a specific content channel needs to add a new attribute specific to it's implementation. You can add these new attributes here.

Adding Channel Content To Pages

Now that you understand how to create content channels and items, the next step is presenting this data out to your external website. The main block you will use to format channel content is the Content Channel Dynamic block. Adding this block to a page zone will allow you configure the following settings:

1 Channel:

The content channel you would like to display on the screen.

2 Status:

The content item status to filter on when creating a list of content items.

3 Format:

This is the Lava template selected to iterate through when displaying content items on the screen. See the Rock Lava documentation for tips and tricks on using Lava in Rock.

4 Items Per Page:

The number of items to make available for the Lava template.

5 Cache Duration:

Rock can cache the items returned from the database to help improve performance.

6 Set Page Title:

This will set the page's title based on the channel content. By default, it will display the channel name. If the query string contains an item id (in the format of Item=1) then that item's title will be used for the page title.

7 Detail Page:

This setting allows you to define the detail page to add as a Lava merge field. This allows your Lava template to link to the detail page.

8 Enable Debug:

This setting will output all of the merge fields available for use in Lava. This lets you see what data is available to help you make your Lava template.

9 Merge Content:

When this setting is enabled, the block will look for Lava fields in your content and attributes. Then, it will compile and render the Lava. This allows you to put Lava logic in your actual content. Think of the power of having blog posts that can actually be dynamic to the user reading them!

10 Filter:

The content filter is very similar to the data view screens. This section allows you to filter by any attribute or property of the content item.

11 Order Items By:

Allows you to set the display order of the content items.

12 Set RSS Audtodiscover Link:

If your content channel type supports RSS, you can choose to embed an autodiscover link to the channels RSS feed in the page header. This allows RSS feed readers to find the RSS feed link and use it.

13 Meta Description Attribute:

This setting allows you to pick an attribute to use for the meta description tag in the page header. This description is used when people share the page on social media.

14 Meta Image Attribute:

Allows you to set the page’s meta image tag in the header to the select image attribute defined on the content channel.

15 Enable Query/Route Parameter Filtering:

When this setting is enabled, the block will try to determine the content item to display based on a query string or route parameter value (other than the default ‘Item’ parameter). For example if you set this property and then include “?Title=Car Show” in the url, the block will look for an item that has a Title of ‘Car Show’.

SEO Friendly Content Routes

Because content channel query paramater filters also supports route parameters and item attributes, you could use this functionality to support SEO friendly routes for all of your content items. You would first create a new item attribute for your channel with a key of ‘slug’. Then add a new route to the page that has the Content Channel View block that includes the ''slug' parameter (e.g. ‘content/{slug}’). Making these configurations would allow you then to navigate to the page, using a url like /content/car-show.

Publishing Content Through Feeds

Once you enter your content, you may want to make it available through feed systems like RSS. Rock provides an endpoint that allows you to push your content in this way. The URL for this end point is:
http://yourserver.com/GetChannelFeed.ashx?ChannelId=X

The only required parameter is the ChannelId of the channel you want to publish. This channel must be configured to Enable RSS for the feed to return content.

The structure of the feed is defined by a Lava template. The RSS template is used by default, but you can create and configure additional templates to suit your needs. These templates are managed under Admin Tools > General Settings > Defined Types > Lava Templates. Once you create a new template, you can enable it by placing the TemplateId= parameter in the query string. The TemplateId will be the Defined Values Id. Note that the defined value can also set the MIME type that should be used with the template.

Other query string parameters you can pass into the handler include:

• Count: Limits the number of content items to return. The default value is 10.
• TemplateId: The defined value id of the Lava template you wish to use.
• EnableDebug: If present on the query string (with any value), the feed will output all available merge fields for you to view.

Let Dynamic Content Do the Work

The dynamic content tools discussed above can save you a lot of time by giving you an easy workflow for adding content to pages. Think of these tools as structured bits of content that can be schedule to display on your site. On each page think about how dynamic content could be used to keep the content fresh.

Remove the Bottleneck through Delegation

It sounds scary but allowing your ministry leaders to edit their content on the website can be safe. The secret is in the configuration. Below are some tips to make this a success.

• Give the ministry leaders access to small pieces of content, not the whole page.
• Use the HTML editor's pre/post text to ensure that the wrapping markup cannot be changed. Say for instance you give the ministry access to edit a Bootstrap alert box on the page. Be sure that the markup for the alert is in the pre/post text so the user can not remove or edit it.
• Enable the HTML editor's approval system. This will allow you to review the changes before they are published to the site.
• Use security wisely. Don't give a single user access to edit a specific content block. Instead, consider creating reusable security roles (e.g. Website Editors – Childrens). This will allow you to add similar user permissions in the future.

Advanced Routes

So far we've looked at how to create simple routes. Pages that contain dynamic content might have one or more required query parameters to be able to display. Consider a page that displays calendar events. Its default route might be http://www.rocksolidchurchdemo.com/page/234?EventId=12. Creating a route with the value of Event/{EventId} would add the ability to load the page with the address of http://www.rocksolidchurchdemo.com/Event/12. This new address is not only visually more appealing but is also SEO friendly.

You can add as many query parameters to your route as you like. For instance, the route of Event/{EventId}/{TabId} would enable the address of http://www.rocksolidchurchdemo.com/page/234?EventId=12&TabId=3 to be represented as http://www.rocksolidchurchdemo.com/Event/12/3.

If you would like to manage all routes defined in Rock you can see them listed under Admin Tools > CMS Configuration > Routes. From here you can edit or delete any route in the system.

Bootstrap

Bootstrap is a front-end framework that brings consistent styling to Rock. We are currently using Bootstrap version 3.0.0. Whether you're tweaking content on a page or writing a custom template, you’ll want to get familiar with the standard HTML/CSS mark-up that Bootstrap provides. Reading through their excellent documentation in its entirety is a great way to get started.

Font Awesome

Rock uses icons in several areas of the application. These fonts all come from the Font Awesome library. Since these icons are all font-based vectors, they can be colorized and resized very easily. To see a listing of all the icons in the collection visit http://fortawesome.github.io/Font-Awesome/.

jQuery

jQuery is a Javascript framework that's used by a majority of Internet sites. If you’re only interested in making minor changes it’s likely you'll never need to work with jQuery, but if you plan to make custom themes or blocks, you'll want to get familiar with it. Rock currently uses version 1.10.2. You’re welcome to use a newer version in your theme, but be sure that your version is backwards compatible to 1.10.2 to ensure Rock's core jQuery plugins work correctly. You can find out more about jQuery at jquery.com.

Less

If you're familiar with Cascading Style Sheets (CSS), you've probably experienced the frustration of repeating selectors and duplicate color definitions. Less blends a programming language and CSS. It offers concepts like reusable variables and object-oriented mix-ins. If you're worried about learning another new technology, don't be. Less is super simple. Soon you'll be able to brag to your friends about your knowledge of Less! You can read up on what's available in Less at http://lesscss.org/.

Liquid

Liquid is a templating engine written by Shopify. We've extended and customized Liquid in Rock to form our own templating engine called Lava (get it... liquid rock...). You've already been briefly exposed to the power of Lava in the introduction of this manual. Lava is used in several places in Rock, so it's worth you time to learn it well. Below are just a few of the places it's used:

• HTML Editor: Used for dynamically mixing in personal merge fields with your content.
• Menus: Navigation menus and page lists use Lava to assemble the HTML that is used to display them on the page.
• Email Content: Emails and SMS communications use Lava to personalize their content.

Learning Lava will make you feel like a superhero. Definitely take the time to master it. We've provided some great resources for you to learn Lava on our website.

Methods to Compile

Theme List

You can view a list of installed themes under Admin Tools > CMS Configuration > Themes.

1 Theme Name

Pretty obvious…the name of the theme.

2 Allows Compile

A theme designer can keep a theme from being compiled by Rock. This is rare and is usually only done for internal themes developed for a specific organization.

3 System

This notes that this theme is a system theme that came with Rock. These themes cannot be deleted.

4 Compile

This button allows you to manually compile a theme.

5 Clone

This button allows you to copy the theme to a new theme with a name of your liking. This allows you to change it without worrying about effecting others.

6 Delete

This button allows you to delete the theme.

Theme Styler

Selecting the theme from the list will take you to the Theme Styler. Below is the theme styler for the default internal Rock theme.

1 Theme Variables

You'll notice that theme designer has provided several variables for you to modify. These variables allow several different customizations. Some you'll notice allow you to choose colors. Others modify fonts, images and units of measure.

2 Variable Refresh

After changing a variable you'll notice a small x next to it next time you enter the theme styler. Selecting this x allows you to return the value back to its original state. Be creative… you can always go back to the default if you don't like your selection.

3 CSS Overrides

You may find that there is no variable for the change you want to make. Never fear, you can enter any overriding CSS in this box. It will be placed at the bottom of the compiled CSS to ensure that it gets the last say on how an element should be styled.

4 Save

Pressing the save button will not only save your changes, but also compile the Less file to CSS. If you're editing the internal Rock theme you'll notice your changes right away!

Contents of a Theme

• The .system file tells Rock that this theme is a system theme. This prevents it from being deleted in the Themes list.
• The Assets folder is used for all of the images, icons and other support files needed by your theme. This folder also contains a Lava child folder for all of the Lava files needed for your theme.
• The Layouts folder contains all of the layouts your theme supports. For external sites, your theme should define implementations for all of the standard layouts covered in the Looking Deeper At Layouts chapter.
• The Scripts directory will be used for any custom scripts your theme requires. Be sure to only place unique scripts here that are not contained in the global scripts folder.
• Finally, the Styles folder contains all of the files needed to generate your CSS. Specifics of these files is discussed in depth below.

Stark

No, this is not our Ironman theme, but this theme will become your go-to for custom theme development. Stark gets its name from the fact that it is basic and minimally styled. In fact, it comes with the least amount of styling possible. We created it as a starting point for you to create new works of art. Think of it as your blank canvas.

To start a new theme you should start by copy/pasting the Stark theme and then renaming it. Then start restyling the theme using the .less files.

How Rock Uses Less

There are two sets of .less files. Those in the core Styles folder and the theme .less files. The purpose of the core styles is to provide the basic structure and look/feel to the various Rock blocks. The theme's .less files add the final polish to the blocks and override any of the CSS attributes you desire. Let's take a quick look at each Less file that makes up a theme.

• .nocompile: This file tells Rock's Less compile tools to ignore this theme. This file should only be used in cases where a custom theme designer wishes to manually compile the theme's Less files (rare).
• _css-overrides: This file contains the Theme Styler's CSS overrides. It should not be manually edited.
• _print.less: This Less style file helps set specific print styles that make Rock pages look better when printed. The contents of this file are imported (appended) into the theme.less file. For the most part, you should not need to modify these styles unless there is a specific print styling you would like to add.
• _variable-overrides: This file contains the Theme Styler's variable overrides. It should not be manually edited.
• _variables.less: This is a very powerful file. It contains a rather large list of style settings that you can change. Simply changing a couple of colors can make your theme match the brand colors of your organization. We highly recommend that you make a copy of the Stark theme and start playing with the variables in this file. You’ll be surprised how easy it is to make some dramatic changes.
• bootstrap.less: This is the core Bootstrap Less file. You should not change this file. If you need to modify a style setting in Bootstrap you should either identify the variable that Bootstrap uses to control that style in the _variables.less file or write a specific override in your theme.less file.
• theme.less: This is the file that contains all of your theme's custom styling. If you can’t style it with a variable change in the _variables.less file it should be added here.

Themes Are More Than Looks

Keep in mind as you develop your theme that you need to be concerned more than than just how your theme looks in the visitors browser. You should also be testing to ensure your theme works well with Rock's in-page editing features. Zone and block editor features should work well with your theme to allow web administrators access to edit the pages.

To help you with this Rock will add classes to the <body> tag when the zone and block editors are enabled. These classes are 'zone-highlight' and 'block-highlight' respectively. With these classes you can adjust your layouts when these editors are at work.

Rock will also add the class 'modal-open' to the <body> tag when a modal is open. This allows you to do special styling when this event occurs.

Lava

Every theme should include some implementations of the standard Lava files in the theme’s ./Assets/Lava folder. Each of these files is covered below.

• AdList.lava: This is used to render HTML for the various lists of ads on pages.
• AdDetails.lava: This is used to render HTML for the details of a specific ad.
• AdRotator.lava: This provides the markup for the large ad rotator on the homepage.
• BlogItemList.lava: Renders markup for a list of content channel blog entries.
• BlogItemDetail.lava: Renders markup for a content channel blog entry.
• PageListAsBlocks.lava: This lava is for rendering a list of pages as blocks like the ones on the various Admin Tools pages.
• PageListAsTabs.lava: This renders markup for showing a list of pages as a Bootstrap tab or pill navigation.
• PageNav.lava: Used for a page's main navigation.
• PageSubNav.lava: Renders markup for a page's sub-navigation.
• RSSFeed.lava: Renders markup for a content channel RSS Feed.
• RSSFeedItem.lava: Renders markup for an item in a content channel RSS Feed.

Testing Your Theme

As you're working on your theme you might be wondering how you can view it without everyone seeing what you’re working on. Well prepare to have your mind blown. Because you're a Rock Genius, you know that when a page loads it gets the active theme by looking at the site's theme setting. Pretty simple. You can, however, override this setting by adding the query parameter theme='themename'. For instance if your page is available at:

http://www.rocksolidchurchdemo.com/page/1
you can have that page display your new theme by typing in:
http://www.rocksolidchurchdemo.com/page/1?theme=MyStarkTheme

The best part is that only you will see it. Everyone else will see the current theme defined on the site. Pretty James Bond, huh?

As an example to the warning above if you're using certain CSS filter you may find that you need to escape them. For instance if you add the CSS below:

.item { filter: blur(8px) !important; }

You may find that your compiled CSS is blank. To fix this you'll need to escape the filter using by appending a ~ and wrapping the filter in quotes like:

.item { filter: ~"blur(8px) !important"; }

Theming for the Styler

As you have already seen, Rock's Theme Styler is a powerful tool for allowing others to edit your theme. It's easy for you to enable others to change your theme by making a few small changes to your _variables.less file. Below is a side-by-side comparison of the _variables.less file for the internal Rock theme and the UI created from it in the Rock Styler.

Let's look at a few lines to see how the _variables.less file is magically transformed into this nice editor.

• Line 1: Adding a '//' followed by text will create a new variable grouping. To turn this grouping into a panel in the styler you'll also need to append *show in editor*. This allows you to also create groups that are not editable.
• Line 2: Line two and we're already adding our first variable. The label for the variable will be the variable name (minus the @ character). All dashes in the variable names will become spaces. The values in the comments will be used for the help text. Finally, if the comment ends with #color, Rock will render it as a color field. The color field is smart enough to render as a plain 'ol textbox if it contains less functions like darken.
• Line 4: Placing the characters '//--' will insert line breaks in the editor. This allows you to easily sub-group your variables.
• Lines 7-28 These lines were omitted to simplify the illustration.
• Line 29: Note that there is no end marker for variable groupings. When you're done with one, simply start a new one.

Rock Folders

• App_Browsers: You should not need to worry about this directory. It's a special directory that allows ASP.Net to identify specific browsers and determine their capabilities.
• App_Code: This directory contains un-compiled code for Rock. You do not want to alter or add files in this directory.
• App_Data: This directory allows you to store data without having to worry that a client could browser directly too it. For instance, Rock writes a log of severe error messages to this directory (specifically ~/App_Date/Logs/RockExceptions.csv). But, because the webserver blocks requests to access these files directly, you do not need to worry about someone being able to access them. You'll also notice that Rock keeps a cache of binary files in ~App_Data/Cache/. For the most part you don't need to know about this, but it’s good to know how things work under the hood.
• Assets: This is the global assets folder where Rock stores images, icons, fonts, etc. that are a part of the core install. You should refrain from storing your files in this directory.
• Bin: ASP.Net keeps its compiled assemblies (aka .dlls) in this folder. If you have custom plugins with compiled assemblies, you'll want to add them here. Keep in mind that if you add/modify/delete any file in this directory Rock will restart which could impact people using Rock at the time. You should only do this after hours.
• Blocks: These are the core Rock blocks. As you can see they are organized by function. You should not modify any of these blocks nor add your own. This location is reserved for the core blocks.
• Content: This is where you'll add your custom content for your various sites. While it's up to you to determine the best file and folder structure, we recommend that you at least keep the content for the various sites separate. Over time these folders can get quite messy so it's best to come up with a good filing structure from the beginning.
• Plugins: The plugins folder is where you'll place all of your custom blocks. The organization of the files in this folder is very important. To help keep things straight the following pattern should be used.



1. The top-level should start with a reverse domain organization notation. For instance if your organization uses the domain rocksolidchurchdemo.org your top-level folder should be org_rocksolidchurchdemo.
2. Under your root folder you’ll have a child folder for each plugin that you develop.
3. Under the plugin folder you’ll have folders for things like Assets, Styles and Scripts. You’ll also put the blocks themselves in the root folder.
• Scripts: This is the core scripts folder. You should not add scripts to this folder. Instead add your scripts to your custom theme folders.
• Styles: The styles folder is for Rock's core .less files. You should not edit these files as they will be overwritten during updates. If you need to modify the properties of a certain style you should override them in your custom theme files.
• Themes: This is the location of all the themes for your Rock install. See the chapter Working With Themes for more information on themes.
• Webhooks: Webhooks are HTTP handlers (Web 2.0 geek-speak for very basic webpages) that receive requests from Internet services like Mandrill and Twillio. For instance, Twillio will call a specific webhook every time someone responds to your SMS message to notify you of the details of the response. When you write a custom webhook you can place it in this folder.

Couple of Important Files

While we won't cover every file in the root Rock folder, below are a couple that you should be aware of.

• License.aspx: Rock uses several open-source projects in its core. Attribution for each of these projects is given here. We also note each of their licenses so as to show that our license (Apache) is not in conflict to theirs.
• Web.config: This is the core settings file for any ASP.Net application. Unless you know exactly what you're doing you should stay away from editing this file. Keep in mind that any change to this file will cause Rock to restart.

File Manager

The file manager provides a basic interface to help you to upload and delete files and manage directories without having to setup or share FTP credentials. Its root folder can be configured allowing you to enable a specific user or security role to manage a specific part of a folder heirachy. By default a File Manager block can be found Admin Tools > CMS Configuration > File Manager.

Tips for Creating Your Form

When you're creating your form you can use any HTML you'd like. We provide an inclusive sample that shows you many of the advanced features. Below are a few points to consider:

• You have access to Lava in your form. If the guest is logged in, you can personalize your message.
• If they are logged in you can also pre-enter many of the fields. In some cases you may want to simply add their name to the name field and allow them to change it. In other cases you can put their information in as text that can't be changed. When you do this you can pass the value of their name in a hidden field. The sample shows both cases. It's up to you to determine which one will work best.
• Your email form can include attachments. This is shown at the bottom of the sample form.
• You do NOT need to have an HTML tag in your markup. Don't add one or you'll break the page.