Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Google Chrome customise CSS

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #164419
    Aimless
    Participant

    Hello I’m on the wrong side of 60 years and I’ve never learned web programming (the macho subject was woodwork in my day, all those decades ago). I’m hoping some kind and patient person can help me change Chrome’s default CSS. Reason: My eyesight is not so good now and the Chrome side scrollbar is so thin and colorless I can never find it. I’m told creating a user CSS with user-defined pixel widths and colors can easily fix that problem. Alternatives are to install some themes but I just want that 1 change. Add-ons are a possibility but I’ve read some bad-news stories about malware. So, making my own CSS is preferred. So far, I: – know the folder/path where the new CSS must be stored (I use Win-7 64-bit) – I got a sample CSS from some blog site but it doesn’t seem to work; I might just be doing something wrong – As I understand it, as long as I create a CSS for that folder (and it’s corrent), Chrome will use it automatically without my needing to enable some setting.

    So, it looks like it’s a problem in the CSS “code”.

    This is what I found (on gtricks.com):
    ::-webkit-scrollbar-track-piece{
    background-color:#fff;
    -webkit-border-radius:0;
    }
    ::-webkit-scrollbar{
    width:8px;
    height:8px;
    }
    ::-webkit-scrollbar-thumb{
    height:50px;
    background-color:#999;
    -webkit-border-radius:4px;
    outline:2px solid #fff;
    outline-offset:-2px;
    border: 2px solid #fff;
    }
    ::-webkit-scrollbar-thumb:hover{
    height:50px;
    background-color:#9f9f9f;
    -webkit-border-radius:4px;
    }

    I created that in the file: C:\users\jeff\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets\Custom.css I restarted Google Chrome.

    That didn’t seem to make any difference so I assume that css code didn’t get run.

    I made some changes to it:

    ::-webkit-scrollbar{
    width:30px;
    height:12px;
    .
    .
    .
    outline:2px solid ##FF0000;
    outline-offset:-2px;
    border: 2px solid ##FF0000;

    and that didn’t make a difference either. (I got the web color code from another site)

    Can someone please help me using normal English? Sorry, I don’t know tech words.

    Thank you

    :)

    #164427
    Senff
    Participant

    I tried putting some custom CSS in that CUSTOM.CSS file and indeed, it didn’t seem to make any difference. Turns out this file doesn’t have any impact anymore since version 32.

    It IS possible to change the scrollbar for Chrome with custom CSS though, see http://codepen.io/senff/pen/BlrKe

    I think the scrollbar is ridiculously small as well and I can’t blame you for wanting to change it. Have you tried other browsers? IE and Firefox probably have a scrollbar that’s not styled like the one in Chrome.

    #164432
    Aimless
    Participant

    Hi, shaneisme

    Thank you for your reply.
    I just want the scroll bar larger, not the rest of the page.
    Thanks
    :)

    #164434
    Aimless
    Participant

    Thanks for your post, Senff
    (sorry for dragging you away from the party, haha)
    :)

    I’m confused by your post.
    Sorry.
    I am using a version later than v32 (ie. 33.0.1750.117 m).
    But if the file has no effect anymore:
    1. what is the purpose of the code in the link you gave me?
    2. what is the difference between that and the code I put in my first post?
    3. if that’s usable, where do I enter it, to get it working in Chrome v33?

    Also, FireFox (always updated to latest version) has been my main browser for years.
    But one regular site has just introduced wall-to-wall & floor-to-ceiling ads and plugins to stop them won’t work (it detects the blockers and won’t continue unless they are turned off). And FF seems to slow down my browsing generally now (and even my PC when I’m not browsing but it’s open).
    I tried Chrome and it browses that site without showing any ads at all. It’s fast and a beautiful browsing experience.
    It’s hassle-free (for me).
    Like a dream.
    And my PC seems to perform better too. Doesn’t get choked.

    I want to start using Chrome… but I need it to be functional and it isn’t that now, with the anorexic scroll bar. That is my ONLY problem. I need ONLY that fix.

    Thank you again
    :)

    #164435
    Aimless
    Participant

    Ok, following from Senff’s post, I checked out “Webkit”.

    Wikipedia tells me that:
    – “WebKit … was previously used in Google’s Chrome web browser.”
    &
    – “On April 3, 2013 Google announced that it had forked WebCore, a component of WebKit to be used in future versions of Google Chrome and Opera under the name Blink.”
    http://en.wikipedia.org/wiki/WebKit

    Then, checking out “fork”, apparently this means that Google and Webkit are going their separate and sort of parallel ways.
    http://en.wikipedia.org/wiki/Fork_(software_development)

    So, the “Webkit” at the top of the code we’ve given here must mean that the code won’t work (a guess).

    I still need some kind of solution.
    It must be found in “Blink”.
    :(

    #164441
    Aimless
    Participant

    Ok, thanks guys. I’ve decided to install the Rescroller extension. It does what I need, despite some fears about its spyware capacities. Perhaps later on, when Google’s new system has settled down, we will be able to do the scrollbar customisation again.

    This is what Rescroller gives me now: http://img.acianetmedia.com/i/zoYIJ.png

    #237779
    micjamking
    Participant

    As noted in this stack-overflow answer: http://stackoverflow.com/a/21210882/933951, the official recommended method of skinning the Google Chrome Developer tools (as of Chrome v33) is by creating an extension to override the default styles which are applied, using the chrome.devtools.panels.applyStyleSheet.

    The process of creating a Chrome extension for this purpose can be a bit tedious to skin each component by hand from scratch, so I’ve created a small plugin which provides a collection of built-in themes and additional editor settings for Chrome Developer Tools. The extensions also provides developers the ability to create additional custom themes using a simple Sass templating system without writing your own extension.

    1. Install DevTools Author Chrome extension from Chrome Web Store
    2. Enable Developer Tools experiments in chrome://flags/#enable-devtools-experiments. Restart Chrome for
      flags to take effect.
    3. Open DevTools (cmd + opt + I); Settings > Experiments > check Allow custom UI themes.

    This will provide, out of the box the following features:

    • The ability to choose from +25 custom editor themes
    • Custom font support via enabled system fonts
    • Incremental control of font size, from 10px – 22px

    If you would like to contribute additional themes, you can follow the below steps:

    Fork the GitHub repository and then follow the steps below. The Devtools Author Chrome extension is built using NodeJS and GruntJS.

    Installation:

    $ git clone [email protected]:<username>/devtools-author.git
    $ cd devtools-author
    $ npm install
    

    Development:

    $ grunt serve
    
    1. Once grunt is running, to install development extension in Chrome, open Settings > More Tools > Extensions and click on the Load unpacked extension… button. (also enable Allow incognito below if you wish).
      • (Disable DevTools Author if you have the extension installed from the Chrome Web Store.)
      • Make sure Developer Tools experiments are enabled and custom UI themes are allowed.
    2. Restart DevTools. I find the fastest way to see changes take affect is to undock DevTools in a separate window and then open a subsequent DevTools window (cmd + opt + I while the current DevTools window is focused) after changes have been saved and grunt reloads the assets. You’ll then need to reload (close and reopen) the subsequent DevTools window after you make changes.

    Creating additional themes

    1. Make a copy of one of the templates from app/styles/themes/templates/ and rename the file to your theme name without the underscore, ie. if your theme is called aloha, inside of app/styles/themes/, copy templates/_theme-template.scss and rename it to aloha.scss
    2. Add color values for the palette based on the code syntax highlighter variables in your scss file.
      • If you desire more specific targeting for your theme than what is being supported out of the box, you can add those styles to the end of your theme file, after the @include styles().
    3. Add your color palette object (name and colors array) to the themes.json in app/scripts/
    4. In DevTools, select your theme palette in the Author Settings panel.
    5. Preview and adjust your colors as needed. See Development – Step 2.
    6. Commit and push your changes to your repo, then create a pull request for your new theme once it is ready!
Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘CSS’ is closed to new topics and replies.