Styling body elements in Rails

Question

I am currently developing a simple blog application in Rails. I am using two different layouts, one for my articles pages (application.html.erb) and another for my static pages (welcome.html.erb) such as home etc.

The welcome layout requires the following styling:

body {
  padding-top: 50px;
  padding-bottom: 20px;
}

These particular properties mess up the other pages using the articles layout.

1.Is there a work around for this kind of situation where you need different styles for the same type of elements present in different layouts/pages?

2.What is the point of having controller specific stylesheets e.g, welcome.css.scss and article.css.scss, if they are all compile into one single application.css file?

I am trying to get a better understanding of the Rails assets pipeline. I am using rails 4.1.1 and ruby 2.1.1p76

Thank you very much

Why can't you put a class on the body in the welcome layout that adds that styling? — j-dexx, Jul 21 '14 at 15:37

Mandeep · Answer 1 · 2014-07-21T15:49:54.633

1

If you look at your layouts you would have a <%= stylesheet_link_tag "application", media: "all" %> which basically tell rails to load styles from application.css and now if you look at your application.css you would have *= require_tree . which loads all of your stylesheets present in app/assets/stylesheets and hence your styles are applied for both layouts.

Fix

Since you are using separate layouts so simplest solution would be to use different classes or an id(since it'll be unique in page as @MrYoshiji pointed out) in your layouts

body#home{//styles for home layout}

body#welcome{//styles for welcome layout}

edited Jul 21 '14 at 15:49

answered Jul 21 '14 at 15:40

Mandeep

9,093
2
26
36

1

It does not make sense to use a HTML `class` on the body when there can be only one `` tag in the HTML page. A HTML `id` would be more appropriate here – MrYoshiji Jul 21 '14 at 15:43
@MrYoshiji class will also work but it'll just make sense to use an id since it'll be unique. Thanks! – Mandeep Jul 21 '14 at 15:50

score 0 · Answer 2 · edited May 23 '17 at 12:05

0

Rails layouts per action?
Because it's easier for you as a developer to know what those styles are referring to. You'd often do something like this:

one.html.erb

<div id="one">
  <!-- code -->
</div>

one.css.scss

#one {
  // styling
}

That way the styles in one.css.scss are only being applied to the right html pages.

edited May 23 '17 at 12:05

Community

1
1

answered Jul 21 '14 at 15:42

Adam Zerner

17,797
15
90
156

Styling body elements in Rails

2 Answers2