3 ways to plug custom css stylesheet in cmsms
There are 3 basic ways to plug custom CSS file in cms made simple (if you use your imagination and experience, you can create more, but these ones are the easiest and the most natural). I believe this tutorial might be useful for the ones who just began using CMS Made Simple.
The first way: Using native stylesheet mechanism of cms made simple
1. Log in to CMS Made Simple admin backend.
2. Go to "Layout" menu -> "Stylesheets"
3. Click on "Add a Stylesheet" link at the bottom.
4. Fill "Name". It’s just for you to identify the CSS in admin. It’s not visible on customer side except comments in CSS body, which will look like:
/* Start of CMSMS style sheet 'cssname' */
/* CSS body here */
/* End of 'cssname' */
5. Fill "Content". That will be the CSS body.
6. Select necessary "Media type". If you don’t know what it is, then you most probably don’t need to tick any checkbox.:)
7. When you’re ready, click "Submit".
8. Then go to "Layout" menu -> "Templates".
9. On the necessary template line, click "CSS" button ("Attach stylesheets").
10. You will see the list of attached stylesheets. In the bottom there will be available a dropdown with other available stylesheets. It should include your newly created stylesheet. So, select it in the dropdown and click the "Add a Stylesheet" button.
11. If it’s necessary, you can change the stylesheets order.
12. Now open a page in the frontend and check if the stylesheet has been plugged in.
Method number two: Using metadata in global admin settings.
1. Upload your CSS file to somewhere on the server, for example create "css" folder in the root directory of cms made simple and upload "style.css" there.
2. Log in to admin backend.
3. Go to "Site admin" -> "Global settings"
4. In "Global meta data", add
<link rel="stylesheet" type="text/css" href="{root_url}/css/style.css" />
Note, that you don’t have to replace {root_url} with anything. It is a special tag that will add your site root URL automatically.
The 3rd way: Directly in website templates.
1. Get into admin area.
2. Go to "Layout" -> "Templates"
3. Open the necessary template for editing and add the code in the <head>:
<link rel="stylesheet" type="text/css" href="{root_url}/css/style.css" />