how do i overload underline and italic to a highlighting in yellow and red

Follow

Arthur

• December 12, 2018 20:27

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?

1

• 

  rawbytz

  • December 13, 2018 00:21

  Change:  .contentUnderline
  To:  .content u 
  
  Change: .contentItalic
  To:  .content i 
  
  

  0

  Permalink
• 

  Arthur

  • December 13, 2018 06:09

  rawbytz, thanks a lot!!! it works!!!

  :)

  0

  Permalink
• 

  Eberhard

  • January 05, 2019 17:16

  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!

  0

  Permalink
• 

  Eberhard

  • January 05, 2019 17:33

  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;

    }   

  1

  Permalink
• 

  Tobias

  • January 18, 2019 11:52

  "highlighting (yellow, red) via Chrome Stylus Plugin:"

  Sorry for the newbie question but where do I put these code snippets? Thanks!

  0

  Permalink
• 

  Tobias

  • January 18, 2019 16:52

  Ah, I found it. We need a browser extension called stylish

  https://userstyles.org/ 

  0

  Permalink
• 

  rawbytz

  • January 18, 2019 21:32

  @muschelklaus  
  
  Highly recommend you install 'Stylus' and NOT 'Stylish'. 
  
  Stylus is actually a clone of an earlier no spyware version of Stylish.

   

  1

  Permalink
• 

  Tobias

  • January 19, 2019 09:49

  Thank you for the heads up. 

  0

  Permalink

Please sign in to leave a comment.