Different Global color styles for different templates?

  • madfcat

    (@madfcat)


    1 year, 4 months ago


    I know that it is possible to create different styles for the whole theme and switch between them.
    Is it possible to create different colour styles for different templates?

Viewing 4 replies - 1 through 4 (of 4 total)
  • Moderator t-p

    (@t-p)

    1 year, 4 months ago

    It sounds like you want create templates with different styles .

    If So, try reviewing this thread and see if it points in the right direction: https://wordpress.org/support/topic/different-styles-for-different-templates/?view=all

    Thread Starter madfcat

    (@madfcat)

    1 year, 4 months ago

    Yes, the subject is applicable. The articles mentioned there were not helpful. Or I just could not find the answer easily.

    My approach: I tried to do it with css, as having a custom template we also have a class added to body tag.

    For example, I have a custom template named index-dark.html and .page-template-index-dark is added to the body tag.

    I tried to style it. And the changes don’t show on the editor. It would be so good to have this class in the editor as well.

    I tried to wrap my template in the group and assign a custom class to it. Then I styled it in style.css and I could achieve what I wanted even though it was not perfect. So what is the purpose of the .page-template-index-dark if it is not in the editor 🤦‍♀️

    Any other suggestions how I can do it?

    EDIT:
    I have added this class .page-template-index-dark to every template part in the template and it became a bit better. But I still don’t understand why we don’t have this classes by default when we switch the template.

    • This reply was modified 1 year, 4 months ago by madfcat.
    Moderator bcworkz

    (@bcworkz)

    1 year, 4 months ago

    Did you include
    add_theme_support( 'dark-editor-style' );
    in your theme’s functions?

    I think you need to add any desired editor body classes you want yourself through the “admin_body_class” filter. CSS selectors in the editor will differ from front end selectors. You essentially need a fully separate set of styles for editor styles.

    I suggest for further guidance you refer to how dark mode is implemented in one of the default Twenty* themes that supports dark mode, such as Twenty Twenty-one. In particular its Twenty_Twenty_One_Dark_Mode class.

    Thread Starter madfcat

    (@madfcat)

    1 year, 4 months ago

    Thank you for the answer. I think what you refer is not exactly what I need.

    The add_theme_support('dark-editor-style') function call in WordPress is used to enable support for a dark editor style in the WordPress admin (editor) interface. When this theme support is added, it provides a darker color scheme for the editor, making it more suitable for users who prefer a dark background while working on content.

    I am trying to figure out a way to have a template styling consitent between the frontend and the block editor.
    I can wrap my template parts into some group (div) and add a Additional CSS Class from advanced tab or to the comment and html markup from the template part.
    I think I will just go this way.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Different Global color styles for different templates?’ is closed to new replies.