set css styles with variables in ruby on rails

Question

I try to do this : final result. For this I have put a other image (this one : cover) on the first. And for the border color, I have created a class "parallelogram".

HTML File :

<%= image_tag(project.projectpicture.url(:slider), :class => "image") %>
<%= image_tag(("/assets/coverslider.png"), :class => "cover") %>
<div class="parallelogram" style="background: red;"></div>

CSS File :

.image
 {
    position: relative;
 }

 .cover
 {
    position: absolute;
    z-index: 1;
    top: 0;
    left:0;
 }

 .parallelogram
 {
    position: absolute;
    z-index: 1;
    top: 0;
    left:227px;
    opacity: 0.5;
    width:10px; 
    height:200px; 
    transform: skew(20deg); 
    -webkit-transform: skew(20deg);
  }

All of this works. I dont know if it the best solution and I am open at every better solution.

Now I want to have the possibility to change the parallelogram color. For that I tried :

<div class="parallelogram" style="background: #{project.color};"></div>

Where project.color is the project color. This doesn't work. Rails generates this html code :

<img class="image" src="/system/projects/projectpictures/0..." alt="15"></img>
<img class="cover" src="/assets/coverslider.png" alt="Coverslider"></img>
<div class="parallelogram" style="background: #{project.color};"></div>

I don't know why the #{project.color} doesn't set the color and stays like this.

Thank you for your help. I begin so if you have a better solution, I will be happy to learn it.

Yes. When I do a : <%= link_to project.name, project_path(project), style: "background: #{project.color};" %> Rails generates the good code : <a style="background: #FF004F" href="http://localhost:3000/projects/21"></a> and turns #{project.color} into #FF004F. I don't know why Rails doesn't do the same with <div>. — Bibou
– Bibou, Commented Aug 4, 2014 at 7:41

Pavan · Accepted Answer · 2014-08-04 08:11:01Z

1

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

edited Aug 4, 2014 at 8:11

answered Aug 4, 2014 at 8:05

Pavan

33.6k8 gold badges53 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Bibou Over a year ago

This is a good point. It works perfectly. Thank you for your help @Pavan. Another question if you have the time. If you had had to do the same thing. How would you have preceded ? I am curious and I want to progress :)

Darun Omar · Accepted Answer · 2018-10-12 14:23:27Z

0

use the <%= "#{project.color}" %> instead of #{project.color}

answered Oct 12, 2018 at 14:23

Darun Omar

1855 bronze badges

Collectives™ on Stack Overflow

set css styles with variables in ruby on rails

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related