Additional CSS on Wordpress Customization

Global

Additional CSS on WordPress Customization

9 months ago

•

< 1 min read

Posted by:

Focus

Subscribe to newsletter

By subscribing you agree to with our Privacy Policy.

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}

Global

2 min read

Disabling the Device’s Default ‘Dark Mode’ in WordPress

If you are trying to convert your WordPress website to APK / AAB, you may need to disable the device’s

Header

< 1 min read

Change Color of Header and Show-Hide Elements On Scroll

Useful for transparent headers. IMPORTANT Under ‘Motion Effect’ settings, below ‘Offset’, you must set the ‘Effects Offset’ into ‘1’ or larger. Otherwise, the CSS won’t

Video

3 min read

YotuWP Plugin: Custom CSS

Go to Dashboard > Appearance > Customize and add this custom CSS. LIGHT MODE CSS DARK MODE CSS

Woocommerce

< 1 min read

Disable Billing Address

Simplify checkout for virtual products or order via WhatsApp. Add this code in function.php. CODE PHP

See How It Works

Create better websites, faster.

Download the Entire Library

Adaptative, neutrally designed components.

Global