Settings — Custom Scrollbar for WordPress

By default, the plugin will apply custom scrollbars to your entire website, seamlessly replacing the native scrollbars. However, you can also choose to apply custom scrollbars to specific elements on your site, such as textarea elements. You can also define specific elements to skip the customization process, giving you ultimate control over scrollbars.

The following is a screenshots of plugin settings and explaining each option.

Choose for which elements to apply scrollbars

Window Scrollbars: Enable awesome scrollbars for whole page.

Textarea Scrollbars: Enable awesome scrollbars for textarea elements.

Excluded Textarea: Textarea elements by selector will be skipped. You can specify multiple selectors separated by commas.

Custom Elements: Enable awesome scrollbars for custom elements.

Elements Selector: To elements by selector will be added awesome scrollbars. You can specify multiple selectors separated by commas.

Customizable Style, Colors & Gradients, Position and more

Preview: Change settings to see how the scrollbar will look.

Style: Select one of built-in style. You can customize it below.

Handle Color: Select color or gradient for scrollbar handle.

Track Color: Select color or gradient for scrollbar track.

Resize: The resize behavior of the host element.

Absolute Padding: Absolute padding means that the content will always have the defined spacing to the edge, regardless of the scroll-offset.

Visibility: The basic visibility of the scrollbars.

Auto Hide: The possibility to hide visible scrollbars automatically after a certain action.

Auto Hide Delay: The delay in milliseconds before the scrollbars get hidden automatically.

Drag Scrolling: Defines whether the scrollbar-handle supports drag scrolling.

Click Scrolling: Defines whether the scrollbar-track supports click scrolling.

Pull to Refresh Settings

The plugin improves your site’s scrollbar but alters the native “Pull to Refresh” on mobile. To address this, we’ve added a feature to detect user actions and reload the page accordingly. Please be aware that this might result in a subtle visual difference. Adjust the appearance using the settings below for a personalized experience.

Enable Pull to Refresh: Enable or disable Pull-to-Refresh functionality.

Icon: Set the icon for the Pull-to-Refresh bar.

Refreshing Icon: Set the icon for the refreshing state.

Pull down message: Customize the message displayed when the user pulls down the page. (Default: Pull down to refresh)

Release to refresh message: Customize the message displayed when the user pulls down the page. (Default: Release to refresh)

Refreshing message: Customize the message displayed when the user pulls down the page. (Default: Refreshing)

Text Color: Set the color of the text.

Background Color: Set the background color of the refresh bar.

To achieve more precise customizations, you can use the following CSS classes in your stylesheet:

<div class="t42-ptr-box">
    <div class="t42-ptr-content">
        <div class="t42-ptr-icon"></div>
        <div class="t42-ptr-text"></div>
    </div>
</div>

Simply apply your custom styles to the respective classes (t42-ptr-box, t42-ptr-content, t42-ptr-icon, t42-ptr-text) to achieve the desired look and feel.