- This topic has 11 replies, 4 voices, and was last updated 3 years, 1 month ago by Leo.
-
AuthorPosts
-
February 8, 2021 at 5:01 am #1650120Juan
Is there any way to prevent that when adding a custom CSS code through the “customize” section of WordPress, that code does not conflict with the GP code itself?
I have noticed that even adding a specific name to the element I want (example .custom-button { … etc,) there are other elements that even without giving them that ID change in the theme.
Also there are things that don’t change even when I give them a CLASS ID.February 8, 2021 at 6:26 am #1650232DavidStaffCustomer SupportHi there,
if your Custom CSS is using very unique and very specific CSS Classes they will never affect elements that DO NOT have those classes.
Is there a page where i can see the issue ?
February 8, 2021 at 7:38 am #1650498JuanFor example, I insert this and there is no effect
.btn-1 {
–borderWidth: 5;
–boxShadowDepth: 8;
–buttonColor: #f00;
–fontSize: 3;
–horizontalPadding: 16;
–verticalPadding: 8;background: transparent;
border: calc(var(–borderWidth) * 1px) solid var(–buttonColor);
box-shadow: calc(var(–boxShadowDepth) * 1px) calc(var(–boxShadowDepth) * 1px) 0 #888;
color: var(–buttonColor);
cursor: pointer;
font-size: calc(var(–fontSize) * 1rem);
font-weight: bold;
outline: transparent;
padding: calc(var(–verticalPadding) * 1px) calc(var(–horizontalPadding) * 1px);
transition: box-shadow 0.15s ease;
}.btn-1:hover {
box-shadow: calc(var(–boxShadowDepth) / 2 * 1px) calc(var(–boxShadowDepth) / 2 * 1px) 0 #888;
}.btn-1:active {
box-shadow: 0 0 0 #888;
}.btn-1 span {
background: var(–buttonColor);
border: calc(var(–borderWidth) * 1px) solid var(–buttonColor);
bottom: calc(var(–borderWidth) * -1px);
color: var(–bg, #fafafa);
left: calc(var(–borderWidth) * -1px);
padding: calc(var(–verticalPadding) * 1px) calc(var(–horizontalPadding) * 1px);
position: absolute;
right: calc(var(–borderWidth) * -1px);
top: calc(var(–borderWidth) * -1px);
}btn-1 span {
–clip: inset(0 100% 0 0);
-webkit-clip-path: var(–clip);
clip-path: var(–clip);
transition: clip-path 0.25s ease, -webkit-clip-path 0.25s ease;
// …Remaining div styles
}button:hover span {
–clip: inset(0 0 0 0);
}I want to use this code
February 8, 2021 at 7:52 am #1650524DavidStaffCustomer SupportHow are you adding the button ? Can i see it on a page ?
February 9, 2021 at 2:52 am #1651404JuanGreetings David, thank you very much for your reply.
Well, I’ll tell you. I’m going to add some images so you can see a little better what I’m doing.I am using the plugin “Simple CSS” to add the following code:
.button-nice { --clip: inset(0 100% 0 0); --borderWidth: 5; --boxShadowDepth: 8; --buttonColor: #f00; --fontSize: 3; --horizontalPadding: 16; --verticalPadding: 8; background: transparent; border: calc(var(--borderWidth) * 1px) solid var(--buttonColor); box-shadow: calc(var(--boxShadowDepth) * 1px) calc(var(--boxShadowDepth) * 1px) 0 #888; color: var(--buttonColor); cursor: pointer; font-size: calc(var(--fontSize) * 1rem); font-weight: bold; outline: transparent; padding: calc(var(--verticalPadding) * 1px) calc(var(--horizontalPadding) * 1px); position: relative; transition: box-shadow 0.15s ease; } .button-nice:after { content: var(--content); position: absolute; top: calc(var(--borderWidth) * -1px); right: calc(var(--borderWidth) * -1px); bottom: calc(var(--borderWidth) * -1px); left: calc(var(--borderWidth) * -1px); border: calc(var(--borderWidth) * 1px) solid var(--buttonColor); padding: calc(var(--verticalPadding) * 1px) calc(var(--horizontalPadding) * 1px); -webkit-clip-path: var(--clip); clip-path: var(--clip); color: var(--bg, #fafafa); background: var(--buttonColor); transition: -webkit-clip-path 0.25s ease; transition: clip-path 0.25s ease; transition: clip-path 0.25s ease, -webkit-clip-path 0.25s ease; } .button-nice:hover { --clip: inset(0 0 0 0); } .button-nice:hover { box-shadow: calc(var(--boxShadowDepth) / 2 * 1px) calc(var(--boxShadowDepth) / 2 * 1px) 0 #888; } .button-nice:active { box-shadow: 0 0 0 #888; }
Now then. I add a “button block” in the WordPress editor and I give it the ID class “button-nice” but as you see the result (in the image) is not what I want. In this page you can see what I want to achieve.
You won’t be able to see the result on the web because as it looks ugly, I don’t leave it to the public.
February 9, 2021 at 5:22 am #1651552DavidStaffCustomer SupportThe issue you have is the CSS doesn’t match the HTML.
You’re currently using a core Buttons Block – which generates this HTML for example:<div class="wp-block-buttons"> <div class="wp-block-button additional-css-classes-are-here"> <a class="wp-block-button__link" href="url">Button Label</a> </div> </div>
You see the additional CSS class gets added to the
<div>
wrapper and not<a>
where you require it.I would suggest you use the GB Buttons Block instead, when you add an additional CSS class it will be applied to the
<a>
Change the button over. And let me know the specific style you want from the CSS tricks page and ill see what we can do.
February 10, 2021 at 2:42 am #1652772JuanThank you for your help.
The truth is that using the GB button blocks I also don’t get the effect I want with the CSS code I left above.
I also tried to do it through an HTML block, which in theory should be cleaner, and it doesn’t work. Even using the or <button> tags.
The effect I want to implement from the css-tricks website is this one I leave here, the one with a transition to a solid color.You can find the code here
I can’t think of anything else to make the code work.
February 10, 2021 at 6:35 am #1652975DavidStaffCustomer SupportIs it the first example you’re trying to achieve ?
February 10, 2021 at 7:16 am #1653218JuanThe second one that have a transition effect
February 10, 2021 at 5:43 pm #1653760ElvinStaffCustomer SupportHi there,
This is actually quite easy to do with GB buttons.
Try this:
Add
ghost-button
class to your GB button as shown here – https://share.getcloudapp.com/bLugwBkN – you can ignore how I added the CSS on the image as it should work even when added in Appearance > Customize > Additional CSS. In fact, that’s the recommended place to add your CSS. 🙂You then add this CSS:
.ghost-button { --borderWidth: 5; --boxShadowDepth: 8; --buttonColor: #f00; --fontSize: 3; --horizontalPadding: 16; --verticalPadding: 8; background: transparent; border: calc(var(--borderWidth) * 1px) solid var(--buttonColor); box-shadow: calc(var(--boxShadowDepth) * 1px) calc(var(--boxShadowDepth) * 1px) 0 #888; color: var(--buttonColor); cursor: pointer; font-size: calc(var(--fontSize) * 1rem); font-weight: bold; outline: transparent; padding: calc(var(--verticalPadding) * 1px) calc(var(--horizontalPadding) * 1px); transition: box-shadow 0.15s ease; } .ghost-button:hover { box-shadow: calc(var(--boxShadowDepth) / 2 * 1px) calc(var(--boxShadowDepth) / 2 * 1px) 0 #888; } .ghost-button:active { box-shadow: 0 0 0 #888; }
Here’s a demo using GB Blocks: GB Block button demo
February 13, 2021 at 3:33 am #1656704JuanIt works fine but I don’t know how to apply the transition effect.
February 13, 2021 at 7:36 pm #1657416LeoStaffCustomer SupportWhat do you mean? I see
transition: box-shadow 0.15s ease;
included in Elvin’s CSS. -
AuthorPosts
- You must be logged in to reply to this topic.