Rails CSS not Loading using Heroku

Question

UPDATE : The full site code is here - https://github.com/eWizardII/PeerInstruction

I have the following site set up here on Heroku - http://www.peerinstruction.net/users/sign_up the issue is that I have updated the css yet it is not being actively reflected on the site, it just shows a textbox, with some edited/custom fonts. I have attached the css file in the following gist - https://gist.github.com/f74b626c54ecbb60bbde

The signup page controller:

!!! Strict
%html
  %head
    %title= yield(:title) || "Untitled"
    = stylesheet_link_tag 'application', 'web-app-theme/base', 'web-app-theme/themes/activo/style', 'web-app-theme/override'
    = javascript_include_tag :defaults
    = csrf_meta_tag
    = yield(:head)
  %body
    #container
      #header
        %h1
          %a{:href => "/"} Peer Instruction Network
        #user-navigation
          %ul.wat-cf
            %li
              .content.login
                .flash
                  - flash.each do |type, message|
                    %div{ :class => "message #{type}" }
                      %p= message
                = form_for(resource, :as => resource_name, :url => session_path(resource_name), :html => { :class => "form login" }) do |f|
                  .group.wat-cf
                    .left= f.label :email, :class => "label right"
                    .right= f.text_field :email, :class => "text_field"
                  .group.wat-cf
                    .left= f.label :password, :class => "label right"
                    .right= f.password_field :password, :class => "text_field"
                  .group.wat-cf
                    .right
                      %button.button{ :type => "submit" }
                        Login
              /= link_to "Sign In", destroy_user_session_path
      #box
        = yield

The signup pages haml file:

%h2
.block
  .content.login
    .flash
      - flash.each do |type, message|
        %div{ :class => "message #{type}" }
          %p= message
      = form_for(resource, :as => resource_name, :url => registration_path(resource_name)) do |f|
        = devise_error_messages!
        %div
          = f.label :firstname
          %br/
          = f.text_field :firstname
        %div
          = f.label :middlename
          %br/
          = f.text_field :middlename
        %div
          = f.label :lastname
          %br/
          = f.text_field :lastname
        %div
          = f.label :email
          %br/
          = f.email_field :email
        %div
          = f.label :password
          %br/
          = f.password_field :password
        %div
          = f.label :academic
          %br/
          = f.text_field :academic
        %div= f.submit "Continue"
      = render :partial => "devise/shared/links"

I used web-app-theme to create an activo theme and then modify it.

Answer 1

here is your working app

I had to do a few things to fix it.

Firstly, I put it on cedar stack, that's important.

Then, it's vital to change your Gemfile. I made a Gist of what I did there but in short I moved sqlite3 into dev and test envs, and I removed the rubyracer gem.

I think that's all I did.

I'd get into the habit of removing compiled assets that are no longer being used by the way, as they will just take up loads of space in public/assets

Answer 2

I validated your css and it comes up with lots of warnings about invalid properties.

I suspect it is some sort of character set mismatch between what is being served and what is in the document. Because of the CSS not parsing, none of the CSS will work.

Answer 3

Few problems, overide.css is not is not found. You have a 404:

http://www.peerinstruction.net/assets/web-app-theme/override.css

Make sure to include web-app-theme/override.css on your assets/stylesheets/application.css and run:

RAILS_ENV=production rake assets:precompile

before you push to heroku

Answer 4

I just got bit by "css assets not loading on Heroku".

My problem was that I forgot to compile the assets locally -- which is something you must do if a public/assets/manifest.yml is detected in your app. The presence of this file tells Heroku that you are handling asset compilation yourself and will not attempt to compile your assets.

See Rails 3.1 on Heroku Cedar