# How to add css styles to a website? **URL:** \ **Category:** Radiant CMS\ **Created:** [September 20, 2006, 11:44pm UTC](https://www.ruby-forum.com/t/how-to-add-css-styles-to-a-website/69431 "2006-09-20T23:44:07Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![Tino\_B](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/t/a183cd/32.png) [@Tino\_B](https://www.ruby-forum.com/u/Tino_B)\ **Post date:** [September 20, 2006, 11:44pm UTC](https://www.ruby-forum.com/t/how-to-add-css-styles-to-a-website/69431/1 "2006-09-20T23:44:07Z")
Hi, i began to have a look into radiant and wonder in which way i should include my css styles to my website? Obviously i could simply link the css file in the layout, but then i could not edit it in the web interface. Should i save my css files as snippets and include them wherever i need to? Or is there a more radiant like way to handle css? Bye, Tino ---
**Author:** ![Tino\_B](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/t/a183cd/32.png) [@Tino\_B](https://www.ruby-forum.com/u/Tino_B)\ **Post date:** [September 20, 2006, 11:48pm UTC](https://www.ruby-forum.com/t/how-to-add-css-styles-to-a-website/69431/2 "2006-09-20T23:48:08Z")
Create a layout with content type text/css and paste your css code there. Then create a blank page with your css-layout as page layout and use a slug like /style/main.css, that way you’ll be able to access the css linking to /style/main.css 2006/9/20, Tino B. [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid): ---
**Author:** ![Tino\_B](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/t/a183cd/32.png) [@Tino\_B](https://www.ruby-forum.com/u/Tino_B)\ **Post date:** [September 20, 2006, 11:56pm UTC](https://www.ruby-forum.com/t/how-to-add-css-styles-to-a-website/69431/3 "2006-09-20T23:56:09Z")
Giovanni I. wrote: > Create a layout with content type text/css and paste your css code there. It’s probably better to create a layout with a content type of “text/css” and put just the tag \ in the layout. Then create a page, assign the layout, and paste your css in the body part. On the Ruby site we put the stylesheets in public/stylesheets. – John L. [http://wiseheartdesign.com](http://wiseheartdesign.com) ---
**Author:** ![Tino\_B](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/t/a183cd/32.png) [@Tino\_B](https://www.ruby-forum.com/u/Tino_B)\ **Post date:** [September 21, 2006, 5:16am UTC](https://www.ruby-forum.com/t/how-to-add-css-styles-to-a-website/69431/4 "2006-09-21T05:16:31Z")
On Sep 21, 2006, at 6:42 AM, Tino B. wrote: > Hi, > > i began to have a look into radiant and wonder in which way i should > include my css styles to my website? Obviously i could simply link the > css file in the layout, but then i could not edit it in the web > interface. Should i save my css files as snippets and include them > wherever i need to? Or is there a more radiant like way to handle css? It really depends on the way you prefer to edit your css. If you don’t mind editing it in a textarea (I personally cant stand it 🙂 ) then John and Giovanni’s solutions work well. But if you prefer to edit them in a text editor, then just put them in public/stylesheets, like John said, and put the appropriate link tag in your layout. Bodhi ---
**Author:** ![Tino\_B](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/t/a183cd/32.png) [@Tino\_B](https://www.ruby-forum.com/u/Tino_B)\ **Post date:** [September 21, 2006, 10:01am UTC](https://www.ruby-forum.com/t/how-to-add-css-styles-to-a-website/69431/5 "2006-09-21T10:01:01Z")
Hi, thank for your help. I will test which method fits to me, probably editing the css file with my editor. Bye, Tino ---
**Author:** ![Tino\_B](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/t/a183cd/32.png) [@Tino\_B](https://www.ruby-forum.com/u/Tino_B)\ **Post date:** [September 21, 2006, 10:13am UTC](https://www.ruby-forum.com/t/how-to-add-css-styles-to-a-website/69431/6 "2006-09-21T10:13:02Z")
2006/9/20, John W. Long [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid): > Giovanni I. wrote: > > > Create a layout with content type text/css and paste your css code > > there. > > It’s probably better to create a layout with a content type of > “text/css” and put just the tag \ in the layout. Then create > a page, assign the layout, and paste your css in the body part. It’s not probably better, it’s better for sure 🙂 I’m going to change the way I handle stylesheets on my radiant sites right now! – Giovanni ---
**Author:** ![Tino\_B](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/t/a183cd/32.png) [@Tino\_B](https://www.ruby-forum.com/u/Tino_B)\ **Post date:** [September 21, 2006, 10:21am UTC](https://www.ruby-forum.com/t/how-to-add-css-styles-to-a-website/69431/7 "2006-09-21T10:21:04Z")
On 9/20/06, John W. Long [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid) wrote: > Giovanni I. wrote: > > > Create a layout with content type text/css and paste your css code > > there. > > It’s probably better to create a layout with a content type of > “text/css” and put just the tag \ in the layout. Then create > a page, assign the layout, and paste your css in the body part. How fast can Radiant serve these? Does it cache them? It would rock if Radiant had an option to save the layout (stylesheet) into a file in public/stylesheets once you’re done… ---
**Author:** ![Tino\_B](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/t/a183cd/32.png) [@Tino\_B](https://www.ruby-forum.com/u/Tino_B)\ **Post date:** [September 21, 2006, 2:35pm UTC](https://www.ruby-forum.com/t/how-to-add-css-styles-to-a-website/69431/8 "2006-09-21T14:35:43Z")
What would that accomplish? Part of the point of having it in Radiant is that it can be edited at a moment’s notice, without worrying about file permissions yada yada yada. Personally, I think it would be a slippery slope to allow Radiant users to edit files in the filesystem. Sean C. [seancribbs.com](http://seancribbs.com) ---
**Author:** ![Tino\_B](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/t/a183cd/32.png) [@Tino\_B](https://www.ruby-forum.com/u/Tino_B)\ **Post date:** [September 21, 2006, 5:44pm UTC](https://www.ruby-forum.com/t/how-to-add-css-styles-to-a-website/69431/9 "2006-09-21T17:44:27Z")
You make a good point about the caching. It just might be a vulnerability to allow Radiant to edit files in the filesystem, that’s all. (Remembering nightmares of PHP script-kiddies) Sean ---
**Author:** ![Tino\_B](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/t/a183cd/32.png) [@Tino\_B](https://www.ruby-forum.com/u/Tino_B)\ **Post date:** [September 21, 2006, 5:54pm UTC](https://www.ruby-forum.com/t/how-to-add-css-styles-to-a-website/69431/10 "2006-09-21T17:54:30Z")
I haven’t been active, but I wanted to jump in here. One of the main benefits of using CSS in general is that its cached locally in the user’s browser. On the first visit there is some overhead, but subsequently (if its is acting properly) the browser shouldn’t request a new stylesheet if it has one of the same name in its local cache. If I understand the thread correctly this probably isn’t necessary, but I may be missing something. -Jim ---
**Author:** ![Tino\_B](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/t/a183cd/32.png) [@Tino\_B](https://www.ruby-forum.com/u/Tino_B)\ **Post date:** [September 21, 2006, 5:00pm UTC](https://www.ruby-forum.com/t/how-to-add-css-styles-to-a-website/69431/11 "2006-09-21T17:00:18Z")
On 9/21/06, Sean C. [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid) wrote: > What would that accomplish? Part of the point of having it in Radiant is > that it can be edited at a moment’s notice, without worrying about file > permissions yada yada yada. Personally, I think it would be a slippery > slope to allow Radiant users to edit files in the filesystem. Perhaps he is thinking of improved performance serving the document (eg, Squid or Apache caching)? I don’t know if it would improve anything, but thats the only potential advantage I can think of when it comes to “TTW edit with FS save”. -T ---
**Author:** ![Tino\_B](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/t/a183cd/32.png) [@Tino\_B](https://www.ruby-forum.com/u/Tino_B)\ **Post date:** [September 21, 2006, 9:43pm UTC](https://www.ruby-forum.com/t/how-to-add-css-styles-to-a-website/69431/12 "2006-09-21T21:43:19Z")
> It really depends on the way you prefer to edit your css. If you > don’t mind editing it in a textarea (I personally cant stand it 🙂 ) > then John and Giovanni’s solutions work well. But if you prefer to > edit them in a text editor, then just put them in public/stylesheets, > like John said, and put the appropriate link tag in your layout. > > Bodhi Hi, What would the appropriate link tag be for including an file in the public/stylesheets directory? I considered \ and \ but they would include page parts and http links respectively. Thanks, Bryan ---
**Author:** ![Tino\_B](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/t/a183cd/32.png) [@Tino\_B](https://www.ruby-forum.com/u/Tino_B)\ **Post date:** [September 21, 2006, 8:10pm UTC](https://www.ruby-forum.com/t/how-to-add-css-styles-to-a-website/69431/13 "2006-09-21T20:10:55Z")
On 20/09/06, John W. Long [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid) wrote: > Giovanni I. wrote: > > > Create a layout with content type text/css and paste your css code there. > > It’s probably better to create a layout with a content type of > “text/css” and put just the tag \ in the layout. Then create > a page, assign the layout, and paste your css in the body part. That’s how I handle my site-lever CSS file. I wrote a HowTo on the wiki for the way I approached page-level CSS: [http://dev.radiantcms.org/radiant/wiki/HowToMakePageLevelCSSElegant](http://dev.radiantcms.org/radiant/wiki/HowToMakePageLevelCSSElegant) – Regards, Dave ---
**Author:** ![Tino\_B](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/t/a183cd/32.png) [@Tino\_B](https://www.ruby-forum.com/u/Tino_B)\ **Post date:** [September 21, 2006, 9:49pm UTC](https://www.ruby-forum.com/t/how-to-add-css-styles-to-a-website/69431/14 "2006-09-21T21:49:14Z")
Bryan wrote: > What would the appropriate link tag be for including an file in the > public/stylesheets directory? You don’t need any special tags, just use the HTML link tag in the head portion of the HTML layout: – John L. [http://wiseheartdesign.com](http://wiseheartdesign.com) ---
**Author:** ![Tino\_B](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/t/a183cd/32.png) [@Tino\_B](https://www.ruby-forum.com/u/Tino_B)\ **Post date:** [September 21, 2006, 10:57pm UTC](https://www.ruby-forum.com/t/how-to-add-css-styles-to-a-website/69431/15 "2006-09-21T22:57:27Z")
On 9/21/06, John W. Long [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid) wrote: > Bryan wrote: > > > What would the appropriate link tag be for including an file in the > > public/stylesheets directory? > > You don’t need any special tags, just use the HTML link tag in the head > portion of the HTML layout: Except this is a problem if you want to have your site in a subdirectory (which is biting me). This will try to serve up " [mysite.com/stylesheets/styles.css](http://mysite.com/stylesheets/styles.css)" and not " [mysite.com/radiant/stylesheets/styles.css](http://mysite.com/radiant/stylesheets/styles.css)". (unless someone knows the Apache magic to make it work) ---
**Author:** ![Tino\_B](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/t/a183cd/32.png) [@Tino\_B](https://www.ruby-forum.com/u/Tino_B)\ **Post date:** [September 21, 2006, 9:59pm UTC](https://www.ruby-forum.com/t/how-to-add-css-styles-to-a-website/69431/16 "2006-09-21T21:59:15Z")
John W. Long wrote: > Bryan wrote: > > > What would the appropriate link tag be for including an file in the > > public/stylesheets directory? > > You don’t need any special tags, just use the HTML link tag in the head > portion of the HTML layout: > > – > John L. > [http://wiseheartdesign.com](http://wiseheartdesign.com) Thanks John. ---
**Author:** ![Tino\_B](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/t/a183cd/32.png) [@Tino\_B](https://www.ruby-forum.com/u/Tino_B)\ **Post date:** [September 22, 2006, 12:03am UTC](https://www.ruby-forum.com/t/how-to-add-css-styles-to-a-website/69431/17 "2006-09-22T00:03:34Z")
John T. wrote: > Except this is a problem if you want to have your site in a subdirectory > (which is biting me). This will try to serve up " > [mysite.com/stylesheets/styles.css](http://mysite.com/stylesheets/styles.css)" and not " > [mysite.com/radiant/stylesheets/styles.css](http://mysite.com/radiant/stylesheets/styles.css)". (unless someone knows the > Apache magic to make it work) Just put the subdir in the href: in your layout. – John ---
**Author:** ![Tino\_B](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/t/a183cd/32.png) [@Tino\_B](https://www.ruby-forum.com/u/Tino_B)\ **Post date:** [September 22, 2006, 9:40am UTC](https://www.ruby-forum.com/t/how-to-add-css-styles-to-a-website/69431/18 "2006-09-22T09:40:38Z")
I need to build a small archive, but not really a date based one. I just need to show 5 Articles at a time, then the next five. I assume a behavior would do this, but actually at the moment have no idea how to start. Any tips and prods in the right direction appreciated. Keith B. ---
**Author:** ![Tino\_B](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/t/a183cd/32.png) [@Tino\_B](https://www.ruby-forum.com/u/Tino_B)\ **Post date:** [September 22, 2006, 10:42am UTC](https://www.ruby-forum.com/t/how-to-add-css-styles-to-a-website/69431/19 "2006-09-22T10:42:42Z")
On 9/21/06, Jim G. [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid) wrote: > One of the main benefits of using CSS in general is that its cached > locally in the user’s browser. On the first visit there is some overhead, > but subsequently (if its is acting properly) the browser shouldn’t request a > new stylesheet if it has one of the same name in its local cache. This is true, when the file is served by the server. It sets the appropriate headers. Has anyone even inspected HTTP headers sent by a Radiant response? There is no Cache-Control header, no Expires, Last-modified or Etag, too. Yes, the browser will cache such kind of content, but not for long (depends on the browser). The result is all your users polling the stylesheets all the time because their browsers try to validate their internal cache, but don’t have the means with (like an Etag). For the people not knowing what the hell I’m talking about, here is a good read: > **[Caching Tutorial for Web Authors and Webmasters](https://www.mnot.net/cache_docs/)** > > Covers the how's and why's of Web caching for people who publish on the Web. With FAQs. People with big stylesheets and traffic running Radiant move their styles to a static file, anyway. Maybe they want to edit it with a proper editor - yeah I know TextMate can edit content from web textboxes, but not all people have fancy Mac boxes. Maybe they want it served (and cached) properly - by a web server. So you’ve moved your styles to external files, great. What now? Can you make quick changes to them inside the admin interface? Not really, you’ve sacrificed that. So, what I asked before was do we really need to sacrifice that, having such a flexible and powerful framework? ---
**Author:** ![Tino\_B](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/t/a183cd/32.png) [@Tino\_B](https://www.ruby-forum.com/u/Tino_B)\ **Post date:** [September 22, 2006, 5:05pm UTC](https://www.ruby-forum.com/t/how-to-add-css-styles-to-a-website/69431/20 "2006-09-22T17:05:37Z")
Mislav MarohniÄ? wrote: > This is true, when the file is served by the server. It sets the > appropriate > headers. Has anyone even inspected HTTP headers sent by a Radiant response? > There is no Cache-Control header, no Expires, Last-modified or Etag, too. > Yes, the browser will cache such kind of content, but not for long (depends > on the browser). The result is all your users polling the stylesheets all > the time because their browsers try to validate their internal cache, but > don’t have the means with (like an Etag). I’d appreciate a patch that addressed these issues. – John L. [http://wiseheartdesign.com](http://wiseheartdesign.com) [Next page](https://www.ruby-forum.com/t/how-to-add-css-styles-to-a-website/69431.md?page=2)