Contact Form 7
Support Area › Forums › Moonrise › Contact Form 7
Tagged: contact form 7
- This topic has 12 replies, 2 voices, and was last updated 9 years ago by Bill Robbins.
-
AuthorPosts
-
March 25, 2015 at 02:56 #28086RecipeSocialParticipant
Hi Bill,
I’ve installed the Contact Form 7 plugin and but it appears to be conflicting with something, as the look of it is wrong. Please can you take a quick look and let me know what you think.
I’ve had a look for settings for the plugin, but there doesn’t appear to be any, at least not with the free version anyway.
If you need login details, let me know.
Thanks,
Christian.March 25, 2015 at 14:53 #28121Bill RobbinsModeratorI took a look at the contact form. It appears that we have a white background with white form inputs. You can change the color this way if you’d like to:
- Go to your theme options page and choose the Advanced tab.
- Scroll down to the Custom CSS box and add this:
#author, #comment, #email, #url, input#s, textarea, input[type="email"], input[type="text"], .gform_body input, .gform_body textarea { background-color: #f3f3f3; border-left: 4px solid #2686B1; }
- Update your settings.
See how that works and let me know if you have trouble,
BillMarch 25, 2015 at 22:07 #28143RecipeSocialParticipantHi Bill,
Thanks for the code.
It is better, however, it’s still not quite neat or polished as i’d like.
I’m wondering if it would better remove the CSS code and change the actual background colour of the contact section instead. Is this a possibility?
Thanks,
Christian.March 25, 2015 at 22:09 #28144RecipeSocialParticipantHi Bill,
I forgot to mention, i’d be looking to change the background colour just on the contact section. Is this possible?
Thanks,
Christian.March 26, 2015 at 06:37 #28150Bill RobbinsModeratorIt is possible to change just the contact section. Here’s how to do that:
- Go to your theme options page and choose the Advanced tab.
- Scroll down to the Custom CSS box and add this:
.contact { padding: 30px; background-color: #dadada; }
- Update your settings.
Let me know how that goes,
BillMarch 26, 2015 at 08:53 #28164RecipeSocialParticipantHi Bill,
Thanks for the code, it has worked.
Now seeing the results, i’m wondering if the greay boxed contact area, should just be outlined with a black line to tie it all together. It would be more minimal and less grey! and hopefully easier on the eye.
Might this be possible?
Thanks,
Christian.March 26, 2015 at 09:01 #28167Bill RobbinsModeratorYou’re welcome to add a border. The snippet above could be changed like this:
.contact { padding: 30px; background-color: #dadada; border: 1px solid #000000; }
which would give you a 1 pixel, solid border that is black. You can change the width by making the 1px larger and the color by switching out the #000000 for the color you’d like to have.
Have fun,
BillMarch 26, 2015 at 09:23 #28171RecipeSocialParticipantHi Bill,
Thanks for the code. I have taken your CSS advice on board and just changed the background colour from grey to white!
Now i just need to figure out how to tweak the CSS on the contact 7 form.
Would I do that in the edit section of the plugin?
Thanks,
Christian.March 26, 2015 at 09:35 #28172Bill RobbinsModeratorI don’t know if Contact Form 7 has any built in tools to edit its styling. What specifically about how it looks are you wanting to change?
March 26, 2015 at 10:35 #28186RecipeSocialParticipantI can’t see any edit features, maybe they come with the upgrade?
Just wanting to change the data entry field, even just a 1px line to outline each data field would be fine.
Might this be possible?
Thanks,
Christian.March 26, 2015 at 10:39 #28188Bill RobbinsModeratorGotcha. That would be set the theme and not the plugin. In CSS an outline is typically a border. You would add it in a similar way to how it we did the contact section.
#author, #comment, #email, #url, input#s, textarea, input[type="email"], input[type="text"], .gform_body input, .gform_body textarea { border-left: 4px solid #2686B1; border-top: 1px solid #cccccc; border-right: 1px solid #cccccc; border-bottom: 1px solid #cccccc; }
That will keep the colored border on the left and add a 1 pixel border to the other sides. If you them the same on all sides, then change the border-left in that snippet to match the others.
See how that goes,
BillMarch 26, 2015 at 10:58 #28196RecipeSocialParticipantThat did it! Thanks 🙂 You’re pretty good at this CSS stuff! 😉
Christian.
March 26, 2015 at 10:59 #28197Bill RobbinsModeratorThanks 🙂
-
AuthorPosts
- The topic ‘Contact Form 7’ is closed to new replies.