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?
]]>When looking at the console, I clearly see that this is a CSS style issue but not sure how to fix it:
label-wpform-field-label-inline:before
]]>I prepared a post, and using Classic Editor did my own CSS including the additional fonts that don’t come with WordPress.
It worked until a couple of days ago. I was in the middle of editing a post when my entire site reset back to default fonts, colors, etc.
I noticed that all my downloaded fonts deactivated and some even disappeared (typography). The fonts in my posts are overridden by the default ones (so for example, I want my post to have Times New Roman font, but it reverts back to default Georgia, and so on).
It looks like the whole site bugged out but I don’t see why.
I can’t revert back to what it was before that – I can revert it to the settings right after the bug, but not before.
]]>I use this code to style the form. Only the theme changes, the styles for the form are not applied. Website with woocommerce.
add_filter( 'wc_stripe_upe_params', function ( $stripe_params ) {
/** * Custom shortcode checkout styles -- Use Stripe's Flat Theme */
$stripe_params['appearance'] = (object) [ 'theme' => 'stripe' ];
/** * Custom Block checkout styles -- Use Stripe's Night Theme with custom variables + rules */
$stripe_params['blocksAppearance'] = (object) [
'theme' => 'stripe',
'rules' => (object) [
'.Input' => (object) [
'backgroundColor' => '#212D63',
'border' => '20px solid var(--colorPrimary)',
],
'.Label' => (object) [
'fontSize' => '14px',
]
],
];
return $stripe_params;
} );
]]>This code shouldn’t be present because it generates on every page a <style>, but it doesn’t get closed anywhere.
I did a complete search through your plugin but nowhere is a closing </style> to be found for this opening tag.
I like the plugin, but at this moment everytime I update the plugin, I need to remove the <style> manualy because it breaks the source code.
Can you please remove this line from future releases so we don’t have to change the plugin ourselfs.
I am using TWENTY TWENTY FOUR Block theme.
https://twentig.com/quickstart-guide/
The tw icon shown on your guide doesn’t show on my styles
I found that I can not post image here.
]]>I’m locally developing a simple child theme and I got the very basics setup and working, but when I add style changes to the childs style.css they do not override the parent. Throught the browser inspector I can see that they are there, but the parents css is being prioritized it seems.
Is there a way except adding !important to every single line to have it just use the child css when present?
Thanks in advance!
]]>