Additional css and style.css – not loading in editor

  • edtwodth

    (@edtwodth)


    1 year, 3 months ago

    Hi,

    when i put css ind the additional css field in the theme editor the styling shows ind the post editor and in the front end.

    But when i put it in the style.css in the child theme folder, the styling only shows in the frontend, not in the post editor?

    I’m trying to get the different font-sizes to look like my headings, and I can’t put this in the theme.json file?

    .has-xxxxx-large-font-size {
  line-height: 1.15;
  font-family: "Roboto Slab";
  font-weight: 500;
}

.has-xxxx-large-font-size,
.has-xxx-large-font-size,
.has-xx-large-font-size,
.has-x-large-font-size,
.has-large-font-size {
  line-height: 1.2;
  font-family: "Roboto Slab";
  font-weight: 500;
}

    As you can see in the images, all looks find in the frontend, but not in the editor in the backend

    • This topic was modified 1 year, 3 months ago by edtwodth.
    • This topic was modified 1 year, 3 months ago by edtwodth.
    • This topic was modified 1 year, 3 months ago by edtwodth.
Viewing 3 replies - 1 through 3 (of 3 total)
  • Faisal Ahammad

    (@faisalahammad)

    1 year, 3 months ago

    In technical terms, the “wp_enqueue_scripts” hook is used to load the style.css file of the parent/child theme for the frontend of the website. On the other hand, the “admin_enqueue_scripts” hook is used to load CSS/JS files in the admin dashboard.

    Therefore, if you add any CSS code to the child theme’s style.css file, it will not be loaded on the edit post page, which means you won’t see the visual output of your style. I hope that makes sense. Thank you.

    https://developer.wordpress.org/reference/functions/wp_enqueue_script/
    https://developer.wordpress.org/reference/hooks/admin_enqueue_scripts/
    Niko

    (@nheeko)

    1 year, 3 months ago

    Hi @edtwodth,

    The styles you’re adding to the child theme’s style.css may not be specific enough to override the default styles applied by the editor.

    In the WordPress editor, there may be more specific styles applied to the elements, and if your styles are not specific enough, they might not take precedence.

    Here are a few things you can try:

    1.Add more specificity to your CSS rules. For example, you can prefix your selectors with a more specific class or ID that is unique to the editor. This can help ensure that your styles are applied in the editor.

    .editor-styles-wrapper .has-xxxxx-large-font-size {
    line-height: 1.15;
    font-family: "Roboto Slab";
    font-weight: 500;
}

.editor-styles-wrapper .has-xxxx-large-font-size,
.editor-styles-wrapper .has-xxx-large-font-size,
.editor-styles-wrapper .has-xx-large-font-size,
.editor-styles-wrapper .has-x-large-font-size,
.editor-styles-wrapper .has-large-font-size {
    line-height: 1.2;
    font-family: "Roboto Slab";
    font-weight: 500;
}

    2. Although not recommended to use !important as a solution, you can try using it to force your styles to override existing ones. However, use it with caution, as it can make your styles harder to maintain.

    .has-xxxxx-large-font-size {
    line-height: 1.15 !important;
    font-family: "Roboto Slab" !important;
    font-weight: 500 !important;
}

.has-xxxx-large-font-size,
.has-xxx-large-font-size,
.has-xx-large-font-size,
.has-x-large-font-size,
.has-large-font-size {
    line-height: 1.2 !important;
    font-family: "Roboto Slab" !important;
    font-weight: 500 !important;
}

    Make sure to clear your browser cache after making these changes to see the updated styles in the WordPress editor.

    Have a great day!

    maryloara

    (@maryloara)

    11 months, 1 week ago

    Hi @edtwodth , I am also having the same issue. Did you manage to fix that issue?

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Additional css and style.css – not loading in editor’ is closed to new replies.