Default Scrollbar CSS Style Change Question

Ignition
,
1

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

1 Like
2

Bump. Any devs have ideas or documentation on this?

3

If I had to guess, @cmallonee always seems to know the answers to theming questions

4

*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.

5 Likes
5

Lol

My next guess would be @nader.chinichian, he had been talking about this for ages before the Theming update.

6

Unfortunately, I do this by using 3rd party extension. :pensive: 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.

1 Like
7

Put the following in your own css.

::-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

12 Likes
8

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

9
3 Likes
10

Thanks @jpark

I use your code with width: 5px; and the this result:
image
Do you know why the horizontal scrollbar doesn’t change its width?

11

Set the height property for the horizontal scrollbar https://webkit.org/blog/363/styling-scrollbars/

1 Like
12

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.

2 Likes
13

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

1 Like