Help me find right CSS id tags

[stevenukas]

I am trying to modify contact form 7 the way I like it. The problem is I cant find right ID tag for that. I have tried adding div id=“tags” but that does not work.

<div class="wpcf7" id="wpcf7-f48-p2-o1">
<form action="/#wpcf7-f48-p2-o1" method="post" class="wpcf7-form">
<div style="display: none;">
<div id="two-colomn">
<div id="left">
<p>
<p>
<div>
<p/>
<div id="right">
<p>
<p>
<span class="wpcf7-form-control-wrap Postal">
<input type="text" name="Postal" value="Postal Code" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required required" size="40" maxlength="50"/>
</span>
</p>
</div>
<p>
<div id="submit">
<p>
<div class="wpcf7-response-output wpcf7-display-none"/>
</div>

This have worked for one id but I dont understand where other id are

#wpcf7-f48-p2-o1 {
  margin-bottom:0.94em;
  margin-top:1em;
}

Thanks a lot for your help

[kohoutek]

You need to find the CSS file that comes with the contact form setup and make those changes there instead. Alternatively, you have the option to disable all styling in the configuration settings and create your own styles from scratch.

[stevenukas]

@kohoutek

You need to find the CSS file that comes with the contact form setup and make those changes there instead. Alternatively, you have the option to disable all styling in the configuration settings and create your own styles from scratch.

The problem is if plugin gets updated I will lose everything. I wanna avoid it.

[kohoutek]

No, styles normally do not get lost when you update the plugin. If they do, then there’s something wrong with how it is set up.

I’d configure it so (disable styling completely so that it won’t create a .css file) that you can write your form styles right into your main stylesheet. That way you don’t have to mess with whatever the plugin outputs.

[stevenukas]

@kohoutek

No, styles normally do not get lost when you update the plugin. If they do, then there’s something wrong with how it is set up.

I’d configure it so (disable styling completely so that it won’t create a .css file) that you can write your form styles right into your main stylesheet. That way you don’t have to mess with whatever the plugin outputs.

Will try see how that is gonna work out. Thanks for help

[stevenukas]

According to contact form 7 developer when new version comes out and if I update it,will lose all the css modifications. Any other suggestions ?

[ralphm]

@stevenukas

Any other suggestions ?

Just put the styles you want in your regular style sheet, and give them a higher specificity that those in the plugin’s style sheet.

[stevenukas]

@ralph_m

Just put the styles you want in your regular style sheet, and give them a higher specificity that those in the plugin’s style sheet.

ralph.m its all geek to me can you be more specific how to give a higher specificity ?

[ralphm]

@stevenukas

ralph.m its all geek to me

Touché.

Let’s say the style sheet for the contact form comes with a rule like this:

#wpcf7-f48-p2-o1 {
  margin-top:1em;
}

If you were to put a rule in your own style sheet like this:

[COLOR="#FF0000"]div[/COLOR]#wpcf7-f48-p2-o1 {
  margin-top:1em;
}

your rule would win out, because it has a slightly higher specificity. That is, the rule carries slightly more weight. There rules of specificity are described here:

CSS Selectors: Specificity — SitePoint

We could give some more help with this if we knew the actual styles that the supplied style sheet is using, and if we knew what changes you’d like to make. A link to a live example would be best.

[stevenukas]

@ralph_m

Touché.

Let’s say the style sheet for the contact form comes with a rule like this:

#wpcf7-f48-p2-o1 {
  margin-top:1em;
}

If you were to put a rule in your own style sheet like this:

[COLOR="#FF0000"]div[/COLOR]#wpcf7-f48-p2-o1 {
  margin-top:1em;
}

your rule would win out, because it has a slightly higher specificity. That is, the rule carries slightly more weight. There rules of specificity are described here:

http://reference.sitepoint.com/css/specificity

We could give some more help with this if we knew the actual styles that the supplied style sheet is using, and if we knew what changes you’d like to make. A link to a live example would be best.

http://www.supersolarpanels.co.uk/

this is the contact form I am trying to modify, that should be something something like this

http://screencast.com/t/y4x6eo1MmYN

[ralphm]

You can do things like this:

form span.wpcf7-form-control-wrap {
 background: #fff;
 display: inline-block;
 margin: 0 3em 1em 0;
}

form span.wpcf7-form-control-wrap input {
 background: none;
 border: none;
 padding: 0;
 margin: 0;
}

… but it looks like that form add-on is junk, because it isn’t even creating labels for you (which is what you want). Does it have any options for adding them in?

[stevenukas]

@ralph_m

… but it looks like that form add-on is junk, because it isn’t even creating labels for you (which is what you want). Does it have any options for adding them in?

I am amble to add html code if understand you right,sorry but I am new to the whole styling and coding thing.

<div id="two-colomn">
<div id="left">

and expected to move things around with css. Or you mean label class=“tag” ?

Can you explain where did “form” comes from before “span.wpcf7-form-control-wrap” ?

Thanks for you time ralph.m

[ralphm]

@stevenukas

I am amble to add html code if understand you right

There really should be a <label> element associates with each of those text <input> elements, and that is what is pictured in your second link. This is a basic example of label/input pairs:

<form method="post" action="">
		<fieldset> 
			<legend>Contact Us</legend>
				<div>
					<label for="name">Name</label>
					<input name="name" type="text" size="40" maxlength="60" id="name" value="">
				</div>
				<div>
					<label for="email">Email Address</label>
					<input name="email" type="email" size="40" maxlength="60" id="email" value="">
				</div>
				
				<div>
					<label for="comm">Comments</label>
					<textarea name="comments" rows="10" cols="50" id="comm"></textarea>
				</div>
				
				<input type="hidden" name="loadtime" value="1358115668">
				
				<div>
					<input type="submit" name="submit" value="Send">
				</div>
		</fieldset>
	</form>

Can you explain where did “form” comes from before “span.wpcf7-form-control-wrap” ?

CSS styles elements by “targeting” them with selectors … or, in other words, you cite various elements in the CSS and tell the browser to style them a particular way. The link I gave on specificity above helps to explain that a bit. By adding “form” to the rule, it becomes a little more “specific” and that default rule. It’s just saying “find a <form> element on the page, then a span inside it with a class of wpcf7-form-control-wrap”. That rule will override a rule that just says “find a span inside it with a class of wpcf7-form-control-wrap”.

[stevenukas]

@ralph_m

CSS styles elements by “targeting” them with selectors … or, in other words, you cite various elements in the CSS and tell the browser to style them a particular way. The link I gave on specificity above helps to explain that a bit. By adding “form” to the rule, it becomes a little more “specific” and that default rule. It’s just saying “find a <form> element on the page, then a span inside it with a class of wpcf7-form-control-wrap”. That rule will override a rule that just says “find a span inside it with a class of wpcf7-form-control-wrap”.

Thanks a lot for your help,time to put everything in practice and see how it works out

[ralphm]

@stevenukas

time to put everything in practice and see how it works out

Indeed. Trying it out is essential. I’m learning JS at the moment, but just reading about it is useless (for me, anyhow).