Creating and using StyleSheets in Radiant :
If you are not using any extension for uploading/creating Stylesheets and Javascripts in Radiant then there are 3 ways by which you can create your stylesheets using Radiant CMS:
1.Creating stylesheet as Snippet
2. Creating stylesheet as Page
3. Creating stylesheet as Page part
1.Creating stylesheet as Snippet:
This option is particularly useful when you want to create some common css which can be used in the layouts throughout all the pages of the website.
Example: If you create snippet with name “common.css” then you can refer it in your page layout as:
<style> <r:snippet name="common.css"></r:snippet> </style>
Please note that you need to include this snippet for stylesheet under <style> tag. This is required to interpret that the generated snippet is of type stylesheet. If you are not enclosing it under <style> tag then it will be interpreted as normal snippet or <body> and will publish the contents in “common.css” as it is on the page. There is no need to include the normal snippets (one which are not stylesheets) under <style> tag.
2.Creating stylesheet as Page: (Preferred and commonly used approach)
In this case you need to create PAGE having desired stylesheet code and also need to create LAYOUT that renders the main contents of page .This rendering is done when you reference this created PAGE (stylesheet) in your page layout.
Example : Suppose you create LAYOUT as “StyleSheet”. In this LAYOUT you need to set context-type as “text/css” and within <body> insert code <r:content />.
Now you create PAGE as “common” which has stylesheet code. Also for this page set the LAYOUT as “StyleSheet”. This created layout is use to specify that the page to which this layout will be applied is of type stylesheet. (Hence there is no need to save our page containing actual css code with extension “.css”)
With this your stylesheet is ready and now you want to apply it to your page. For this make its reference into your page/page layout as:
<link rel="stylesheet" href="/common.css" />
3.Creating stylesheet as Page part: ( Usually not preferred)
This option is particularly useful when you want to apply/inherit some style to all the child pages of some ancestor page. This can be achieved by setting its “inherit” property as “true”. So all the child pages can inherit the style (page part) of its ancestor page.
Example: If you create Page part with name “StyleSheet” then you can refer it in your page layout as:
<style> <r:content part="StyleSheet" inherit="true” /> </style>
Similar to that of “snippet” , page part with stylesheet also must be enclosed under <style> tag.
Important note: If you are creating any stylesheet as any of the page parts then in the layout when you render this part then be sure to set INHERIT=TRUE. Otherwise this stylesheet will not get applied for any other page except for the page whose part it is.
| Possible Question | Solution |
| Stylesheet when created as page part was not getting applied to any other pages. | Here you need to set INHERIT=true in your layout as shown below so that this stylesheet gets applied to all other child pages:<r:content part=”StyleSheet” inherit=”true” /> |
Alternative for using CSS and JS in Radiant:
An alternative solution for readily uploading the created STYLESHEETS or creating new STYLESHEETS one can use the extension called as SNS extension . With this extension we not only get easy access for stylesheets but also for JAVASCRIPTS.
To setup the SNS extension in your application you can refer to link given below for details:
http://github.com/radiant/radiant-sns-extension
Once the setup/installation of SNS is complete in your application you can upload/create the desired CSS and JS in our Radiant application. The only difference lies in the tags used for referencing those CSS and JS in your pages or layouts namely <r:stylesheet> and <r:javascript> tags. Usage of these tags can be found under link “available tags” of your radiant pages.
Josh Software 
How are you deploying this app?
If you want to edit javascripts from the admin area you can either 1) create them as pages and use a layout with the content type as “text/javascript” just like you did with stylesheets, 2) include them in the layout content (unless they are large), or 3) install the SNS extension http://github.com/SwankInnovations/radiant-sns-extension
Otherwise, put them wherever you want on the file system (such as /public/javascripts/) and include them in the HTML of your layout just like any other HTML page.
Hi Jim. Thanks for your comment.
The 2nd option mentioned by you of placing the javascripts under ‘/public/javascripts’ is the one we are following currently. (I don’t have much idea about deployment).
Also i have already tried the way of creating the javascripts as PAGE and LAYOUT for it with its content type “text/javascript” and then its inclusion into layout.However i haven’t tried anything with respect to SNS extension. So let me try it out.
Inclusion of SNS extension really holds good for both StyleSheets and Javascripts in Radiant CMS. Once again thanks Jim.