# Default Scrollbar CSS Style Change Question **URL:** \ **Category:** Ignition\ **Tags:** ignition80, perspective\ **Created:** [June 19, 2020, 12:22am UTC](https://forum.inductiveautomation.com/t/default-scrollbar-css-style-change-question/35812 "2020-06-19T00:22:26Z")\ **Posts on this page:** 13\ **Page:** 1
**Author:** ![roger\_larson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/roger_larson/32/8574_2.png) [@roger\_larson](https://forum.inductiveautomation.com/u/roger_larson)\ **Post date:** [June 19, 2020, 12:22am UTC](https://forum.inductiveautomation.com/t/default-scrollbar-css-style-change-question/35812/1 "2020-06-19T00:22:26Z")
Hi everyone, Does anyone know how the injectables folder and body\_top.txt are supposed to work in the more recent versions of Ignition Perspective? We are trying to modify the global scrollbar styles in perspective by injecting a scrollbar style into the body top marker. This was possible in earlier versions I believe, but I cannot do this in 8.0.13, probably because of how the style folders and CSS files are structurally different now. Any ideas? Cheers, Roger ---
**Author:** ![roger\_larson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/roger_larson/32/8574_2.png) [@roger\_larson](https://forum.inductiveautomation.com/u/roger_larson)\ **Post date:** [June 25, 2020, 5:12pm UTC](https://forum.inductiveautomation.com/t/default-scrollbar-css-style-change-question/35812/2 "2020-06-25T17:12:07Z")
Bump. Any devs have ideas or documentation on this? ---
**Author:** ![kgamble](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kgamble/32/8019_2.png) [@kgamble](https://forum.inductiveautomation.com/u/kgamble)\ **Post date:** [June 25, 2020, 5:16pm UTC](https://forum.inductiveautomation.com/t/default-scrollbar-css-style-change-question/35812/3 "2020-06-25T17:16:19Z")
If I had to guess, @cmallonee always seems to know the answers to theming questions ---
**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\ **Post date:** [June 25, 2020, 7:06pm UTC](https://forum.inductiveautomation.com/t/default-scrollbar-css-style-change-question/35812/4 "2020-06-25T19:06:47Z")
\*steps back with palms up because he wants no part of this. I’ve not experimented with any sort of styling around the scrollbars - I always leave the browser to do its own thing. ---
**Author:** ![kgamble](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kgamble/32/8019_2.png) [@kgamble](https://forum.inductiveautomation.com/u/kgamble)\ **Post date:** [June 25, 2020, 7:18pm UTC](https://forum.inductiveautomation.com/t/default-scrollbar-css-style-change-question/35812/5 "2020-06-25T19:18:15Z")
Lol My next guess would be @nader.chinichian, he had been talking about this for ages before the Theming update. ---
**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\ **Post date:** [June 25, 2020, 7:31pm UTC](https://forum.inductiveautomation.com/t/default-scrollbar-css-style-change-question/35812/6 "2020-06-25T19:31:29Z")
Unfortunately, I do this by using 3rd party extension. 😔 in phone the scroll bar is narrow and I need change it only in PC browsers. But I believe your problem surely for new theming system. And please if you find the answer post it on forum. ---
**Author:** ![jpark](https://avatars.discourse-cdn.com/v4/letter/j/a88e57/32.png) [@jpark](https://forum.inductiveautomation.com/u/jpark)\ **Post date:** [June 25, 2020, 8:10pm UTC](https://forum.inductiveautomation.com/t/default-scrollbar-css-style-change-question/35812/7 "2020-06-25T20:10:36Z")
Put the following in your own css. ```auto ::-webkit-scrollbar { width: 20px; } /* Track */ ::-webkit-scrollbar-track { box-shadow: inset 0 0 5px grey; border-radius: 10px; } /* Handle */ ::-webkit-scrollbar-thumb { background: red; border-radius: 10px; } /* Handle on hover */ ::-webkit-scrollbar-thumb:hover { background: #b30000; } ``` ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/c/ecd65a61145702d594329b260bbe1f4e2f40c811.png) ---
**Author:** ![roger\_larson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/roger_larson/32/8574_2.png) [@roger\_larson](https://forum.inductiveautomation.com/u/roger_larson)\ **Post date:** [June 25, 2020, 10:54pm UTC](https://forum.inductiveautomation.com/t/default-scrollbar-css-style-change-question/35812/8 "2020-06-25T22:54:21Z")
Hi, We have some CSS like this, but we cannot get it to inject (or we don’t know where the connector is). In what file did you put this CSS in? Was it injected? Putting it in our theme.css file does not seem to apply it (or any sub-css file imported into theme.css). Best, Roger ---
**Author:** ![jpark](https://avatars.discourse-cdn.com/v4/letter/j/a88e57/32.png) [@jpark](https://forum.inductiveautomation.com/u/jpark)\ **Post date:** [June 25, 2020, 11:39pm UTC](https://forum.inductiveautomation.com/t/default-scrollbar-css-style-change-question/35812/9 "2020-06-25T23:39:35Z")
> [@CSS pseudo-elements](http://forum.inductiveautomation.com/t/css-pseudo-elements/34953/4): > > It took me a little bit to figure out but it’s actually pretty simple. I just recently downloaded the 8.0.14 nightly (b2020051802) which has the theme updates so the css file structure is a little different. But same concept applies to earlier versions. Basically I created a new css file, lets call it “MyCSS.css” and placed it in the IA perspective themes folder C:\Program Files\Inductive Automation\Ignition\data\modules\com.inductiveautomation.perspective\themes I put my @keyframes into th… ---
**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\ **Post date:** [June 26, 2020, 6:06am UTC](https://forum.inductiveautomation.com/t/default-scrollbar-css-style-change-question/35812/10 "2020-06-26T06:06:41Z")
Thanks @jpark I use your code with width: 5px; and the this result: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/7/476e394cdeb8b520004984eb1a23b2dbc09b412e.png) Do you know why the horizontal scrollbar doesn’t change its width? ---
**Author:** ![bradley.falzon](https://avatars.discourse-cdn.com/v4/letter/b/e495f1/32.png) [@bradley.falzon](https://forum.inductiveautomation.com/u/bradley.falzon)\ **Post date:** [June 26, 2020, 6:34am UTC](https://forum.inductiveautomation.com/t/default-scrollbar-css-style-change-question/35812/11 "2020-06-26T06:34:42Z")
Set the `height` property for the horizontal scrollbar [https://webkit.org/blog/363/styling-scrollbars/](https://webkit.org/blog/363/styling-scrollbars/) ---
**Author:** ![dkylep](https://avatars.discourse-cdn.com/v4/letter/d/6de8d8/32.png) [@dkylep](https://forum.inductiveautomation.com/u/dkylep)\ **Post date:** [June 26, 2020, 4:12pm UTC](https://forum.inductiveautomation.com/t/default-scrollbar-css-style-change-question/35812/12 "2020-06-26T16:12:27Z")
Just an FYI… CSS changes don’t seem to affect open views within designer. Within designer the view needs to be closed and re-opened. Also, there seems to be some delay on published views. If I make a CSS change and refresh the page the change is not applied if I wait a little bit of time (15-20seconds) and refresh the page the css change is applied. ---
**Author:** ![kgamble](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kgamble/32/8019_2.png) [@kgamble](https://forum.inductiveautomation.com/u/kgamble)\ **Post date:** [June 26, 2020, 6:01pm UTC](https://forum.inductiveautomation.com/t/default-scrollbar-css-style-change-question/35812/13 "2020-06-26T18:01:14Z")
> [@dkylep](#): > > CSS changes don’t seem to affect open views within designer. Within designer the view needs to be closed and re-opened. From my understanding they are aware of that, and working on some changes to allow mild in-designer theme adjustments but it wouldn’t be until 8.1