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

Comments

14 comments

  • Avatar
    rawbytz

    Change:  .contentUnderline
    To:  .content u 

    Change: .contentItalic
    To:  .content i 

  • Avatar
    Arthur

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

    :)

  • Avatar
    Eberhard

    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!

  • Avatar
    Eberhard

    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;

      }   

  • Avatar
    Tobias

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

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

  • Avatar
    Tobias

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

    https://userstyles.org/ 

  • Avatar
    rawbytz

    @muschelklaus  

    Highly recommend you install 'Stylus' and NOT 'Stylish'. 

    Stylus is actually a clone of an earlier no spyware version of Stylish.

     

  • Avatar
    Tobias

    Thank you for the heads up. 

  • Avatar
    Michael C Welch

    Anyone know how to modify, so that we can select for multiple condition as before? the old way isn't working any longer.

    /* UNDERLINE */
    .content u
    {...}

    /* UNDERLINE + BOLD */
    .content u b
    {...}

    /* UNDERLINE + ITALIC */
    .content u i
    {...}

    /* UNDERLINE + BOLD + ITALIC */
    .content u i b
    {...}

  • Avatar
    rawbytz

    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 
  • Avatar
    Michael C Welch

    Thanks so much, changing the order did the trick for me -

    I am only using this for hi-lighting similar to your "WorkFlowy Hi-Liter" or  frankman777's "3.08 | HIJACKING UNDERLINE".

  • Avatar
    Trevor Jordan

    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?

  • Avatar
    rawbytz

    @Trevor  this isn't possible (without a lot more JavaScript)

  • Avatar
    Trevor Jordan

    I'd better get learning Javascript then! But could keyboard shortcuts perhaps be a feature request?

Please sign in to leave a comment.