Is there a way to customise the "Read Now" button
Amazon Stony Dark 1.14.31 (GitHub install)
As per the title, the ability to colour the button of the "Read Now", or the "You own this item" text
Screenshot(s)
Additional information
- Operating System: Windows 10
- Browser + version: Chrome Version 119.0.6045.160
- CSS extension + version: Stylus (beta) 1.5.38
Yes, it probably is possible. But I don't own ebooks on amazon, so I cannot investigate.
You might right-click on the thing you want to change and choose "inspect". Then hover upwards in the HTML tree until you find an element that covers the area you want. Click it. See in the styles part of the inspect window if there is anything with "background". Try to change it so something like red to make sure it is the right selector. Then copy the selector and put it into a new stylus-style.
Thank you, I managed to add the following, but I am not sure how to make the following variable #a-autoid-1-announce so I do not need multiple lines.
It also selects everything that matches, am I able to narrow down onto the text in a userstyle?
I found the selector for the Buy now with 1-Click ® is #a-autoid-8 > span > input
Any help would be appreciated
#a-autoid-1-announce,
#a-autoid-2-announce,
#a-autoid-3-announce,
#a-autoid-4-announce,
#a-autoid-5-announce,
#a-autoid-6-announce,
#a-autoid-7-announce,
#a-autoid-8-announce,
#a-autoid-9-announce,
#a-autoid-10-announce
{
Background: green !important
}
It doesn't hurt to have those 10 lines performance-wise.
CSS doesn't have place holders, so a thing you could do is to target the beginning of that ID selector:
[id*="a-autoid-"]
{background: green !important}
That might be too broad, so better stick to the explicit 10 lines. The more specific, the better.
It also selects everything that matches
That's how it should work :-)
Be aware that the font color and the background color might be defined in different selectors (on a higher or lower level of nesting). A fast dirty fix is to target the whole button for the background and then just target everything below that for the font color:
[id*="a-autoid-"]
{background: green !important}
[id*="a-autoid-"] *
{color: blue !important}