-
I am having a challenging time with this. Is there something about global settings that prevent any local overrides from working at all?
There is this page where the global setting is set to allow for slightly rounded buttons. When we set ‘global setting’ that is called .button in global styles, it auto adds .block. This then fails to show the rounded edges, unless we disable block.
Then, if we add the local style, say, white color to just this button’s background, it looks correct. Even if .block reappears, we still have our rounded button and the color on the visual editor is correct. But the in previewing the page, the button is still not showing that one single change we made. It sticks entirely to the global and won’t let us override just the color.
Here is a brief video of what we are doing.
What are we doing wrong, or missing?
-
Hi there,
When we set ‘global setting’ that is called .button in global styles, it auto adds .block.
The red block you see is the local style of the block. If you remove it, then there’s no local style, only global style.
Can I see the issue on the page?
-
But the global style didn’t show at all with the block in place. Does this mean you can’t use any local styles with the global style? I noticed when we added a local style back the .block was readded and seem to be styling normal in the back end.
That is why I provided a video link: So you could see what we were doing.
This is my test page.
-
1. you have this CSS which overrides both the global style and local style:
button, html input[type="button"], input[type="reset"], input[type="submit"], a.button, a.wp-block-button__link:not(.has-background) { color: var(--contrast); background-color: var(--global-color-10); }2. you also have this CSS which has been overrideen by the #1 CSS, but if you remove #1, this might kick in and override the global style and local style:
.button, .wp-block-button__link, .tribe-common-c-btn, .tribe-events-c-search__button, button, input[type="button"], input[type="reset"], input[type="submit"] { background-color: rgb(255 255 255 / 0%); color: var(--base-3); padding: 10px 25px; border: 1px solid #fff; border-radius: 8px; font-weight: bold; transition: all 0.3s ease; }3. I only see background color being set to white for the button at the block level. There is no other local style for it.
Let me know if I miss anything!
I would recommend using another name for the global style.
-
Yes. Thank you! A new name helps. But I tested by making and cloning a new one. Is there a way to edit.button to have a different name? Or do I need to manually change all the button blocks manually to a newly created global style?
-
Is there a way to edit.button to have a different name?
You can change the global style name, however, it will only change the class name itself and will NOT update places the class name is used.
Elements and blocks using this class name will lose visual styles after that.
So it’s the same as creating a new global style and re-assigning it to blocks.
-
Ok, I am noticing something odd. The new global style was cloned from .button. But when I add the new style (.button-primary) to the button, then delete the old .button, it removes the style on the main pages. It worked fine on the test page. But our already styled complete pages that just need the button update, it isn’t working.
It looks like cloning the style isn’t working quite right.
-
ut our already styled complete pages that just need the button update, it isn’t working.
Have you assigned the new button-primary global style to the buttons?
Can I see the button on the page in question?
-
On this page there were 2 buttons, Volunteer, and event calendar button. Top is .button global style on the volunteer. On the events, we changed the style to clone of .button (.button-primary). The color and size changed even though its a clone. As a test we put in a brand new button block and assigned the same .button-primary global style, which again is a clone of .button – the top button, (volunteer button). So what we are trying to show you is that we have 3 separate buttons, that have essentially been assigned the same styles, and they do not look alike.
-
This is the CSS for the button-primary:
.button-primary { background-color: #7fe7e4; color: var(--contrast); display: block; font-size: 16px; font-weight: normal; line-height: 1.1; padding-bottom: 10px; padding-top: 10px; text-align: center; text-decoration: none; text-transform: uppercase; border: 1px solid var(--contrast); border-radius: 12px; margin: 6px 4px; }And this is the CSS for button:
.button { background-color: #7fe7e4; color: var(--contrast); display: block; font-size: 16px; font-weight: normal; line-height: 1.1; padding-bottom: 10px; padding-top: 10px; text-align: center; text-decoration: none; text-transform: uppercase; border: 1px solid var(--contrast); border-radius: 12px; margin: 6px 4px; }As you can see, they are identical.
The difference is from your CSS that targeting the button class, it overrides some of its style. So you thought the Volunteer Sign up button is the correct style that comes from the button global style, but it’s not.
The event button is the correct one based on the style you set for the global style.
- You must be logged in to reply to this topic.