Personalization

Adjust the Neptune starter site to your need

You can quickly personalize the Neptune starter site by:

Changing the colors in use (especially the primary brand color)
Adding your own logo
Inserting new page blocks
Adding Jumbotron slides
Changing texts and links in the page footer

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

How to change the colors

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

On your website, edit ~/Frontend/Styles/bootstrap/variables.less.

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.

Save the variables.less file.
Refresh the website (F5).

How to change the logo

The logo displayed in the top left corner of the Neptune 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 80px (height) by 338 px (width). The logo in use is 39 x 165.

Note. The height depends on the navbar's height defined in variables.less as @navbar-height: 80px;

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 of the Neptune starter site.

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

Statement: Shows a statement (normally but not necessarily one-sentence motto-like text)
Jumbotron: Shows a statement on an image as the background, normally used on front pages
Jumbotron slides: see "How to insert Jumbotron slides" below

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

You can change its looks by applying one of the pre-defined themes or apply none. Each type of the page block has its own set of themes.

To insert a page block:

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

How to insert Jumbotron slides

You can add 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:

Add a "Jumbotron Slides" page folder to the page.
Add slides to the page folder.
Add the rendering CMS Function "PageBlocks.JumbotronSlides" onto the page.

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

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

To add slides:

Select "Jumbotron Slides" under the page and click "Add Data".
In the data form that opens, fill out the fields:
- Slide name: The name of the slide
- Slide content: The content of the slide
- Background Image: The image to use as the slide's background
- Content text color: The color of text to use: light or dark, which depends on the background
- List priority: The slide's priority in the list
Save and publish the slide.
Repeat Steps 1-3 for as many slides as you need.

To add the rendering function:

Edit the page where you've just added the slides to.
Insert > Function > All Functions > PageBlocks > JumbotronSlides.
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" template feature:

From the "Layout" perspective, expand "Page Template Features".
Select and edit the "Page Footer" template feature.
Replace the content with your own.
Switch to Source view and, at the bottom of the page, locate <div> elements (class="contactbox-social") that wrap <a> elements.

Replace the links ( href="") with your own.

<div class="contactbox-social">
  <a href="mailto:info@company.com" title="E-mail">
    <span class="icon fa fa-envelope-o"></span>
  </a>
  <a href="tel:+1-111111" title="Phone">
    <span class="icon fa fa-phone-square"></span>
  </a>
  <a href="http://www.facebook.com/CompositeC1" title="Facebook">
    <span class="icon fa fa-facebook-square"></span>
  </a>
  <a href="http://www.twitter.com/CompositeC1" title="Twitter">
    <span class="icon fa fa-twitter-square"></span>
  </a>
  <a href="https://www.linkedin.com/groups/Composite-C1-104931/about" title="LinkedIn">
    <span class="icon fa fa-linkedin-square"></span>
  </a>
</div>

Save this template feature.

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:

the main menu
the service menu
the jumbotron
the page footer

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

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

Show comments / add a comment

Know it first and engage with us on all channels