# CSS Layout integration

**URL:** <https://www.ruby-forum.com/t/css-layout-integration/79562>\
**Category:** Rails\
**Created:** [December 16, 2006, 4:21pm UTC](https://www.ruby-forum.com/t/css-layout-integration/79562 "2006-12-16T16:21:42Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![matt](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/m/a6a055/32.png) [@matt](https://www.ruby-forum.com/u/matt)\
**Post date:** [December 16, 2006, 4:21pm UTC](https://www.ruby-forum.com/t/css-layout-integration/79562/1 "2006-12-16T16:21:42Z")

</div>

Does anyone have any good information or examples of using multiple css  
layouts to setup, say, a two-column design and a three-column design.

So I could ‘flip a switch’ and have the design go from a two-column  
layout to a three-column layout.

Ideally I’d like to set it up so that there can be separate directories  
of these layouts (themes ?) .

Any info or pointers are greatly appreciated.

Thanks

Matt

---

<div class="post-metadata">

**Author:** ![matt](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/m/a6a055/32.png) [@matt](https://www.ruby-forum.com/u/matt)\
**Post date:** [December 16, 2006, 9:30pm UTC](https://www.ruby-forum.com/t/css-layout-integration/79562/2 "2006-12-16T21:30:15Z")

</div>

[http://www.glish.com/css/](http://www.glish.com/css/)

this is a good article

> **[Zoom layout | Stopdesign](https://stopdesign.com/journal/2005/06/24/zoom-layout.html)**
>
> In a presentation for @media entitled, Zoom the Web, Joe Clark revealed and explained several possible options (a new trend, hopefully) for making sites more accessible and readable for low-vision users. In the continuing effort to make our sites...

---

<div class="post-metadata">

**Author:** ![matt](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/m/a6a055/32.png) [@matt](https://www.ruby-forum.com/u/matt)\
**Post date:** [December 17, 2006, 7:15am UTC](https://www.ruby-forum.com/t/css-layout-integration/79562/3 "2006-12-17T07:15:51Z")

</div>

Let me clarify. I am quite familiar with CSS, but what I’m need are  
examples of doing things ‘the Rails way’

for instance, do I need to have different ‘layout’ files, or do I need  
my normal layout file, with a bunch of 'if(@columns == 2) then elseif  
(@columns==3) end etc…

or is this something that I should implement in the controller code?

I’d like to have an ‘admin’ page,where an administrator of a site could  
re-design a site himself by specifying 2 or 3 column layout. Sort of  
like some of the “Do-it-yourself” online shopping carts that allow for a  
templatized design to be made based on certain input parameters (like #  
of columns, colors, font size, etc)

Sorry I wasn’t clear in my first post. I hope my clarification will  
draw out more response.

Thanks

Matt

---

<div class="post-metadata">

**Author:** ![matt](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/m/a6a055/32.png) [@matt](https://www.ruby-forum.com/u/matt)\
**Post date:** [December 17, 2006, 1:00pm UTC](https://www.ruby-forum.com/t/css-layout-integration/79562/4 "2006-12-17T13:00:10Z")

</div>

The way I do this is to scan the stylesheet directory for .css and put  
those  
entries in a drop down where the value and name is the filename w/o the  
extension

the user can then use the drop down from their edit user info

in your rhtml you want to skin

just put a variable in a stylesheet tag that refers to that user info  
and  
youre done

---

<div class="post-metadata">

**Author:** ![matt](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/m/a6a055/32.png) [@matt](https://www.ruby-forum.com/u/matt)\
**Post date:** [December 17, 2006, 7:43am UTC](https://www.ruby-forum.com/t/css-layout-integration/79562/5 "2006-12-17T07:43:52Z")

</div>

Matt,

I think that both of your ideas could work. I would recommend taking  
the route that requires less code. If your 2 layout schemes are mostly  
the same, then use one layout with code checks to turn on/off features  
as needed. If your 2 layouts are completely different then using 2  
layout files is likely the easier choice.

Aaron

---

<div class="post-metadata">

**Author:** ![matt](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/m/a6a055/32.png) [@matt](https://www.ruby-forum.com/u/matt)\
**Post date:** [December 17, 2006, 2:54pm UTC](https://www.ruby-forum.com/t/css-layout-integration/79562/6 "2006-12-17T14:54:15Z")

</div>

On Sun, 2006-12-17 at 03:52 -0800, Clayton C. wrote:

> The way I do this is to scan the stylesheet directory for .css and put those  
> entries in a drop down where the value and name is the filename w/o the  
> extension  
> the user can then use the drop down from their edit user info

OK. I understand this part. no problem selecting css files.

> in your rhtml you want to skin

I’m not sure of you mean by this. I don’t know what a skin is.

> just put a variable in a stylesheet tag that refers to that user info and  
> youre done

This I don’t understand. Is this what you mean by ‘skin’?

This variable would be initialized in the controller code I presume…  
I’m not sure of how you are handing this variable to a  
stylesheet\_link\_tag, I don’t see how to give it this extra argument.

Matt

---

<div class="post-metadata">

**Author:** ![matt](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/m/a6a055/32.png) [@matt](https://www.ruby-forum.com/u/matt)\
**Post date:** [December 17, 2006, 8:45pm UTC](https://www.ruby-forum.com/t/css-layout-integration/79562/7 "2006-12-17T20:45:05Z")

</div>

I use this plugin: [http://nested-layouts.rubyforge.org/](http://nested-layouts.rubyforge.org/)

So I have a master “application.rhtml” wrapper layout and nested  
“single\_col” / “two\_col” / “three\_col” etc. layouts. Then in my view I  
just write a few blocks like this:

\<% content\_for “left\_column” do %\>

# Left column content
\<% end %\>

\<% inside\_layout ‘two\_col’ do %\>

# Main content
\<% end %\>

---

<div class="post-metadata">

**Author:** ![matt](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/m/a6a055/32.png) [@matt](https://www.ruby-forum.com/u/matt)\
**Post date:** [December 17, 2006, 4:56pm UTC](https://www.ruby-forum.com/t/css-layout-integration/79562/8 "2006-12-17T16:56:25Z")

</div>

On Dec 17, 6:54 am, matt [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid) wrote:

> On Sun, 2006-12-17 at 03:52 -0800, Clayton C. wrote:  
> This variable would be initialized in the controller code I presume…  
> I’m not sure of how you are handing this variable to a  
> stylesheet\_link\_tag, I don’t see how to give it this extra argument.

Matt,

You don’t need to pass an extra argument just put the stylesheet name  
in a variable like this:

@stylesheet = “FancyStylesheet”  
\<%= stylesheet\_link\_tag @stylesheet %\>

There are lots of ways to do this. You could setup an @stylesheet  
variable in your controller using an application wide before\_filter to  
ensure its always available. Another possibility would be to store the  
stylesheet in the user’s session:

\<%= stylesheet\_link\_tag (session[:stylesheet] || “default”) %\>

Actually, I just reread your entries above and realized you want a  
site-wide setting, not user specific. In that case I would not use the  
session.

If you are going to have a number of settings that control how the  
interface works then you may want to wrap this functionality in a  
model. That makes it easy to store the settings in the database and  
update them with a web interface. You could pull the settings out with  
a before\_filter or just access them right from the view like this:

\<%= stylesheet\_link\_tag SiteLayout.stylesheet %\>

Where “SiteLayout” is the name of your model and “stylesheet” is a  
method you have defined that returns the current stylesheet.

Aaron