CODEWITHSUNDEEP
htmlcss
noe vaz
noe vaz

Reputation: 29

How to always add style in one site

I use a site at work that has unordered list "ul" with a lot of "li" elements without borders, I would like to always highlight the "li" elements to have better readability. What I do at this moment is right click the page and open the inspector and add this line:

<style>li:hover {background-color: #ffff99;}</style>

It works but I'm wonder if I can do a plugin for this or if there is another way to do it automatically (I have already send a request to the developer of the site to request this change but while I wait I would like to know what would be the best approach to automate this task)

The list look like this:

File.txt                                 85215165
File2.txt                                96312121
File3.txt                                41212123
File4.txt                                65623443
File5.txt                                69532055
... and so on

(It's not a continuous string, the file name and the number are elements inside the one "li" element and I'm not able to select them at the same time with the mouse)

And it has no style so it's difficult (at least for me) to see which number in the right match the file name in the left.

Note: The list is generated with a script and when I try to see the code of the page (right click see source code) I don't see it, I just see the script, that's why I do it with the inspector

Upvotes: 0

Views: 29

Answers (2)

BenEleven
BenEleven

Reputation: 57

Paste this in the browser console, slightly faster and easier than editing HTML tags from within the tree in the inspect element tab.

document.head.insertAdjacentHTML("beforeend", `<style>li:hover {background-color: #ffff99;}</style>`)

Upvotes: 1

Boris Yakubchik
Boris Yakubchik

Reputation: 4463

This may solve the issue:

Stylish or Stylebot -- Chrome plugins -- both seem to add your preferred CSS on top of the specific websites you choose.

Upvotes: 2

Related Questions