OUR WEBSITES
CLOSE

Know it first and engage with us on all channels

USA / Canada
1111, St-Charles Street West, Suite 255
Longueuil, Quebec
Canada J4K 5G4
Toll Free: 1-877-398-0999
Phone: 1-514-398-0999
Europe

Hoejbro Plads 10
1. Floor
1200 Copenhagen
Denmark
General Inquiries & Sales:
+45 39157600

Getting started
Starter Site Options
Mercury
Personalization

Personalization

Personalize the Mercury starter site as you wish

You can quickly personalize the Mercury starter site by:

You can also manage the looks of components such as the service menu or page footer via CMS variables.

How to change the colors

You can change the Mercury site's colors (for example, the primary brand color) by editing respective variables in the variables.less:

  1. On your website, edit ~/Frontend/Styles/bootstrap/variables.less.
  2. Locate and change one or more of the following variables. 
    @gray-base:              #000;
@gray-darker:            lighten(@gray-base, 13.5%); // #222
@gray-dark:              lighten(@gray-base, 20%);   // #333
@gray:                   lighten(@gray-base, 33.5%); // #555
@gray-light:             lighten(@gray-base, 46.7%); // #777
@gray-lighter:           lighten(@gray-base, 93.5%); // #eee

@brand-primary:         #4189ff;
@brand-success:         #5cb85c;
@brand-info:            #5bc0de;
@brand-warning:         #f0ad4e;
@brand-danger:          #d9534f;
    and 
    @body-bg:               #f0efed; 					//** Background color for `<body>`.
@text-color:            @gray-dark; 				//** Global text color on `<body>`.

@link-color:            @brand-primary;				//** Global textual link color.
@link-hover-color:      darken(@link-color, 15%);	//** Link hover color set via `darken()` function.
@link-hover-decoration: underline;	 				//** Link hover decoration.
  3. Save the variables.less file.
  4. Refresh the website (F5).

How to change the logo

The logo displayed in the top left corner of the Mercury starter site can be found at: ~/Frontend/Images/logo.png

To change it:

  • replace the logo.png with your own file using the same file name.

The maximum sizes of the logo image can be 85px (height) by 200 px (width). The logo in use is 85 x 85.

How to insert page blocks

To quickly add well-formatted content to a page, you can make use of page blocks. You can see them in use on the front page and other pages of the Mercury starter site.

There are a few types of page blocks available on the Mercury starter site:

  • Appear Animation: Shows content appearing with animation
  • Device Specific Content: Shows different versions of content on mobile devices and desktop devices
  • Iconfied Box: Shows content with an icon, title, read more URL and text
  • Iconified Text: Shows content with an icon
  • Image and Text: Shows content with an image with a configurable position
  • Image Box: Shows content with an image
  • Jumbotron: Shows a statement on an image as the background, normally used on front pages
  • Jumbotron Slides:
    • Animated Content Item: Shows content with animation (appearing and disappearing effects and delay)
    • Cycle: Shows jumbotron slides (see "How to insert Jumbotron slides" below)
  • Statement: Shows a statement (normally but not necessarily one-sentence motto-like text)
  • Three Columns in Row: Shows content in three columns

Each page block is represented by a CMS Function of the 'PageBlocks" namespace: e.g. PageBlocks.Statement.

You may change its looks by applying one of the pre-defined themes where available, or apply none. Each type of the page block may have its own set of themes.

To insert a page block:

  1. From the "Content" perspective, edit a page.
  2. Insert > Function > All Functions > PageBlocks > select a page block of the type you need, for example, Statement.
  3. Set the parameters. For example, in the PageBlocks.Statement, you should type in the statement content and select the background style.
  4. Save and publish the page.

How to insert Jumbotron slides

You can also add content split between a few page blocks that will change each other automatically - Jumbotron slides. They normally include a background image and within it content part you can also add a link or a button link to another page on the website.

To add Jumbotron slides to a page, you need:

  1. Add a "Jumbotron Slides" page folder to the page.
  2. Add slides (images) to the page folder.
  3. Add the rendering CMS Function "PageBlocks.JumbotronSlides.Cycle" onto the page.

To add the "Jumbotron Slides" page folder to a page:

  1. From the "Content" perspective, right-click the page where you want the slides.
  2. Click "Add Datafolder".
  3. In the window that pops up, select "Jumbotron Slides" from the drop-down list.
  4. Click "Finish".

To add slides:

  1. Select "Jumbotron Slides" under the page and click "Add Data".
  2. In the data form that opens, on the " Slide" tab fill out the fields:
    • Title: The title of the slide
    • Background Image: The image to use as the slide's background
    • Background Overlay: The color style for the silde's background overlay: light, dark (default), or none.
    • List priority: The slide's priority in the list
  3. On the "Slide content" write the content for the slide.
  4. Save and publish the slide.
  5. Repeat Steps 1-4 for as many slides as you need.

To add the rendering function:

  1. Edit the page where you've just added the slides to.
  2. Insert > Function > All Functions > PageBlocks > JumbotronSlides > Cycle.
  3. Save and publish the page.

