Where should I place this CSS code?

  • Resolved monsterman

    (@monsterman)


    11 years, 3 months ago

    I am using Contact Form 7 and am trying to modify the colour and width of the borders of the various text boxes.

    According to the plugin documentation:

    Which Style Sheet Should I Edit?

    Any style sheet is okay, but I recommend editing your theme’s main style sheet. It’s better not to edit style sheets in the plugin because your changes will be overwritten when the plugin is updated. Themes can be updated, but they are generally updated less frequently than plugins. If your theme is updated often, you might make a child theme and manage the style sheet in the child theme.

    The code I want to edit is:

    .wpcf7 {
    background-color: #fff;
    border: 20px solid #111111;
    border-radius: 3px;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.06) inset;
    color: #aaa;
    font-size: 16px;
    font-weight: 400;
    padding: 16px;
    width: 100%;
}

    Site: http://www.ripponacademic.com/contact/

    The key line (which I have changed in the above CSS) is:
    border: 20px solid #111111;

    I have tried, following the instructions, placing this CSS in my theme’s style.css. I have also placed it in the plugin “Simple Custom CSS”.

    However, in neither case, are there any changes to the text boxes of the form.

    I’m at a loss to know where to place the CSS. Any ideas? Thanks.

    This is what the bottom of my style.css looks like:

    .wpcf7 {
    background-color: #fff;
    border: 5px solid #111111;
    border-radius: 3px;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.06) inset;
    color: #aaa;
    font-size: 16px;
    font-weight: 400;
    padding: 16px;
    width: 100%;
	}

}

Viewing 5 replies - 1 through 5 (of 5 total)
  • stephencottontail

    (@stephencottontail)

    11 years, 3 months ago

    It looks like someone inadvertently used a closing parenthesis instead of a closing bracket in the previous section:

    .home-top {
  border-top: 20px solid #ffffff;
  border-left: 30px solid #ffffff;
  border-right: 30px solid #ffffff;
)

    which is causing parsing errors throughout the rest of your code. If you replace the ) with a }, you should be fine.

    Thread Starter monsterman

    (@monsterman)

    11 years, 3 months ago

    Thanks Stephen. You were correct.

    The final code looks like this

    .wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
    background-color: #FAFAFA;
    border: 2px solid #848484;
    border-radius: 3px;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.06) inset;
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    padding: 16px;
    width: 100%;
}
    Thread Starter monsterman

    (@monsterman)

    11 years, 3 months ago

    BTW: how did you manage to see the previous CSS with the bracket?

    It’s not on the same page as the contact form so I don’t see how you could have viewed it with Firebug or the equivalent.

    Thread Starter monsterman

    (@monsterman)

    11 years, 3 months ago

    Also, I have another minor issue.

    I managed to change the width and colour of the textarea entry fields but am trying to do the same without success for the checkboxes.

    My test code in “Simple Custom CSS” plugin is:

    .wpcf7 input[type="checkbox"] {
    border: 5px solid pink;
}

    However, this does not alter the checkboxes even though the same CSS does modify the textarea boxes (see previous posts).

    Any ideas are greatfully received.

    stephencottontail

    (@stephencottontail)

    11 years, 3 months ago

    All of the CSS in a custom CSS plugin is loaded as part of the same “stylesheet”, even if some parts don’t apply to particular pages. Since I can see your custom CSS plugin’s stylesheet being loaded on the page you linked, I can see all the CSS within it, even though some parts don’t apply to the page you linked.

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Where should I place this CSS code?’ is closed to new replies.