How to add css styles to a website?

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

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. [email protected]:

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 <r:content /> 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

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 :slight_smile: )
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,

thank for your help. I will test which method fits to me, probably
editing
the css file with my editor.

Bye,
Tino

2006/9/20, John W. Long [email protected]:

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 <r:content /> 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 :slight_smile:
I’m going to change the way I handle stylesheets on my radiant sites
right
now!

– Giovanni

On 9/20/06, John W. Long [email protected] 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 <r:content /> 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…

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

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

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

On 9/21/06, Sean C. [email protected] 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

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 :slight_smile: )
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 <r:content> and <r:link> but they would include page parts
and http links respectively.

Thanks,

Bryan

On 20/09/06, John W. Long [email protected] 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 <r:content /> 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


Regards,
Dave

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

On 9/21/06, John W. Long [email protected] 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" and not "
mysite.com/radiant/stylesheets/styles.css". (unless someone knows the
Apache
magic to make it work)

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

Thanks John.

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" and not "
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

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.

On 9/21/06, Jim G. [email protected] 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:

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?

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