CSS Editor

  • ali282

    (@ali282)


    7 years, 10 months ago

    There seem to be two ways of editing my style sheet(s).
    A) using Appearance – Editor (Theme = Twenty Fourteen Child)
    B) using Appearance – Themes – (Twenty Fourteen Child) – Customise – Additional CSS.
    Is there just one resultant style sheet, with B following A?
    Is there a way of seeing the contents of the CSS when I’m in the site, to prove this? I tried using Edge Developer Tools but got lost.

    • This topic was modified 7 years, 10 months ago by ali282.
Viewing 7 replies - 1 through 7 (of 7 total)
  • Moderator James Huff

    (@macmanx)

    7 years, 10 months ago

    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).

    Thread Starter ali282

    (@ali282)

    7 years, 10 months ago

    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…

    Thread Starter ali282

    (@ali282)

    7 years, 10 months ago

    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: http://example.com/twenty-fifteen-child/
    Description: Twenty Fourteen Child Theme
    Author: Alistair Wood
    Author URI: http://example.com
    Template: twentyfourteen
    Version: 1.0.0
    License: GNU General Public License v2 or later
    License URI: http://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 7 years, 10 months ago by ali282.
    • This reply was modified 7 years, 10 months ago by ali282.
    • This reply was modified 7 years, 10 months ago by ali282.
    Moderator James Huff

    (@macmanx)

    7 years, 10 months ago

    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.

    Thread Starter ali282

    (@ali282)

    7 years, 10 months ago

    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.

    Thread Starter ali282

    (@ali282)

    7 years, 10 months ago

    So the following does NOT produce the border effect:

    Additional CSS section:-
    (EMPTY)

    Editor section:-
    /*
    Theme Name: Twenty Fourteen Child
    Theme URI: http://example.com/twenty-fifteen-child/
    Description: Twenty Fourteen Child Theme
    Author: Alistair Wood
    Author URI: http://example.com
    Template: twentyfourteen
    Version: 1.0.0
    License: GNU General Public License v2 or later
    License URI: http://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 7 years, 10 months ago by ali282.
    • This reply was modified 7 years, 10 months ago by ali282.
    • This reply was modified 7 years, 10 months ago by ali282.
    Moderator James Huff

    (@macmanx)

    7 years, 10 months ago

    Try:

    .wpcf7
{
background-color: #f7f7f7 !important;
border: 8px solid #299325 !important;
width: 650px !important;
float: center !important;
}
Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘CSS Editor’ is closed to new replies.