Personalization

Turn the Open Cph starter site into your site

You can quickly personalize the Open Cph site by:

Changing the colors in use on the site
Changing header images on the front page
Inserting content spots
Changing content in the page footer

Note. This information is also applicable to the Tiny Cph starter site.

Changing 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).

Changing the header images

You can change the header images displayed in a slide show on the front page of the website or replace them with your own static image.

To replace the header images:

From the "Media" perspective, create a folder and upload your image into it.
From the "Layout" perspective, expand "Page Template Features".
Select and edit the "Front Page Content Start" template feature.
Edit the "Composite.Media.BootstrapCarousel" function.
In the "Images folder" parameter, select the folder from Step 1.
Save the function and then save the template feature.

Here, you can also delete the function altogether and insert a "static" image instead (Insert / Image).

Inserting content spots

To add some quick information to pages, you can create and make use of "content spots" like those on the front page of the Open Cph starter site.

To create a content spot:

From the "Content" perspective, expand "Website Items" / "Content Spots".
On the toolbar, click "Add Data".
On the "Settings" tab, type in the title of the content spot in the "Title" field.
On the "Spot" tab, add and format content of the spot.
Save and publish the spot.

Content spots are represented by a CMS Function "Content.ShowContentSpots". You can select one or more spots to show on a page with a single function.

To insert a content spot on a page:

From the "Content" perspective, edit a page.
Switch to a specific content placeholder if necessary. Normally, content spots appear in the "Aside column".
Insert > Function > All Functions > Content > ShowContentSpots.
In the "Content Spots" parameter, click "Edit Selections", select content spots you want to appear on the page.
Use the up and down arrows to arrange the order of the content spots.
Click OK to close the selection window and the click OK to save the function.
Save and publish the page.

Changing the content in the footer

The footer on each page of the Open Cph starter site contains some placeholder content.

You can replace it with your own content in the "Page Footer" template feature:

From the "Layout" perspective, expand "Page Template Features".
Select and edit the "Page Footer" template feature.
Replace the default content with, or add, your own content.
Save this template feature.

Show comments / add a comment

Know it first and engage with us on all channels