ThemeShaper Forums » Thematic

CSS, changing ONLY certain text elements

(11 posts)
  • Started 10 years ago by jhorac1
  • Latest reply from Chris
  • This topic is resolved
  1. jhorac1
    Member

    Is there any way to change the color of the text that is input into the text fields to black (currently white! along with the color of the "Send" button at the bottom!) WITHOUT also changing the color of the text entered into the search bar in the upper right of my blog?

    I'm using Contact Form 7.

    Posted 10 years ago #
  2. Hey,

    you can style:

    .wpcf7 input, .wpcf7 textarea {...}

    Install FireFox and the add-on FireBug .. this will show you all necessary details 'bout the elements of your blog.

    Cheers,

    Chris

    Posted 10 years ago #
  3. jhorac1
    Member

    Thank you! That works great. While constructing my blog I'm learning a lot about CSS and syntax, whereas before I knew very little.

    Thank you for helping and instructing me!

    Posted 10 years ago #
  4. jhorac1
    Member

    I've come across one more hiccup that I don't quite know how to handle.

    I added the CSS tags you suggested into the "style.css" of my child theme, and was able to successfully change the color of the text. I also, however, would like to change the width of the text fields so that they aren't so narrow and crammed over on the left side.

    Using firebug, I can add a width attribute to the ".wpcf7 input, .wpcf7 textarea" and get the effect I want, but when I actually add the width attribute to the CSS file, save it, then reload the page from the server, neither the color or width has any effect, and it once again appears as if my additions don't have any effect? When I look at the CSS of this in firebug the tag is present, but the attributes are completely missing.

    Why does simply adding a color attribute seem to work perfectly, and yet when I add another attribute does it essentially make everything null?

    Posted 10 years ago #
  5. jhorac1
    Member

    Just to clarify: if I add this code to the child theme:

    .wpcf7 input, .wpcf7 textarea {
    color:#000000
    }

    It works as I would expect and changes the color of the text in the fields to black. If I add the following code to the child theme, however:

    .wpcf7 input, .wpcf7 textarea {
    color:#000000
    width:700px
    }

    Neither of the attributes makes any difference (although it DOES make a difference when editing the CSS on the fly using firebug, when I actually make the changes to the CSS file it doesn't work at all). And when I look at the saved page in firebug I can only see this:

    .wpcf7 input, .wpcf7 textarea {
    }

    The attributes are completely missing. What might be causing this?

    Posted 10 years ago #
  6. You need to add a semi-colon to your declarations like so:

    .wpcf7 input, .wpcf7 textarea {
    color:#000000;
    width:700px;
    }
    Posted 10 years ago #
  7. jhorac1
    Member

    Of course!!! Thank you for pointing out the obvious! As a CSS newb I've now learned to double check my syntax.

    Now that the syntax is proper everything is working as it should, except I didn't expect the width of the "Send" button to also be affected by the changes made above, so now I have an enormous "Send" button. How do I change the width of the button independently from the other text fields?

    Posted 10 years ago #
  8. Select one of the text fields and look into FireBug. Each one of the text fields is enwrapped into a SPAN tag .. use its class to define the width.

    Cheers & Happy Easter,

    Chris

    Posted 10 years ago #
  9. .. should be input fields.

    Posted 10 years ago #
  10. jhorac1
    Member

    Thanks for pointing me to this, Chris. So . . . in an effort to do this on my own, I tried to add the following code to the style.css of my child theme:

    .wpcf7-form-control-wrap your-name {
    size:700px;
    }

    Alas, . . . that didn't work. I found those SPAN tags you referred me to, . . . but now what do I do with them?

    Posted 10 years ago #
  11. Pretty close ;-) ..

    You found the right SPAN tag and you found two classes wpcf7-form-control-wrap and your-name. You can use one of these classes but not both together in one selector.

    Ok .. back to what you need to change .. the input and the textarea .. looking on each of these entries we can see that the first SPAN class remains the same while the second SPAN class is changing.

    Let's make life easy and choose the first span class .. plus we need input and textarea to identify the elements that needs to be changed .. can you follow? ..

    Now let's put everything together:

    .first-span-class selector1, .first-span-class selector2 {...} .. don't use this in your style.css it's just the blue print :-)

    Put some life into that blue print:

    .wpcf7-form-control-wrap input, .wpcf7-form-control-wrap textarea {width:700px;}

    Cheers,

    Chris

    Posted 10 years ago #

RSS feed for this topic

Reply

You must log in to post.