I’ve purchased a HTML/CSS template to use for a Rails app. I have the Rails app playing well with the template by placing the template code as a layout, then using <%= yield %> to place the rails content into the template. Everything works fine, including the CSS stylings.
One wrinkle….
I can’t seem to get the Log-in screen to work. The trouble seems to be in replacing the way the template processes a form (HTML and CSS issue) and the way Rails wants a form to be passed.
Here’s the template form area:
<body id="login">
<header>
<div id="logo">
<a href="login.html">whitelabel</a>
</div>
</header>
<section id="content">
<form action="submit.php" id="loginform">
<fieldset>
<section><label for="username">Username</label>
<div><input type="text" id="username" name="username" autofocus></div>
</section>
<section><label for="password">Password <a href="#">lost password?</a></label>
<div><input type="password" id="password" name="password"></div>
<div><input type="checkbox" id="remember" name="remember"><label for="remember" class="checkbox">remember me</label></div>
</section>
<section>
<div><button class="fr submit">Login</button></div>
</section>
</fieldset>
</form>
</section>
<footer>Copyright by revaxarts.com 2011</footer>
And here’s the standard Rails login form code (using Devise views)
<h2>Sign in</h2>
<%= form_for(resource, :as => resource_name, :url => session_path(resource_name)) do |f| %>
<p><%= f.label :emailer %><br />
<%= f.text_field :email %></p>
<p><%= f.label :password %><br />
<%= f.password_field :password %></p>
<p><%= f.submit "Sign in" %></p>
<% end %>
<%= render :partial => "devise/shared/links" %>
I can’t seem to figure out how to introduce the CSS instructions into the existing Rails form_for parts. I’ve tried lots of different combos, but nothing works.
Lastly, except for the CSS styling, the form will submit and let me into the app, so I know the back-end Devise wiring is working. It just wont take the CSS styling.
Also, I can cut-paste the entire code from the template log-in screen, and the log-in fields load with the correct CSS styling, so I know that the part points to the right CSS and JS files and that they are present and working.
Any ideas?
Thanks!
You simply need to add the CSS id and class parameters to the view:
http://guides.rubyonrails.org/form_helpers.html