Creating and using StyleSheets in Radiant :
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.
|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:
To setup the SNS extension in your application you can refer to link given below for details:
3 thoughts on “Usage and Best Practices for RADIANT CMS-Part2”
How are you deploying this app?
Hi Jim. Thanks for your comment.