[Solved] Salient Scrollbar

[mintertweed]

Here’s the website in question. I’m currently using the Salient theme from ThemeForest. It has an area for additional CSS in wp-admin that seems to override the theme’s CSS, but there’s one element I have yet to figure out how to change and it’s the physical scrollbar. I was able to change the track of the scrollbar easily enough, but the scrollbar within the track doesn’t seem to be reacting to any CSS I add in wp-admin. Here’s the code for the scrollbar itself:

element.style {
    position: relative;
    top: 0px;
    float: right;
    width: 15px;
    height: 161px;
    background-color: rgb(45, 48, 50);
    border: 0px;
    background-clip: padding-box;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
}

So, I tried targeting it by first using element.style then #ascrail2000 .style and finally #ascrail2000.style (you’ll notice it’s without the space). None of these seem to be doing anything. Any and all help will be greatly appreciated as this is the only feature I want to drastically change within the theme.

Edit #1: And I would like to change the code to:

element.style {
    position: relative;
    top: 0px;
    float: right;
    width: 1em;
    background-color: #FF0066;
    border: 0px;
    background-clip: padding-box;
}

Thank you in advance!

[Kingslayer]

Wondering if it has to do anything with the CSS hierarchy. As the styles here are applied directly in the HTML. So if the styles you add are added in the Style-Sheet the will not override the pre-existing styles. So you either have to delete the style=”” party manually and style it with an external style-sheet or try to be more specific when adressing it. Try using !important just for testing it.

[mintertweed]

I found this tid-bit of code from CSS-Tricks, but it affects all inline styles. Hrm.

Edit: Changed it to:

element.style {
    position: relative;
    top: 0px;
    float: right;
    width: 1em;
    background-color: #FF0066 !important;
    border: 0px;
    background-clip: padding-box;
}

But there’s no change in color.

[basement31]

Doing anything .style is looking for a class called style, what i think you want are these

::-webkit-scrollbar
::-webkit-scrollbar-button 
::-webkit-scrollbar-track 
::-webkit-scrollbar-track-piece 
::-webkit-scrollbar-thumb
 ::-webkit-scrollbar-corner
 ::-webkit-resizer

More info: https://css-tricks.com/custom-scrollbars-in-webkit/

[mintertweed]

I figured it out. The code must target #ascrail2000 div[style] to work. I knew there had to be some way to do it. Thank you to ya’ll and Chris Coyier.

Edit: @basement31, that’s how I would normally target the scrollbar, but this theme is using a different method. The entire theme is supposed to be cross-browser and platform, and not everyone uses a webkit browser.

[jawagar94]

/this is for the scroller/

#ascrail2000 div[style]{
background-color: rgb(136, 168, 115) !important;
}

/this is for the scroller bg/

#ascrail2000{
background-color: white;
}

[Author]

Posts