Follow Along as I Stumble on the Path to Learning RoR

Posts tagged “css

CSS Only Image Overlay

While this isn’t a Rails solution, it was one that was so helpful to me that I wanted to post about it.  I needed a tinted/filtered image overlay with text.  After Binging the internet, I found the solution courtesy of Koren Leslie Cohen.

You can read her post here to see a demo, but you wrap your image, like this:

  <div id=“outer-box”>
    <img src=“cartagena.jpg”>
    <div id=“inner-box”>
      <p>This is the overlay!</p>
    </div>
  </div>
and then add this CSS,
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
#outer-box {
  width: 300px;
  height: 194px;
  display: block;
  position: relative;
}
#outer-box img {
  width: 300px;
  height: auto;
}
#outer-box #inner-box {
  background: #FD8698;
  height: 100%;
  width: 100%;
  opacity: 0;
  top: 0;
  left: 0;
  position: absolute;
  padding: 0;
  transition: opacity .5s;
}
#outer-box #inner-box p {
  color: #fff;
  lineheight: 150px;
  fontfamily: ‘arial’;
  textalign: center;
}
#outer-box:hover #inner-box {
  opacity: .9;
  transition: opacity .5s;
}

This will show the overlay when the image is hovered over.  For me, I wanted to show the overlay without the hover, so I changed line 33 to be:

#outer-box #inner-box {


NoMethodError undefined method `[]’ for “image”:Sass::Script::Value::String

When upgrading my Rails app to 4 (from 3), I was getting the error:

NoMethodError undefined method `[]’ for “image”:Sass::Script::Value::String

Eventually I found out that the asset-path / asset-url methods changed to only accept one argument.

For example,

asset-url(‘profile.png’, image)

now should be:

asset-url(‘profile.png’)

In my particular case, this code was in some of my css files.


ActiveAdmin Translation Missing Error

I was receiving a translation missing message that was showing up on my page views for my ActiveAdmin page.  To correct this, I found the solution on Stack Overflow which said that these translations were just missing from my en.yml file in locales, and to replace my existing one with the one here (that ActiveAdmin uses):

https://github.com/gregbell/active_admin/blob/master/lib/active_admin/locales/en.yml


Referencing an Image from CSS File in Asset Pipeline

In order to reference an image from the CSS file, I added .scss at the end of the .css file and referenced the image using this syntax:

background: url(asset-path(“example.png”,image)) no-repeat; 


Internet Explorer is a Hideous Beast (but I still need to accommodate it)

I found out [rudely] what a hideous beast Internet Explorer is one day when opening my app in IE7.  I could hardly recognize my app – yes the text matched, but styles were changed, fonts didn’t work, colors were wrong, corners were right angles, buttons were too big….

While some things can be adjusted to match (or look similar) in Chrome, Firefox and Internet Explorer, there are things that will just not look (or work) the same, no matter how hard you try.  IE has just lagged so far behind the other browsers in terms of style.  I ended up having to create alternate versions of parts of my views depending on the browser.

Luckily for me, I found the browser gem which detects the browser the user is using for you.

As mentioned by Nando Vieira, who created the gem, you can then do things like:

<% if browser.ie6? %>
  <p>Your're running an older IE version. Please update it!</p>
<% end %>

For me, I had to implement it a little differently than the gem instructions say, to make it work.  Instead of:

require "rubygems"
require "browser"

I put this in the application_controller:

before_filter :current_browser def current_browser   @browser = Browser.new(:ua => request.user_agent) end

then I was able to use browser detection throughout my app.


Sliding Panel

I implemented a sliding panel where users could click a link and see links to FAQs.  I was able to implement it in just a few minutes using this awesome demo and tutorial by John Phillips:

http://spyrestudios.com/how-to-create-a-sexy-vertical-sliding-panel-using-jquery-and-css3/

Sliding panels are a great way to save space on pages, yet make info or a form easily available to your users (with no page refresh).


Pricing Table

I needed help in creating a pricing table, and I found my answer on codrops:

http://tympanus.net/codrops/2010/05/03/pimp-your-tables-with-css3/

Great examples and options for creating a pricing table for your app.