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 

    0
    Comment actions Permalink
  • Avatar
    Arthur

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

    :)

    0
    Comment actions Permalink
  • 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!

    0
    Comment actions Permalink
  • 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;

      }   

    1
    Comment actions Permalink
  • Avatar
    Tobias

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

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

    0
    Comment actions Permalink
  • Avatar
    Tobias

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

    https://userstyles.org/ 

    0
    Comment actions Permalink
  • Avatar
    rawbytz

    @muschelklaus  

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

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

     

    1
    Comment actions Permalink
  • Avatar
    Tobias

    Thank you for the heads up. 

    0
    Comment actions Permalink
  • 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
    {...}

    0
    Comment actions Permalink
  • 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 
    1
    Comment actions Permalink
  • 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".

    0
    Comment actions Permalink
  • 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?

    0
    Comment actions Permalink
  • Avatar
    rawbytz

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

    0
    Comment actions Permalink
  • Avatar
    Trevor Jordan

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

    0
    Comment actions Permalink

Please sign in to leave a comment.