Add color reference to css that alters with a new theme….

  • Hey

    I am trying to create color references in my code snippets. Something like:

    $color-base: #f9f9f9; /* TT4 - Cream */
    $color-base-2: #ffffff; /* TT4 - White */
    $color-contrast: #111111; /* TT4 - Almost Black */
    $color-contrast-2: #636363; /* TT4 - Dark Grey */
    $color-contrast-3: #A4A4A4; /* TT4 - Light Grey */
    $color-accent: #EBECF0; /* TT4 - Light Sand */
    $color-accent-2: #c2a990; /* TT4 - Sand */
    $color-info: #b1c5a4; /* TT4 - Green */
    $color-note: #d8613c; /* TT4 - Orange */
    $color-black: #000000;
    $color-white: #ffffff;

    Here I have map’ed them to match TT4 default style colors. The idea is that plugin corrections of color in custom css could reference to a single code line, hence, a later change of theme, could easily adopt the new colors this way.

    I just realised it is scss code so it will not work in my css…. correct?

    • So how can I create an SCSS snippet within a CSS file and reference the above anchors within CSS code?
    • Or how can a I create such a reference in CSS to be used in CSS.
    • Or how can I create an SCSS file and then reference to that from a CSS code

    Something like this is the plan:

    body {
        background:$color-info;
    }

    But not working css

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

  • Hi Hebhansen,

    You can use CSS variables. Does this meet your needs?

    Best regards

    Thread Starter hebhansen

    (@hebhansen)

    this is gold thx @nlangle .

    Does a variable doc exist for WP, so that I can reference those directly?

    also does one exist for WP default themes such as TT4 and later TT5?

    Yes, they exist in default themes. It’s a behavior of the new FSE system via a theme.json file or/and styles variations. You can take a look at the documentation here.

    And more precisely by this part which explains how to configure colors.

    Then you will be able to use or override the WordPress css variables :
    --wp--preser--color--<your color name>

    Thread Starter hebhansen

    (@hebhansen)

    I started reading the doc and this is just more gold. F?rkin’ awesome … excuse my lang. I will keep my troubles in this one thread as they are intertwined.

    Child theme.json

    Is there a way to create a child theme.json? I assume this will overwrite at WP or theme updates…. More specifically can I create a json file in fx Code Snippets Plugin and make it a child or extension? If so what are the opening and closing tags.

    Adopt SCSS for WP

    This issue originated as I want to use this scss for my form design where the designer use variables. So how kan I get scss to work in WP? Convert to CSS – how?, use SCSS – how? So for global button, I wish to adopt this style. I guess I will need to crack one thing at a time.

    Replace TinyMCE with Gutenberg Editor

    I am not building a new theme. I am just trying to theme plugins that convinced themselves they are themes, such as WP Forms, WCFM etc. Speaking of (As mentioned I am not all the way through docs, since I am physically moving these days, so excuse me if this answered in there) WCFM use TinyMCE extensively and push for Elementor integration to change the antique look and feel. I do not want Elementor in my ecosystem. I go with FSE period! So can I enforce Gutenberg editor wherever TinyMCE appears? I am fine doing stuff in Tiny, but users get access to the editor. And it’s just embarassingly 90ies to work in. Any advice on this is highly appreciated also.

    Thx

    • This reply was modified 2 weeks, 1 day ago by hebhansen.

    Hebhansen,

    1 – You can create a child theme with a theme.json file in it. Both files will be merged. Or you can create a style variation by creating a styles folder at the root of your theme. It depends of your needs.

    2 – SCSS has been created to give extra fonctionnalites to developers such as mixins, variables, functions… Browsers can’t interpretate it. You need what we call a transpiler. A transpiler convert a language to an other, it’s a development tool, it is not used in production. In our case you need a transpiler which convert SCSS to CSS.

    3 – As I understand your demand, you want to easily override colors of plugins you often use ? But you can’t do that with SCSS. You can override CSS variables if your plugins use somes. As I see it, the more easy way to do what you want it to recreate a css file and override rules

    my-file.css

    :root {
        --my-color: #000;
    }

    .wp-forms-form .wpforms-field-label {
        color: var(--my-color);
    }

    #tinymce {
        color: var(--my-color);
    }

    ...

    Best regards.

    Thread Starter hebhansen

    (@hebhansen)

    @nlangle sorry for late reply. This is very important to me, I am simply in the process of moving….

    1) I will look into this asap

    2) Ok I get it. I guess I can translate the code I linked to to css myself. I will give it a go….

    3) This is not about CSS/SCSS. My site is multivendor. Vendors have this interface when adding a product. I want them to work in Gutenberg and not in TinyMCE. How can I accomplish this? Plugin is 3rd party. What I do, i need outside the plugin to not loose my customisation into block editor. I got the understanding above that some of the docs may make this change possible.

    Thread Starter hebhansen

    (@hebhansen)

    @nlangle

    1. Reading here I can create a child theme. That’s not really what I want. I just want to add custom theme.json stuff (a child not overwritten at update). Preferably outside file manager and keep things within code snippets. Is that possible and how? It’s important it needs no intervention when I switch theme.
    • This reply was modified 1 week, 3 days ago by hebhansen.
    Thread Starter hebhansen

    (@hebhansen)

    1. I am stuck!

    I have added:

    themes > tt4 > styles > sections > section-1.json

    Inside I added:

    {
    	"$schema": "https://schemas.wp.org/trunk/theme.json",
    	"version": 3,
    	"title": "Forms & Buttons",
    	"description: "Custom Forms & Buttons",
    	"slug": "sections/section-1",
    	"blockTypes": [ "core/post-author-name", "core/post-date", "core/post-categories", "core/post-tags" ],
    	"styles": {
    		"color": {
    			"text": "red"
    		},
    		"elements": {
    			"link": {
    				"color": {
    					"text": "red"
    				}
    			}
    		},
    		"typography": {
    			"fontSize": "var(--wp--preset--font-size--small)"
    		}
    	}
    }

    Here I am using V3 where TT4 is V2. Is that a problem?

    I see no effect to the above why? How do I define the global variations in post #1

    Thread Starter hebhansen

    (@hebhansen)

    This variable is not working in css. Why?

    background: var(–wp–preser–color–accent);

    And where can I look up the variables in TT4 / WP?

    • This reply was modified 1 week, 2 days ago by hebhansen.
Viewing 9 replies - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.

Tags