Stylesheets

Contents


Cascading Stylesheets are just as important in today's web design world as the template itself. Most designers in this day and age use a combination of semantic markup and stylesheets to make their sites accessible and easy to modify. CMSMS believes in web standards and the stylesheet admin is a tool for conforming to them.
It's not necessary here to go into the details of CSS, as it's covered in plenty of other very valuable resouces on the web already.
The stylesheet admin is actually very basic. There are no tags or other little gotchas. You literally create a new stylesheet, edit it or remove it from the admin.

Adding a Stylesheet

To create a stylesheet, do the following:
  1. Add stylesheet.png
    Click the Add a Stylesheet button at the bottom of the stylesheet list.
  2. Give the stylesheet a name. This is mainly for your reference so you can refer to it later in other steps. It does not get output anywhere.
  3. Type or Paste in your stylesheet text. This is just plain css. There is no parsing done and no text substitution performed. Just type it as if you were typing it into Notepad.
  4. Optionally add the Media Type. If you're doing truely accessible websites, you might set the media type so that the page will render on different media. Examples would be "screen", "print", etc. If you're not totally sure what this is, then you can safely leave it blank.
  5. Click Submit
Done! Now you have a saved stylesheet that you can use in your design.

Attaching a stylesheet to a template

Great, you're saying to yourself. Now I have a stylesheet and I have a template. Don't they have to be joined together somehow? Indeed, you're right. Normally, you'd add something like <stylesheet> to your template and point it to the stylesheet. Instead, all you have is the {stylesheet} tag...
Here is how you attach a stylesheet to a template. Keep in mind that you can do the inverse as well from the template admin page. Both basically act the same way.
  1. Click on the blue Css icon.png(older versions orange and red) CSS button on the same line as the stylesheet that you'd like to attach.
  2. The next screen will show a list of templates that are already assigned to this stylesheet, and a dropdown box of the remaining templates. Select the template that you'd like to attach to this stylesheet in the dropdown box.
  3. Click Attach to this Template
  4. The selected stylesheet should now show in the list of attached templates. You can now click Back to Menu to be returned to the stylesheet admin.
Now when you look at a page with your template, you should see the styles in the attached stylesheet.

Detaching a stylesheet from a template

It happens. You've attached a stylesheet and then find that you really don't want it and that, unless you detach it, it will spoil your template.
Here is how you detach a stylesheet from a template.
  1. Click on the blue Css icon.png(older versions orange and red) CSS button on the same line as the template that you'd like to work on.
  2. The next screen will show a list of stylesheets attached to your template, and on the right hand side of the screen, there is a blue rubbish bin for each stylesheet. Hover your cursor over the Blue Bin and it will say "Delete". In this case, it does NOT mean that the stylesheet will be permanently deleted from the system, just that it will be detached from your stylesheet.
  3. Click the Blue Bin behind the stylesheet that you'd like to detach from the template; the system will ask Are you sure you want to delete?. Click Yes and you're done.
  4. You can now click Back to Menu to be returned to the stylesheet admin.

Adding FCKeditor Styles

When you are using FCKeditor, the default editor is TinyMCE though, it has the ability to show selected styles in a dropdown box while editing a page. Since you will probably not want to show ALL of the styles to your editors, you can administer which styles to display from the FCKeditor options page.
To make a style available in FCKeditor, do the following:
  1. Create a new Stylesheet containing style that you want to be able to apply to text (I.E. "div.pink { color: pink; }")
  2. Associate it with your current template
  3. Go to "Extensions/FCKeditorX/Styles" and paste the same code that you put in the new stylesheet you created (I.E. "div.pink { color: pink; }")
  4. Now when you are editing or adding a page you can select some text and apply that style from FCKeditor's "Style" drop-down box.
Note: I think FCKeditor styles are broken in the 0.12.x branch. You'll want to use 0.13 beta 2 or higher.

How to Edit a Stylesheet

Select the stylesheet you want to edit from "Layout/Stylesheets".
  • In the "Name:" field change thename for this Stylesheet, as required.
  • In the "Content:" field change your CSS code, as required.
  • In the optional "Media Type:" field put the CSS media type such as "all", "print", or "handheld". The w3 has a list of Recognized media types.


This page in: English - Deutsch - Español - Français - Italiano - Lietuvių - Nederlands - Norsk - Polski - Česky - Русский - Svenska - Tiếng Việt - عربي - 日本語 简体中文

User Handbook/Admin Panel/Layout/Stylesheets

From CMSMS

Arvixe - A CMSMS Partner