Tutorial: A very basic website - Create a stylesheet

We need your assistance to make the documentation accurate, user friendly and understandable. Therefore we welcome any tips or suggestions regarding documentation. Thank you in advance for your contribution.

However, we will not respond to technical support questions submitted using this form. If you are having difficulty with CMSMS and cannot find the solution on this website, please submit your question appropriately on our support forum at: http://forum.cmsmadesimple.org. Please remember to follow the forum rules when posting.

CMS Made Simple™ Partner



Tutorial: A very basic website - Create a stylesheet

In this part you're going to create a basic stylesheet for the Basic demo design and link it in the page template.

Steps

Open Design Manager (Layout → Design Manager). On the Stylesheets tab click the Create a new Stylesheet link.

In the Name field type: Basic demo css.
Copy the code below into the Stylesheet field:

h1 {
 color: red;
}

ul li a {
 color : green;
}

On the Designs tab select the Basic demo design.
Submit the stylesheet.

Open Design Manager (Layout → Design Manager). On the Templates tab click the Basic demo - 1 template.

Replace the code in the Template Content field:

<!doctype html>
<html>
<head>
  <title>{sitename} :: {title}</title>
  <meta name="description" content="{description}">
  {cms_stylesheet}
</head>
<body>
  {Navigator}
  <h1>{title}</h1>
  {content}
  <hr>
  {content_image block='image1'}
  <hr>
  {content block='content2' label='Second content block'}
</body>
</html>

Submit the template.

Refresh the webpage (front end) and notice that the basic menu links now are green and the heading with page title is red.

Visuals

More info

Tutorial contents