phu54321
commented
3 years ago Disclaimer: The barCSS option is strictly intended for advanced users, and I won't write a full CSS tutorial for the sake of documentatio. I won't be writing a tutorial of how to make font bigger, how to underline a text or change color, or such a thing. Instead I'll explain how barCSS works. There's a lot of CSS tutorials out there like this one or that one, and you should read them.
Contents of barCSS will be appended to the original stylesheet, so if you set barCSS to following string
{
"barCSS": ".rt-container { color: red !important; }"
}that should make the stylesheet like the following.
.rt-container {
color: #000;
font-family: sans-serif;
font-size: 0.8rem;
height: 1rem;
left: 0;
line-height: 1rem;
position: fixed;
right: 0;
z-index: 100;
/* stylelint-disable-next-line selector-class-pattern */
}
.rt-container { color: red !important; }The bottom line will override the color style of elements with the rt-container class. Things work like that. For other advanced usages you should learn CSS.
stale[bot]
I do not understand how to use the "BarCSS" function. I downloaded the ankiwebinspector like you suggested and I think I found the relevant code to be
.rt-container { color: #000; font-family: sans-serif; font-size: 0.8rem; height: 1rem; left: 0; line-height: 1rem; position: fixed; right: 0; z-index: 100; / stylelint-disable-next-line selector-class-pattern / }
I copy/pasted this into a text editor, but then what do I actually do with the new code? Say I change "sans-serif" to "monospace", what precisely do I do to implement that change? Or am I just completely off?
I apologize if this seems like a dumb question, I haven't the slightest idea how computer code works. 😥 If anyone could just list a quick step-by-step as if written for someone with 0 computer knowledge, I would appreciate it!