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.

What happens if you run localhost in production environment? Also, as has been pointed out, your base.css if full of invalid chars. — stephenmurdoch
– stephenmurdoch, Commented Nov 19, 2011 at 10:25
PS - the highlighting on the whitespaces in your Gist indicate that something is wrong with it too. Perhaps Heroku is rejecting it when you push it? Did you paste this in from Word? It's best to paste from Notepade or something that strips format — stephenmurdoch
– stephenmurdoch, Commented Nov 19, 2011 at 10:27
Well looking at the css on Chrome the actual file is full of invalid characters despite it not containing any when I use Chrome's inspection tool - peerinstruction.net/assets/web-app-theme/base.css — eWizardII
– eWizardII, Commented Nov 19, 2011 at 16:48
Some how I can delete the folder web-app-theme on my local folder, and it still manages to find the files when I do rails server - I don't know why, but I think that's part of the problem. — eWizardII
– eWizardII, Commented Nov 19, 2011 at 17:27
I see now that the style has changed a bit and there are no more invalid chars. Is this resolved? If not, do you have an image of what you expect your app to look like? You could always stick the code on github if you don't mind people looking at it — stephenmurdoch
– stephenmurdoch, Commented Nov 19, 2011 at 17:58

stephenmurdoch · Accepted Answer · 2011-11-19 19:18:06Z

3

+50

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

answered Nov 19, 2011 at 19:18

stephenmurdoch

34.7k30 gold badges120 silver badges194 bronze badges

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

2 Comments

stephenmurdoch Over a year ago

ps, I've left a few comments in the Gist, and if you don't have any luck, delete the app from heroku, create a new one on cedar heroku create --stack cedar, push and migrate

eWizardII Over a year ago

Cool, thanks alot! Also turns out one of the other issues - was I think the designer copied the css non-plain text, as I noticed an older css file they sent it didn't have that problem which is the one I put in the override at present.

Richard Hulse · Accepted Answer · 2011-11-17 07:42:38Z

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.

answered Nov 17, 2011 at 7:42

Richard Hulse

10.6k2 gold badges36 silver badges38 bronze badges

1 Comment

eWizardII Over a year ago

Thanks my only issue is that on the local host it loads some of the css - or it doesn't atleast appear like a plane screen, like it does when I push to heroku.

Greg · Accepted Answer · 2011-11-19 09:44:24Z

2

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

answered Nov 19, 2011 at 9:44

Greg

4,5992 gold badges31 silver badges22 bronze badges

1 Comment

eWizardII Over a year ago

Thanks, fixed that - and now I think what might be the problem is like you guys were saying earlier, the new css I got from the designer must have been copied from something that wasn't a plain text file - cause the older new css that I got it worked fine, this one does not, hopefully I get a new one which fixes the issue.

user664833 · Accepted Answer · 2011-11-22 05:49:22Z

2

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

answered Nov 22, 2011 at 5:49

user664833

19.7k20 gold badges97 silver badges151 bronze badges

Collectives™ on Stack Overflow

Rails CSS not Loading using Heroku

4 Answers 4

2 Comments

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related