Forums

[resolved] Scrollbar color css (6 posts)

  1. Anonymous
    Unregistered
    Posted 3 years ago #

    Hi,
    I'm trying to alter the colour of the scrollbars in wordpress to match the rest of my site. My site uses the following css:

    Body {
    scrollbar-face-color:#FFFFFF;
    scrollbar-arrow-color:#000000;
    scrollbar-track-color:#FFFFFF;
    scrollbar-shadow-color:#FFFFFF;
    scrollbar-highlight-color:#000000;
    scrollbar-3dlight-color:#FFFFFF;
    scrollbar-darkshadow-Color:#000000;
    }

    The problem is I can't figure out where abouts in style.css I have to put it. Can anyone advise me where to place this code?

    Thanks

  2. chaoskaizer
    Member
    Posted 3 years ago #

    Because your code is a non-standard CSS (Browser Vendor Proprietary language), It a best practice to separated it to a different files.

    follow this few step:

    1. save all your scrollbar code inside scrollbar.css and upload it to your theme directory (e.g., /themes/default/scrollbar.css)

    2. add the below code inside functions.php (admin > design > theme editor > functions.php ).

    function maybe_append_scrollbar_styles()
    {
    
        $ua_has_support = ( ( strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE') !== false )
    	|| ( strpos($_SERVER['HTTP_USER_AGENT'], 'Opera') !== false) ) ;
    
        $uri = get_stylesheet_directory_uri() . '/scrollbar.css';
    
        if ( version_compare($GLOBALS['wp_version'], '2.6', '>=') ) {
    
            wp_register_style( 'scrollbar', $uri, array(), '0.1', 'screen');
    
            if ( $ua_has_support ) {
                wp_enqueue_style( 'scrollbar' );
            }
    
            wp_print_styles();
    
        } else {
            if ( $ua_has_support ) {
                echo '<link rel="stylesheet" href="' . $uri .
                    '" type="text/css" media="screen" />';
            }
        }
    
    }
    
    add_action( 'wp_head', 'maybe_append_scrollbar_styles' );
  3. Anonymous
    Unregistered
    Posted 3 years ago #

    Thanks for the reply. I think I must be doing something wrong cos it's not working. I saved my scrollbar style as scrollbar.css and placed it in my default folder like you said, I then added the code you provided exactly as it is at the top of the functions.php file (right under the first php tag). Can you suggest anything that I may have done wrong?

    Thanks

  4. chaoskaizer
    Member
    Posted 3 years ago #

    check your header.php for below code if there is none, add it.

    <?php wp_head(); ?>
  5. Anonymous
    Unregistered
    Posted 3 years ago #

    I have that line in the header.php file right before the end of the head section

  6. Anonymous
    Unregistered
    Posted 3 years ago #

    I sorted it out. I was looking at another post on here and found a solution I added the following to the style.css file

    body, html {
    scrollbar-face-color:#FFFFFF;
    scrollbar-arrow-color:#000000;
    scrollbar-track-color:#FFFFFF;
    scrollbar-shadow-color:#FFFFFF;
    scrollbar-highlight-color:#000000;
    scrollbar-3dlight-color:#FFFFFF;
    scrollbar-darkshadow-Color:#000000;
    }

    Thanks for the help

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags