Title: Where should I place this CSS code?
Last modified: August 22, 2016

---

# Where should I place this CSS code?

 *  Resolved [monsterman](https://wordpress.org/support/users/monsterman/)
 * (@monsterman)
 * [11 years, 3 months ago](https://wordpress.org/support/topic/where-should-i-place-this-css-code/)
 * I am using Contact Form 7 and am trying to modify the colour and width of the
   borders of the various text boxes.
 * According to the plugin documentation:
 * Which Style Sheet Should I Edit?
 * Any style sheet is okay, but I recommend editing your theme’s main style sheet.
   It’s better not to edit style sheets in the plugin because your changes will 
   be overwritten when the plugin is updated. Themes can be updated, but they are
   generally updated less frequently than plugins. If your theme is updated often,
   you might make a child theme and manage the style sheet in the child theme.
 * The code I want to edit is:
 *     ```
       .wpcf7 {
           background-color: #fff;
           border: 20px solid #111111;
           border-radius: 3px;
           box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.06) inset;
           color: #aaa;
           font-size: 16px;
           font-weight: 400;
           padding: 16px;
           width: 100%;
       }
       ```
   
 * Site: [http://www.ripponacademic.com/contact/](http://www.ripponacademic.com/contact/)
 * The key line (which I have changed in the above CSS) is:
    `border: 20px solid#
   111111;`
 * I have tried, following the instructions, placing this CSS in my theme’s style.
   css. I have also placed it in the plugin “Simple Custom CSS”.
 * However, in neither case, are there any changes to the text boxes of the form.
 * I’m at a loss to know where to place the CSS. Any ideas? Thanks.
 * This is what the bottom of my style.css looks like:
 *     ```
       .wpcf7 {
           background-color: #fff;
           border: 5px solid #111111;
           border-radius: 3px;
           box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.06) inset;
           color: #aaa;
           font-size: 16px;
           font-weight: 400;
           padding: 16px;
           width: 100%;
       	}
   
       }
       ```
   

Viewing 5 replies - 1 through 5 (of 5 total)

 *  [stephencottontail](https://wordpress.org/support/users/stephencottontail/)
 * (@stephencottontail)
 * [11 years, 3 months ago](https://wordpress.org/support/topic/where-should-i-place-this-css-code/#post-5719956)
 * It looks like someone inadvertently used a closing parenthesis instead of a closing
   bracket in the previous section:
 *     ```
       .home-top {
         border-top: 20px solid #ffffff;
         border-left: 30px solid #ffffff;
         border-right: 30px solid #ffffff;
       )
       ```
   
 * which is causing parsing errors throughout the rest of your code. If you replace
   the `)` with a `}`, you should be fine.
 *  Thread Starter [monsterman](https://wordpress.org/support/users/monsterman/)
 * (@monsterman)
 * [11 years, 3 months ago](https://wordpress.org/support/topic/where-should-i-place-this-css-code/#post-5719989)
 * Thanks Stephen. You were correct.
 * The final code looks like this
 *     ```
       .wpcf7 input[type="text"],
       .wpcf7 input[type="email"],
       .wpcf7 textarea {
           background-color: #FAFAFA;
           border: 2px solid #848484;
           border-radius: 3px;
           box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.06) inset;
           color: #fff;
           font-size: 16px;
           font-weight: 400;
           padding: 16px;
           width: 100%;
       }
       ```
   
 *  Thread Starter [monsterman](https://wordpress.org/support/users/monsterman/)
 * (@monsterman)
 * [11 years, 3 months ago](https://wordpress.org/support/topic/where-should-i-place-this-css-code/#post-5719991)
 * BTW: how did you manage to see the previous CSS with the bracket?
 * It’s not on the same page as the contact form so I don’t see how you could have
   viewed it with Firebug or the equivalent.
 *  Thread Starter [monsterman](https://wordpress.org/support/users/monsterman/)
 * (@monsterman)
 * [11 years, 3 months ago](https://wordpress.org/support/topic/where-should-i-place-this-css-code/#post-5719998)
 * Also, I have another minor issue.
 * I managed to change the width and colour of the textarea entry fields but am 
   trying to do the same without success for the checkboxes.
 * My test code in “Simple Custom CSS” plugin is:
 *     ```
       .wpcf7 input[type="checkbox"] {
           border: 5px solid pink;
       }
       ```
   
 * However, this does not alter the checkboxes even though the same CSS does modify
   the textarea boxes (see previous posts).
 * Any ideas are greatfully received.
 *  [stephencottontail](https://wordpress.org/support/users/stephencottontail/)
 * (@stephencottontail)
 * [11 years, 3 months ago](https://wordpress.org/support/topic/where-should-i-place-this-css-code/#post-5720001)
 * All of the CSS in a custom CSS plugin is loaded as part of the same “stylesheet”,
   even if some parts don’t apply to particular pages. Since I can see your custom
   CSS plugin’s stylesheet being loaded on the page you linked, I can see all the
   CSS within it, even though some parts don’t apply to the page you linked.

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Where should I place this CSS code?’ is closed to new replies.

 * 5 replies
 * 2 participants
 * Last reply from: [stephencottontail](https://wordpress.org/support/users/stephencottontail/)
 * Last activity: [11 years, 3 months ago](https://wordpress.org/support/topic/where-should-i-place-this-css-code/#post-5720001)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics