Using CSS to Style Ruby Objects in Erb

Using CSS to style Ruby objects in erb

You can use the :class option to specify a CSS class:

<%= f.text_field :email, :class => "login" %>

and then put that in your css:

input.login {
  color: red;
}

Also, you can specify inline CSS if you want:

<%= f.text_field :email, :style => "color: red;" %>

How can I use ruby on rails within my css using a style tag?

You can do something like this:

<div style="color:<%= @post.color %>"></div>

Lokking at your question in the answer above. In your Post controller, show action, make sure you have something like this:

@post = Post.find(params[:id])

Now in your Project/show.html.erb you can access the value like so:

<div style="color:<%= @post.color %>"></div>

How to add a class to a erb ruby element?

<%= form.submit "Save Item", :class => 'class' %>

How to add a class to an erb statement (in a form, not a do statement)

classes are attributes of DOM elments. Strings don't have classes.

You could wrap it in a span and assign the class to the span... do something like this...

<%= tag.span f.summary, class: 'class-name' %>

or to use p tag...

<%= tag.p f.summary, class: 'class-name' %>

set css styles with variables in ruby on rails

I don't know why Rails doesn't do the same with <div>

Because div tag belongs to HTML not Rails.You can't just give #{project.color} in the HTML div.

Solution

There is a div_for tag for Rails,try with it.

For more info,see this API

OR

Try using with content_tag

CSS applied to all pages but one - Ruby/Sinatra

I think this might resolve your issue, I think the link to your stylesheets might be broken.
If the page is not in the top-path, if it looks something like this:

http://localhost/namespace/ThisIsThePage

In your layout.erb-file, you are refering to the stylesheets using:

href="style.css"

In your CSS-imports, I'd recommend to refer to the stylesheets by using e.g:

href="/style.css"

Note the slash before the filename. The slash tells the browser that the resource will loaded from the root-path of your webserver. Without the slash, the browser will try to grab the style.css from the path below:

http://localhost/namespace/style.css

---

Related Topics