How do I style the default Formtastic labels?

Question

I'm a new to Formtastic here. How do I go about styling Formtastic elements? By default, the labels beside my form elements are colored white. Is this normal or is it because I don't have a formtastic.css in my stylesheets folder?

Answer 1

I was able to figure it out myself.

In my zsh shell in the directory for my Rails app, I ran rails generate formtastic:install .

I also put in the requisite requires in my application.css.scss file:

     *= require formtastic
     *= require my_formtastic_changes

Following this, I just created a my_formtastic_changes.css.scss file in my stylesheets directory and implemented the following bit.

    <%= semantic_form_for @section do |f| %>
      <%= f.inputs do %>
       <div id="section-details">
         <%= f.input :name %>
         <%= f.input :category %>
         <%= f.input :description %>
         <%= f.input :filepath %>
         <%= f.input :site_section_id %>
       </div>
    <% end %>

I just then styled it in the my_formtastic_changes.scss with this:

    #section-details label {
        color: #000;
    }

Answer 2

There is hardly anything special about styling Formtastic elements. You have to identify them in some CSS (or preferably SCSS nowadays) file and style it to your likings. Your favorite browsers Element info context menu will be very helpful in figuring out why an element is formatted the way it is.

If you desire a more specifc answer you should post the code of your Formtastic form together with the resulting HTML and a description of the label format you desire.