Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial![](https://ecs-static.teamtreehouse.com/assets/views/marketing/shared/community-banner-white-47072046c51352fe6a69f5e691ff5700b28bb11d45197d7bdf066d9ea3f72d0c.webp)
![gopinath para](https://secure.gravatar.com/avatar/289bd7a647461075bf1b7c74d67a4dae?s=96&d=https%3A%2F%2Fecs-static.teamtreehouse.com%2Fassets%2Fcontent%2Fdefault_avatar-445fbbabfc8dc9188fb5967fe43322ee0c3e0dd1e10f378bf8343784af5a13eb.webp&r=pg)
gopinath para
2,880 PointsEditing Styles.css of Contact form7 plugin in wordpress
Hai All,
I've a quick query About Contact form 7 in wordpress.in contact form 7 we have styles.css at
/wp-content/plugins/contact-form-7/includes/css/styles.css
But when i made the changes to div.wpcf7 class this style sheet ,it is not applying to in my website.
Basically i need to ask this question in that plugin forum but if i do that i need to wait for days to get replay.and also our treehouse folks are very smart and i'm getting response immediately. so any of our treehouse folk who has some experience with Contact form 7 .please help me Sam Lucklore
12 Answers
![Michael Gillihan](https://secure.gravatar.com/avatar/91127d18e92a9a6db22d46e81d9126ee?s=96&d=https%3A%2F%2Fecs-static.teamtreehouse.com%2Fassets%2Fcontent%2Fdefault_avatar-445fbbabfc8dc9188fb5967fe43322ee0c3e0dd1e10f378bf8343784af5a13eb.webp&r=pg)
Michael Gillihan
11,774 PointsYou should be able to override the form styles by adding to your theme's style.css within the editor.
You could change the background color of your contact form textarea by adding this to the bottom of your style.css:
.wpcf7-textarea { background: hotpink; }
I wouldn't recommend changing the plugin's files unless you plan on doing manual updates.
![gopinath para](https://secure.gravatar.com/avatar/289bd7a647461075bf1b7c74d67a4dae?s=96&d=https%3A%2F%2Fecs-static.teamtreehouse.com%2Fassets%2Fcontent%2Fdefault_avatar-445fbbabfc8dc9188fb5967fe43322ee0c3e0dd1e10f378bf8343784af5a13eb.webp&r=pg)
gopinath para
2,880 PointsHey Michael,
My basic intention is to add margin-right to the form and what to remove bottom scroll .which you can find in http://gopinathpara.info .you will find this form by clicking green "Contact us" button on that webiste. this form is basically a Bootstrap CSS styled form. but when i try to add .wpcf7 { margin-right:20px; }
it is not applying .!!! :( Any suggestion ?? Michael Gillihan
![Michael Gillihan](https://secure.gravatar.com/avatar/91127d18e92a9a6db22d46e81d9126ee?s=96&d=https%3A%2F%2Fecs-static.teamtreehouse.com%2Fassets%2Fcontent%2Fdefault_avatar-445fbbabfc8dc9188fb5967fe43322ee0c3e0dd1e10f378bf8343784af5a13eb.webp&r=pg)
Michael Gillihan
11,774 PointsThis is the only specific style I see being applied to the form element:
div.wpcf7 { margin-right: 60px; margin-top: 30px; padding: 0; }
You can try
div.wpcf7 { margin-right: 20px; }
in your theme's style.css.
Apart from that it's just a part of the learning process to narrow down and find your bugs. I am no CF7 guru, but I have styled it before using the above method. You have a lot of things going on there that affect that form.
I know CF7 has a fair amount of documentation as well. You might find more there about customizing your form.
Good Luck!
![gopinath para](https://secure.gravatar.com/avatar/289bd7a647461075bf1b7c74d67a4dae?s=96&d=https%3A%2F%2Fecs-static.teamtreehouse.com%2Fassets%2Fcontent%2Fdefault_avatar-445fbbabfc8dc9188fb5967fe43322ee0c3e0dd1e10f378bf8343784af5a13eb.webp&r=pg)
gopinath para
2,880 PointsThanks for your time Michael Gillihan . i already tried this methods. i already went through the docs but not detailed. hope i'll get solution there
![samiff](https://uploads.teamtreehouse.com/production/profile-photos/33753/micro_dastardly-delirious.jpg)
samiff
31,206 PointsYou still working on this? If so, what are you trying to do that's giving you trouble?
![gopinath para](https://secure.gravatar.com/avatar/289bd7a647461075bf1b7c74d67a4dae?s=96&d=https%3A%2F%2Fecs-static.teamtreehouse.com%2Fassets%2Fcontent%2Fdefault_avatar-445fbbabfc8dc9188fb5967fe43322ee0c3e0dd1e10f378bf8343784af5a13eb.webp&r=pg)
gopinath para
2,880 PointsI'm trying to add the following code to my theme
div.wpcf7 { margin-right: 60px; margin-top: 30px; padding: 0; } But it is not applying !! the code is basically to add margins to contact 7 form which you will find on http://gopinathpara.infoby clicking "Contact us" Green button
![samiff](https://uploads.teamtreehouse.com/production/profile-photos/33753/micro_dastardly-delirious.jpg)
samiff
31,206 PointsI've never used that plugin, so I'm confused on what's going on with the page. The div I see with the class of "wpcf7" is currently set to display:none? Is that intentional in this case?
![gopinath para](https://secure.gravatar.com/avatar/289bd7a647461075bf1b7c74d67a4dae?s=96&d=https%3A%2F%2Fecs-static.teamtreehouse.com%2Fassets%2Fcontent%2Fdefault_avatar-445fbbabfc8dc9188fb5967fe43322ee0c3e0dd1e10f378bf8343784af5a13eb.webp&r=pg)
gopinath para
2,880 PointsNot..it's not ...Can you please send me the css code that you can see for div.wpcf7 class ? Sam Lucklore
![Zac Gordon](https://secure.gravatar.com/avatar/de0a01122ca4a619004332ab04431b7b?s=96&d=https%3A%2F%2Fecs-static.teamtreehouse.com%2Fassets%2Fcontent%2Fdefault_avatar-445fbbabfc8dc9188fb5967fe43322ee0c3e0dd1e10f378bf8343784af5a13eb.webp&r=pg)
Zac Gordon
Treehouse Guest TeacherWhen I look at this it looks like the right margin is set from your style.css file. Is there another specific class you want?
Since the plugin css file loads after your style.css file you will have to make your rules more specific than theres.
So if their rule is like this
.wpcf7 input { ... }
Then yours should be something like
.wrapper-class .wpcf7 input { ... }
Sometimes folks add !important to the end of a rule to override it, but this isn't really the best approach.
![gopinath para](https://secure.gravatar.com/avatar/289bd7a647461075bf1b7c74d67a4dae?s=96&d=https%3A%2F%2Fecs-static.teamtreehouse.com%2Fassets%2Fcontent%2Fdefault_avatar-445fbbabfc8dc9188fb5967fe43322ee0c3e0dd1e10f378bf8343784af5a13eb.webp&r=pg)
gopinath para
2,880 PointsHai Zac,
First of all thanks for the response.But the plugin Styles.css is inactive !!!
and also i've one more question. in IE8 image of wordpress are not showing properly . there are red X marks on the pages.here is the screenshot
http://touchstore.specbee.com/wp-content/uploads/2013/05/Doc1.docx
Can you please let me know the commen reason for this and how to fix this?
And also did Metro style themes will work fine in IE8 or older version ?? because my website is not presenting properly in IE8 at 1024*768 display .i'm using Metro style theme .the site is
![Zac Gordon](https://secure.gravatar.com/avatar/de0a01122ca4a619004332ab04431b7b?s=96&d=https%3A%2F%2Fecs-static.teamtreehouse.com%2Fassets%2Fcontent%2Fdefault_avatar-445fbbabfc8dc9188fb5967fe43322ee0c3e0dd1e10f378bf8343784af5a13eb.webp&r=pg)
Zac Gordon
Treehouse Guest TeacherBoth the plugin and your CSS are loading and active.
As for the styling issues, IE CSS troubleshooting is not really my forte. That should definitely go up as a separate forum post tagged with CSS :)
![samiff](https://uploads.teamtreehouse.com/production/profile-photos/33753/micro_dastardly-delirious.jpg)
samiff
31,206 Pointsgopinath para I was just generally confused on why there were two "form" elements on the page, but I'm only familiar with the JetPack contact form plugin.