Additional CSS on WordPress Customization

10 months ago

< 1 min read

Posted by:

Focus

Subscribe to newsletter

By subscribing you agree to with our Privacy Policy.

Share

To improve your site a bit, add this basic CSS to each one you create. Customizing the scroll bar, the default button style for WordPress, and the elipsis on the Elementor excerpt are all included.


@media only screen
and (min-device-width: 767px)
{
/* width */
::-webkit-scrollbar {
  width: 18px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #F0F0F0;

}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #ffffff;
	border-radius: 9px;
box-shadow: inset 0 0 10px 10px #C1C1C1;
    border: solid 4px #F0F0F0;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #e5e5e5;
	box-shadow: inset 0 0 10px 10px #B1B1B1;
    border: solid 4px #F0F0F0;
}
}


/* Elementor Posts: Add Ellipsis on Excerpts */

.elementor-post__excerpt p:after{
content: "...";
}

/* WordPress Default Button Styling */

.wp-block-button {padding-bottom: 25px; padding-top: 10px;}

a.wp-block-button__link.wp-element-button {background-color: #63B367; color: #fff;  font-size: 16px; font-weight: 500; box-shadow: 0px 3px 5px #d3d3d3; border-radius: 5px}

Read more

See How It Works

Create better websites, faster.

Download the Entire Library

Adaptative, neutrally designed components.

Customer Service

Focus Website

Today, September 8

Hi, there 👋

How can I help you?

Start Chat with:

We use cookie to improve your experience on our site. By using our site you consent cookies.