Personalizing Venus Starter Site

Have the Venus starter site your way

You can personalize the website by quickly changing a few things about it:

Change the colors in use (especially the primary brand color)
Add your own logo
Insert new page blocks
Change texts and links in the page footer
Change the links on the "Contact us" page

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 website's colors, especially the primary brand color, by editing specific 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 website is located 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 95px (height) by 205 px (width). The logo in use is 51 x 116.

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

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 Venus starter site.

There are a few page blocks available on the Venus starter site:

Iconified Statements: Shows a group of statements decorated with large icons
Image: Shows a random image from a specific media folder
Image and Text: Shows a specific image and text
Jumbotron: Shows a statement on an image as the background, normally used on front pages
Statement: Shows a statement (normally but not necessarily one-sentence motto-like text)

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

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, PageBlocks.Statement.
Set the parameters. For example, in the PageBlocks.Statement, you should type in the statement content and select the background.
Save and publish the page.

How to change the links and text in the footer

The footer on each page of the Venus 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 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.

How to change the "Contact us" page

By default the "Contact us" page (/About-us/Contact-us) of the Venus starter site contains links to C1 CMS-related URLs and a contact form.

You can replace the links with your own:

From the "Content" perspective, expand "Websites" / "Venus Starter Site" / "About us" and edit the "Contact us" page.
Edit each 'Iconified Statements' page block (the PageBlocks.IconifiedStatements functions).
Change the value of the "Link" parameter to that of your own.
Change other parameters if necessary.
Click OK to save the changes and save and publish the page.

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 Venus starter site:

the main menu ("mega menu")
the service-menu
the jumbotron
the page footer
page-blocks

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 #fff to the one you prefer.
Save the changes.

Show comments / add a comment

Know it first and engage with us on all channels