WordPress.org

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.