← Back to Upcase

Flashcards post 'completion' question - Styling and form_for


(Christopher Patti) #1

I’m trying to add some very simple CSS to spruce up the flashcards app after completing the steps detailed in the video series.

I can style the new user - Signup form just fine, the HTML produced looks like:

<form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="KbpEgGiTIqwh6PeMXtT7CtPqjzUr4b+AoxVbyvfCu/w=" /></div>
  <div>
    <label for="user_email">Email</label>
    <input id="user_email" name="user[email]" size="30" type="text" />
  </div>
  <input name="commit" type="submit" value="Sign up" />
</form>

That new_user class there makes it easy to handle even with my miniscule CSS skills, but I notice the sign in form has no such niceties:

<form accept-charset="UTF-8" action="/session" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="KbpEgGiTIqwh6PeMXtT7CtPqjzUr4b+AoxVbyvfCu/w=" /></div>
  <div>
    <label for="session_email">Email</label>
    <input id="session_email" name="session[email]" size="30" type="text" />
  </div>
  <input name="commit" type="submit" value="Sign in" />
</form>

So I’m wondering what the best way to handle this is? I just want to put a border around it and add a margin and some padding, which I’ve successfully achieved in the signup form by adding a signup_form.css file to the app/assets/stylesheets dir and referencing it with a <%= style_link_tag "signup_form.css" %> in both view files.

What I have so far is checked in at https://github.com/feoh/intro-rails-ruby/tree/master/flashcards

Been loving the course so far. Thanks for putting it together!
-Chris