CSS Editor

Additional CSS is generally intended for use with parent themes, so that you can edit their CSS without losing the changes with the parent theme updates.

Since you’re already using a child theme (which also avoids the parent theme update problem), you might as well just edit the child theme’s style.css via Appearance > Editor.

To be clear, the load order is:

1. Parent theme’s style.css (changes made here will be lost whenever the theme is updated).
2. Child theme’s style.css (conflicts will override #1).
3. Additional CSS (conflicts will override #1 and #2).

I read what you have said, and thank you.

However, I diligently cut and pasted all the style modifications from the sheet reached via method B into the sheet reached by Editor (method A).
This lost the effect of all those style mods.
So I suspect the Child Theme’s CSS is not overriding #1. Confused.

Of course I will double check…

Just to prove that what I’ve said is not rubbish, I reversed what I did, and the modifications (a green border) have restored successfully.

Here is what is now in the Additional CSS section:-
/* Contact Form 7 Styles
———————————*/
.wpcf7
{
background-color: #f7f7f7;
border: 8px solid #299325;
width: 650px;
float: center
}
In the Editor section is the following:-

/*
Theme Name: Twenty Fourteen Child
Theme URI: https://example.com/twenty-fifteen-child/
Description: Twenty Fourteen Child Theme
Author: Alistair Wood
Author URI: https://example.com
Template: twentyfourteen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twenty-fourteen-child
*/
@import url(“../twentyfourteen/style.css”);

.site-content .entry-content,
.page-content {
max-width: 80%;
}

Be glad of your thoughts, James

• This reply was modified 6 years, 6 months ago by ali282.
• This reply was modified 6 years, 6 months ago by ali282.
• This reply was modified 6 years, 6 months ago by ali282.

I’m a bit confused here then.

What you have listed as under Additional CSS is not included in what you listed for the editor section.

Precisely:
They are different.
If I move the code from the Additional CSS section above, to append to the code in the Editor section, I lose the background colour effect.

So it only seems to work when it is in the Additional CSS section.

So the following does NOT produce the border effect:

Additional CSS section:-
(EMPTY)

Editor section:-
/*
Theme Name: Twenty Fourteen Child
Theme URI: https://example.com/twenty-fifteen-child/
Description: Twenty Fourteen Child Theme
Author: Alistair Wood
Author URI: https://example.com
Template: twentyfourteen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twenty-fourteen-child
*/
@import url(“../twentyfourteen/style.css”);
.site-content .entry-content,
.page-content {
max-width: 80%;
}
/* Contact Form 7 Styles */
.wpcf7
{
background-color: #f7f7f7;
border: 8px solid #299325;
width: 650px;
float: center
}

• This reply was modified 6 years, 6 months ago by ali282.
• This reply was modified 6 years, 6 months ago by ali282.
• This reply was modified 6 years, 6 months ago by ali282.

Try:

.wpcf7
{
background-color: #f7f7f7 !important;
border: 8px solid #299325 !important;
width: 650px !important;
float: center !important;
}