Working with CMS for a Custom-Designed Site

Jump To:

• Page Templates
• Content Section Templates
• Buttons
• Widgets
• Text Styling
• Copying Content from one page to another
• Banner Images/Sliders
   

Overview

When working with a custom-designed site, there are often pages that have specific styling.  There may be individual sections and links that are styled differently as well.

This help document will guide you through using the specific styling options that have been set up for your site.

Please Note: This is not a document on basic CMS. If you are unfamiliar with ShulCloud's content management system, we recommend to take a look at the other help documents on CMS first.

 

Page Templates

There may be certain pages that are set up with specific styling.  To set a page to use that style, you can add or edit a page, and select an option from this dropdown:

Global Template: This would add a page with no special styling.

Custom Templates: In this example, five variations are available.  A page can resemble either the Facilities, Tikkun Olam, Staff, Home, or Events page.

 

Content Section Templates

A custom design very often has styles that are specific to a certain section on a page.

If you'd like to add a section with a specific style (such as a different color background):

1. Select Start Editing at the top left of the page

2.  select More Options

3.  Choose the content template that you need.

 

By default, a new content section will have the global template, and will not have any special styling.

Please Note: You may need to refresh the page after adding or reordering content sections.  When you move or add sections, this may not look as you would expect before refreshing.

 

Link or Button Styling

Here are the steps to use any custom button styles that have been set up for your site:

1. Either select the link icon on the editor, or double-click on an existing link

2.  Select the 'advanced' tab, and enter in a stylesheet class.

Please Note: the stylesheet class in this screenshot is only an example, and will not work on your site.  If you are unsure of what to enter in that field, please reach out to us on support.

 

Widgets

Your template probably includes a Service Times or Upcoming Events section. This kind of section is generally automated, using widgets.

This means that you won't need to update any of this information manually. This will pull from the schedule times/events that were entered into the ShulCloud calendar.

When the design is first implemented, there may be no schedule rules/events entered yet, so you won't see the service times/events section populated on the site.

Once these are added, the sections will be populated. You'll be able to delete/add these widgets as well.

 

Text Styling

The CKEditor

On the CKEditor toolbar, there are options for font size and color.  With a custom design, you should almost never need these options.

Instead, you can switch between Normal and the heading styles:

Stripping Out Formatting

The sizing, font styles, and color options on the CKEditor will override the custom design.  You may want to remove any styling that has been added with the CKEditor, in order to use the default styling again for a section.

An example would be if a font was selected, but you would like to revert this to the default font.

Here are the steps to strip out formatting:

1.  Edit the section, and highlight all of the text in the section. Then hold down ctrl+x.
   This will remove the content from the section.  
2. Select the clipboard with a T on the top row of the toolbar
   
3. Paste in the text again using ctrl+shift+v.
   This will remove any colors/bolding/other formatting from that text.

 

Copying Content onto Another Page

If you would like to copy a section onto another page without losing any formatting, you can select the <> button at the top left of the editor:

Then you can copy the HTML code.

Edit a section on the second page, and you'll be able to paste in the HTML by selecting the <> button again.

Please note that any widgets, such as sliders, will need to be re-added to the new section manually.

 

Banner Images/Sliders

Optimal Image Size

• For a full-width slider, the optimal image size is at least 2000 pixels wide.
• The width:height ratio should be around 3:1.  Images will need to be cropped in order to achieve this.
• The images in the slider do not need to be exactly the same size. However, they do need to have the same aspect ratio.
• For example, one image could be 2100px wide and 700px high, and another could be 1800px wide and 600px high.

There are three possible ways that a banner image or slider would be added to the page.

Below are descriptions of these three options, as well as steps on how to edit the images/sliders in each case.

1.  Image

The image may be added directly to the page. In this case, you can edit the section, and double-click on the image.

 

Here are the steps to add a new banner image:

• Select the image option on the CKEditor, and select Browse Files to choose an image
• You may need to add a content section template to the section.  You can do this by clicking on the More Options button above the section.
  Then you will see a list of the templates to choose from.  For example, you may need to choose the 'Banner Image' template.
• You may see that an image is not auto-filling the section.  You will need to double click on the image, and erase the width/height here:

Another way to make an image fill the whole width of the section is by typing in "100%" in the Width field.  Then you can make sure that the lock symbol is 'locked'.

2.  Slider Inside Content Section

This may be added as a slider widget inside of a content section. 

To replace this with a different slider, delete the 'slideshow widget here' box from the section. Then select the Insert Widget option on the toolbar, and you will be able to add in any slider.

The slider image(s) and text can be edited by going to admin menu -> CMS Pages -> Setup Sliders.

3.  Header Slider

This may be added as a slider that is attached to the page itself, not inside of any content section. This would be used so that the slider or image always show up at the top of the page.

If this were the case, there would be no 'edit section' button on top of the slider, even once 'start editing' has been selected.

To remove this slider from the page, or to replace it with a different slider, you will need to select 'start editing' at the top left, and edit the page options.  There is an option to select the header slider.

Then you can select which slider you would like to use:

You can edit the slider images/text/links by going to admin menu -> CMS Pages -> Setup Sliders.