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 walk through using the specific styling options that have been set up for the 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
Navigate to Website/CMS > Pages.
There may be certain pages that are set up with specific styling. To set a page to use that style, add or edit a page, and select an option from this dropdown:
| Template | Description |
| 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.
To add a section with a specific style (such as a different color background):
- Select Start Editing at the top left of the page
- 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: The page may need to be refreshed after adding or reordering content sections. When moving or adding sections, this may not look as expected before refreshing.
Link or Button Styling
Here are the steps to use any custom button styles that have been set up for the 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 the site. If unsure of what to enter in that field, please reach out to Support.
Widgets
The template in use probably includes a Service Times or Upcoming Events section. This kind of section is generally automated, using widgets.
This information does not require manual updates. It automatically pulls from the schedule times and events entered into the ShulCloud calendar.
When the design is first implemented, the schedule rules or events may not yet be entered, so the service times and events section may appear empty.
Once these items are added, the sections will populate accordingly. Widgets can also be added or removed as needed.
Text Styling
The CKEditor
The CKEditor toolbar includes options for font size and color. With a custom design, these options are rarely needed.
Instead, switch between Normal and the available heading styles for proper formatting.
Stripping Out Formatting
- Edit the section and highlight all text.
- Press Ctrl + X to remove the content from the section.
- Select the T with a clipboard icon on the top row of the toolbar.
Paste the text back using Ctrl + Shift + V.
This removes colors, bolding, and other formatting from the text.
Copying Content onto Another Page
To copy a section onto another page without losing formatting:
- Select the </> button at the bottom right of the editor and copy the HTML code.
- On the second page, edit the section and paste the HTML by selecting the </> button again.
Note: Any widgets, such as sliders, must 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 recommended width-to-height ratio is approximately 3:1, and images will need to be cropped to achieve this ratio. The images in the slider do not need to be exactly the same size, but they must share the same aspect ratio. For example, one image could be 2100 pixels wide and 700 pixels high, while another could be 1800 pixels wide and 600 pixels high.
There are three possible ways a banner image or slider can be added to a page. Below are descriptions of these options and the steps for editing images or sliders in each case.
1. Image
The image may be added directly to the page. In this case, 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 click Browse Files to choose an image.
- If a content section template is needed, click the More Options button above the section to view the list of templates. Select the appropriate template, such as Banner Image.
- If the image does not automatically fill the section, double-click the image and remove the width and height values.
Another way to make an image fill the whole width of the section is by typing in "100%" in the Width field. Then 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 box labeled “slideshow widget here” from the section.
- Select the Insert Widget option on the toolbar.
- Choose and add the desired slider from the available options.
The slider image(s) and text can be edited by navigating to Website/Media > Sliders.
3. Header Slider
This may be added as a slider attached directly to the page rather than inside a content section. This approach ensures the slider or image always appears at the top of the page.
In this case, the slider will not display an “edit section” button, even after “start editing” has been selected.
To remove this slider from the page, or to replace it with a different slider:
- Select 'start editing' at the top left, and edit the page options. There is an option to select the header slider.
- Select which slider to use:
- Edit the slider images/text/links by navigating to Website/Media > Sliders.