how do i overload underline and italic to a highlighting in yellow and red
Hi!
Until newest update, i could successfully overload really useless underline and italic styles to the appropriate highlighting (yellow, red) via Chrome Stylus Plugin:
/* Underline is now a highlightning marker */
.contentUnderline {
text-decoration: inherit;
background-color : #feffc9;
}
/* Italic is now a highlightning marker */
.contentItalic {
font-style: normal;
background-color : #f4e0e5;
}
It was really a killer feature for me, because i could make much more useful things with highlighting, than with italic and underline. But sadly, with a newest update the overloaded things are broken. Please, can anybody help: how i can fix the broken stuff?
-
But how does it work then if one would like to combine “underline“, “bold“ and „italic“?
I‘ve had some definitions for ...
span.contentUnderline
span.contentUnderline.contentBold
span.contentUnderline.contentItalic
span.contentUnderline.contentBold.contentItalic
I‘ve tried ...
.content u
.content u b
. content u i
. content u i b
... but obviously “.content u i“ is over-painting “.content u i b“.
Thanks for any suggestion!
-
That‘s what I‘m having thus far ...
—-
/* UNDERLINE */
.content u
{
text-decoration: none !important;
color: black !important;
background-color: gold !important;
font-family: inherit !important;
font-weight: inherit !important;
font-size: inherit !important;
}
/* UNDERLINE + BOLD */
.content u b
{
font-size: 120%;
line-height: 2.0;
background-color: #0000a4 !important;
padding: 3px 10px 3px 10px;
box-shadow: 3px 3px 3px #B0B0B0;
margin-top: 10px;
margin-bottom: 10px;
color: white !important;
text-decoration: none !important;
}
/* UNDERLINE + BOLD + ITALIC */
.content u i b
{
font-size: 100%;
line-height: 2.0;
background-color: #DC143C !important;
padding: 3px 10px 3px 10px;
box-shadow: 3px 3px 3px #E6E6E6;
margin-top: 10px;
margin-bottom: 10px;
color: white !important;
text-decoration: none !important;
}
/* UNDERLINE + ITALIC */
.content u i
{
font-size: 100%;
line-height: 2.0;
background-color: #FFD700 !important;
padding: 3px 10px 3px 10px;
box-shadow: 3px 3px 3px #E6E6E6;
margin-top: 10px;
margin-bottom: 10px;
color: black !important;
text-decoration: none !important;
}
-
Ah, I found it. We need a browser extension called stylish
-
When they changed these selectors from classes to tags, it made this particular hack more difficult. The problem is the tags are nested, and now styles cascade where before they didn't. So what you can accomplish is really dependent on what properties you are using on what tags. Also order matters, you need to reverse them:
.content b i u
-
I'm using .content u to highlight selected text in yellow and would like to have a similar keyboard shortcut to highlight in, say, red. But I also like to have Ctrl-b and Ctrl-i shortcuts to apply bold and italic text effects so can't use .content i or .content b as in the examples above. I tried using .content r but in Chrome that reloads the tab. I tried .content q because Ctrl-q in Chrome doesn't seem to have any effect, but that doesn't work. Is there a way to do it, please?
Please sign in to leave a comment.
Comments
14 comments