[Support request] Overwrite CSS code

Home Forums Support [Support request] Overwrite CSS code

Home Forums Support Overwrite CSS code

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1650120
    Juan

    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.

    #1650232
    David
    Staff
    Customer Support

    Hi 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 ?

    #1650498
    Juan

    For 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

    Ghost Button

    #1650524
    David
    Staff
    Customer Support

    How are you adding the button ? Can i see it on a page ?

    #1651404
    Juan

    Greetings 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.

    This is my web

    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.

    Result

    Add CSS code

    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.

    #1651552
    David
    Staff
    Customer Support

    The 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.

    #1652772
    Juan

    Thank 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.

    Css-Tricks example

    You can find the code here

    I can’t think of anything else to make the code work.

    #1652975
    David
    Staff
    Customer Support

    Is it the first example you’re trying to achieve ?

    #1653218
    Juan

    The second one that have a transition effect

    #1653760
    Elvin
    Staff
    Customer Support

    Hi 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

    #1656704
    Juan

    It works fine but I don’t know how to apply the transition effect.

    #1657416
    Leo
    Staff
    Customer Support

    What do you mean? I see transition: box-shadow 0.15s ease; included in Elvin’s CSS.

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.