Copy to Clipboard

Copy anything to clipboard plugin CSS

by

The “Copy anything to Clipboard” plugin for the WordPress website is amazing. Works flawlessly, but there is an issue. The design of the content box is pretty basic and creates a scrollbar. Which we don’t want. To prevent the scrollbar and make the copy box look good, we have to add some additional CSS.

This article will guide you step by step on how you can add custom CSS to Copy anything to Clipboard and make your copy box look good.

Change the appearance from this

Copy to Clipboard
Copy to Clipboard Before

To this

Copy to Clipboard
Copy to Clipboard After

To change the appearance of the Copy to Clipboard box, Copy the Custom CSS given below and paste it in Additional CSS section of your website.

How to add Custom CSS?

To add custom CSS to your website, follow these steps

  1. Login to your WordPress website.
  2. Open your website page from the WordPress dashboard.
  3. From the Top left corner, Click on Customize button.
  4. In the theme customization section, scroll down until you find the “Additional CSS” option.
  5. Click the “Additional CSS” button and copy your custom CSS.
  6. Then click publish.
/*------- Copy to ClipBoard ------*/
/*------- Custom CSS Start ------*/
.copy-the-code-wrap .copy-the-code-button {
top: 0;
right: 0;
padding: 10px 20px;
color: #fff;
font-family: roboto;
font-size: 13px;
font-weight: 400;
text-transform: uppercase;
background: #193030; /*----Change this code to change color of "Copy" button---*/
}
.copy-the-code-wrap {
box-shadow: 0 1px 6px 0 rgb(28 48 48 / 100%);
}

.copy-the-code-wrap .copy-the-code-target {
color: #193030;
background: transparent;
font-size: 18px;
font-family:poppins;
white-space: pre-wrap;
}

.copy-the-code-wrap .copy-the-code-button:hover {
background: #000;
}
/*----------Copy to ClipBoard--------*/
/*----------Custom CSS End--------*/

Leave a Comment