For a static single-slide content, select the PageBlocks.Jumbotron function.

Showing device-specific content

You can choose what content to show on desktop and mobile devices respectively by using a dedicated CMS Function: PageBlocks.DeviceSpecificContent.

  1. Edit the page where you want different "mobile" and "desktop" content.
  2. Insert > Function > All Functions > PageBlocks > DeviceSpecificContent.
  3. In the "Mobile Content" parameter, write content to be seen on mobile devices.
  4. In the "Desktop Content" parameter, write content to be seen on desktop devices.
  5. Save the changes.

On the "Mercury" starter site, you can see this function in use within the "Frontpage Start" content placeholder on the Frontpage.

How to add projects to the portfolio

You can present your portfolio of projects on a dedicated page.

To add the portfolio to a page, you need:

  1. Add the "Portfolio" application to the page.
  2. Add projects and, if needed, project categories.
  3. Add the rendering CMS Function "Composite.Lists.Portfolio.List" onto the page.

To add the "Portfolio" application to a page:

  1. From the "Content" perspective, right-click the page where you want the slides.
  2. Click "Add Application".
  3. In the window that pops up, select "Portfolio" from the "Application" drop-down list.
  4. Click "Finish".

To add project categories:

  1. Select "Categories" under the page and click "Add Category".
  2. In the data form that opens, fill out the fields:
    • Title: The title of the category
    • Ordering: The category position in the list
  3. Save the category.
  4. Repeat Steps 1-3 for as many categories as you need.

To add projects:

  1. Select "Projects" under the page and click "Add Portfolio Item".
  2. In the data form that opens, on the " Project" tab fill out the fields: 
    • Category: The category the project belongs to.
    • Project Title: The title of the project
    • Project Description: A short description of the project
    • Teaser Image: The image to use as the title image of the project
    • Images Folder: The media folder with the images related to the project (screenshots, photos, etc)
    • YouTube or Vimeo URL: The URL to a video hosted on YouTube or Vimeo, relate to the project
  3. On the " Project Info" tab fill out the fields:
    1. Client: The of the project if any
    2. Date: The date of the project if any
    3. Project Place: The project's place if any
    4. Project URL: The URL to the project's web page or website
  4. On the "Project Description" tab, write the description for the project.
  5. Save and publish the project.
  6. Repeat Steps 1-5 for as many projects as you need.

To add the rendering function:

  1. Edit the page where you've just added the slides to.
  2. Insert > Function > All Functions > Composite > Lists > Portfolio > List.
  3. If necessary, write some introduction to the portfolio in the "Intro Text" parameter.
  4. Save and publish the page.

How to change links and text in the footer

The footer on each page of the Neptune starter site contains some dummy / placeholder text as well as a few iconified links that points to URLs related to C1 CMS.

You can replace the text and links by editing the content of the page footer-related template features. There are 3 template features, each standing for the left, center and right column of the footer:

  • Footer Column 1: The left footer column with iconified social media link buttons.
  • Footer Column 2: The center footer column with iconified contact information.
  • Footer Column 3: The right footer column with some "About the company" information with a "Read More" link.

To change the information in the page footer:

  1. From the "Layout" perspective, expand "Page Template Features".
  2. For the social media links:
    1. Select and edit the "Footer Column 1" template feature.
    2. Edit the "Icon Links" function (Composite.Social.IconLinks)
    3. Make changes in the parameters where needed.
    4. Save your changes.
  3. For the contact information:
    1. Select and edit the "Footer Column 2" template feature.
    2. Edit a corresponding "Iconified Text" page block (PageBlocks.IconifiedText).
    3. Change the icon and the text where needed.
    4. Save your changes.
  4. For "About the company" information:
    1. Select and edit the "Footer Column 3" template feature.
    2. Change the text and links where needed.
    3. Save your changes.

C1 CMS variables

In addition to the standard Bootstrap variables, which you can change to personalize the website (see "How to change the colors" above), stored in ~/Frontend/Styles/bootstrap/variables.less

there are a number of C1 CMS specific variables, you can also change to adapt the website to your requirements.

These variables are stored in ~/Frontend/Styles/includes/c1-variables.less.

Here you can manage colors, fonts, links of the following components used on the Neptune starter site:

  • header
  • the main menu
  • the service menu
  • the page footer

For example, if you want to change the default white color of the heading in the page footer:

  1. Edit ~/Frontend/Styles/includes/c1-variables.less.
  2. Locate the @pagefooter-heading-color variable under //page footer.
  3. Change its current value of @gray-lighter (defined in variables.less) to the one you prefer.
  4. Save the changes.

ABOUT C1 CMS IN SHORT

C1 CMS is a powerful Content Management System that scales out in the cloud. C1 CMS Foundation is one of the world’s best-rated free Open Source CMSes. Built on the Microsoft stack and installed in more than 100 countries. C1 CMS is also seamlessly integrated in our Unified Commerce offering - Orckestra Commerce Cloud.


UPDATES ABOUT C1 CMS

Get a regular digest about the C1 CMS. Learn about releases, solutions, features with a dash of technology.