SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Enthusiast stevenukas's Avatar
    Join Date
    Jul 2012
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help me find right CSS id tags

    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.

    HTML Code:
    <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

    Code:
    #wpcf7-f48-p2-o1 {
      margin-bottom:0.94em;
      margin-top:1em;
    }
    Thanks a lot for your help

  2. #2
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    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.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  3. #3
    SitePoint Enthusiast stevenukas's Avatar
    Join Date
    Jul 2012
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by kohoutek View Post
    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.

  4. #4
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    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.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  5. #5
    SitePoint Enthusiast stevenukas's Avatar
    Join Date
    Jul 2012
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by kohoutek View Post
    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

  6. #6
    SitePoint Enthusiast stevenukas's Avatar
    Join Date
    Jul 2012
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 ?

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by stevenukas View Post
    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.

  8. #8
    SitePoint Enthusiast stevenukas's Avatar
    Join Date
    Jul 2012
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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 ?

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by stevenukas View Post
    ralph.m its all geek to me
    Touché.

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

    Code:
    #wpcf7-f48-p2-o1 {
      margin-top:1em;
    }
    If you were to put a rule in your own style sheet like this:

    Code:
    div#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.

  10. #10
    SitePoint Enthusiast stevenukas's Avatar
    Join Date
    Jul 2012
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Touché.

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

    Code:
    #wpcf7-f48-p2-o1 {
      margin-top:1em;
    }
    If you were to put a rule in your own style sheet like this:

    Code:
    div#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.
    Code:
    http://www.supersolarpanels.co.uk/
    this is the contact form I am trying to modify, that should be something something like this
    Code:
    http://screencast.com/t/y4x6eo1MmYN

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    You can do things like this:

    Code:
    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?

  12. #12
    SitePoint Enthusiast stevenukas's Avatar
    Join Date
    Jul 2012
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    ... 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.
    Code:
    <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

  13. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by stevenukas View Post
    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:

    Code:
    <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".

  14. #14
    SitePoint Enthusiast stevenukas's Avatar
    Join Date
    Jul 2012
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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

  15. #15
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by stevenukas View Post
    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).


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •