Custom style button – theme.json

(@hebhansen)

Hey TT4

I am trying to style the global button from my TT4 child theme. Chat GPT propose something along those lines, however it takes no effect:

	"styles": {
		"elements": {
			"button": {
			    "color": "var(--wp--preset--color--draupnir-red)",
                "backgroundColor": "var(--wp--preset--color--base)",
                "border": "none",
                "borderRadius": "16px",
                "padding": "10px 15px",
                "fontSize": "var(--wp--preset--font-size--medium)",
                "cursor": "pointer",
				":active": {
					"boxShadow": [
						{
							"offset": { "x": 1, "y": 1 },
							"blur": "2px",
							"color": "var(--wp--preset--color--draupnir-shadow)",
							"inset": true
						},
						{
							"offset": { "x": -1, "y": -1 },
							"blur": "2px",
							"color": "var(--wp--preset--color--base-2)",
							"inset": true
						}
					]
				},
				":focus": {
					"color": {
						"background": "var(--wp--preset--color--contrast-2)",
						"text": "var(--wp--preset--color--base)"
					},
					"outline": {
						"color": "var(--wp--preset--color--contrast)",
						"offset": "0px"
					},
					"border": {
						"color": "var(--wp--preset--color--contrast-2)"
					}
				},
				":hover": {
					"color": {
						"background": "var(--wp--preset--color--contrast-2)",
						"text": "var(--wp--preset--color--base)"
					},
					"border": {
						"color": "var(--wp--preset--color--contrast-2)"
					},
					"boxShadow": [
						{
							"offset": { "x": -2, "y": -2 },
							"blur": "5px",
							"color": "var(--wp--preset--color--base-2)"
						},
						{
							"offset": { "x": 2, "y": 2 },
							"blur": "5px",
							"color": "var(--wp--preset--color--draupnir-shadow)"
						}
					]
				},
				"spacing": {
					"padding": {
						"bottom": "0.6rem",
						"left": "1rem",
						"right": "1rem",
						"top": "0.6rem"
					}
				},
				"typography": {
					"fontSize": "var(--wp--preset--font-size--small)",
					"fontStyle": "normal",
					"fontWeight": "500"
				}
			}
		},

What did I miss and what is wrong?

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

ali622
(@ali622)

1 year, 7 months ago

Instead of doing this why wouldn’t u use simply “site editor-> styles -> blocks -> buttons” to style it?
(Don’t get me wrong, just asking.)
Thread Starter hebhansen
(@hebhansen)

1 year, 7 months ago
@ali622
- because I run a multisite
- I want all buttons initially to be as I want across all sites, hence, the restyling in child theme, then I can edit individual buttons in settings, where they appear.
- I don’t have the style settings I need to do what I want. Either they are not supported yet by theme.json ver 2/3 or simply not made available in WP / TT4 (box-shadow, text-shadow adding icons and more)
- I want my style to survive the next update of TT4 and not get overwritten
- While I want to inherit everything possible from a new theme, fx TT5, I want my customisation to stay intact after upgrade, hence a child theme
- I have other reasons to go for child theme, such as custom variables. I need those to syle plugin’s css and ensure they update with a new style in TT4 or an upgrade of theme
I can go on, but that should give you an idea. And that makes me comment back: Howcome there is little to no replies for support. And when an answer arrives it’s like “Ask over there” or “Why dont you just style buttons 500 places, that get’s lost at updates or upgrades”. Don’t get me wrong, but this takes soooo loooong time! I urgently need help to overcome these issues ok. I setup a child and that was a very very hard birth. Getting into theme.json is like knowing nothing and starting over….

So MY MISSION IS TO INHERIT ALL I CAN FROM WP THEMES SUCH AS TT4 AND HAVE IT ACCESSIBLE IN MY CHILD THEME. I WILL NOT START OVER EVERYTIME I SWITCH A THEME, SUCH AS STYLES, SETTINGS, CUSTOM PART PATTERNS AND TEMPLATES. I DO NEED MORE STYLLING THAN THEME.JSON VER 3 CURRENTLY OFFERS, SO I STYLE FROM BOTH T.J AND STYLE.CSS

So please, I need help to manage child theme.json thx. I just need progress

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

The topic ‘Custom style button – theme.json’ is closed to new replies.

Tags