Jump to content


Photo
- - - - -

Different color for line-through


Best Answer batman , 04 January 2013 - 11:02 PM

Hi verglist

I prove the James B solution with background and work fine

 
del {background-image: url(https://lh5.googleusercontent.com/-DmHHlkXANqg/UOddQEHxPuI/AAAAAAAANY4/SQXOJ421xSQ/s720/line%2520red.png);
background-position:center;
background-repeat:repeat-x;}

You can copy this code (the image is upload at Picassa), then you change the image for 1px.png image..... a good one

;)

 

the image is in "lh5.googleusercontent.com/-DmHHlkXANqg/UOddQEHxPuI/AAAAAAAANY4/SQXOJ421xSQ/s720/line%2520red.png" write before de https://

 

Finally you change for

 

 
 
del {background-image: url(https:YOUR 1PX IMAGE.png); background-position:center; background-repeat:repeat-x;}
Go to the full post


  • Please log in to reply
13 replies to this topic

#1 vergilst

vergilst

    Advanced Member

  • Members
  • 33 posts
  • Framework Version:latest
  • Country: Country Flag

Posted 04 January 2013 - 01:44 PM

I would like to define different color for line-through for <del>line-through</del>, leaving the font color black.  Is it possible?



#2 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 04 January 2013 - 03:24 PM

Yes, it is:

Please Login or Register to see this Hidden Content



#3 vergilst

vergilst

    Advanced Member

  • Members
  • 33 posts
  • Framework Version:latest
  • Country: Country Flag

Posted 04 January 2013 - 07:55 PM

Thanks for the reply, Catrina, but how to assign it as global CSS rule, instead of wrapping every occurrence in span class?



#4 batman

batman

    Bat Learning

  • Members

  • 2108 posts
  • LocationBuenos Aires, Argentina
  • Framework Version:DMS
  • Country: Country Flag

Posted 04 January 2013 - 08:46 PM

Hi vergilst

You can try with:

Please Login or Register to see this Hidden Content

 



#5 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 04 January 2013 - 09:04 PM

Let us know if Batman's answer works for you



#6 vergilst

vergilst

    Advanced Member

  • Members
  • 33 posts
  • Framework Version:latest
  • Country: Country Flag

Posted 04 January 2013 - 09:10 PM

Hi, Batman.

 

This makes the font color red, not only the strike-through line.



#7 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 04 January 2013 - 09:37 PM

Try adding the below declaration to the css. If the below doesn't work straight off, try adding !important after the color before the ;

 

Please Login or Register to see this Hidden Content



#8 vergilst

vergilst

    Advanced Member

  • Members
  • 33 posts
  • Framework Version:latest
  • Country: Country Flag

Posted 04 January 2013 - 10:04 PM

Hi James. It seems that the declaration 'text-decoration-color' is not recognized...



#9 batman

batman

    Bat Learning

  • Members

  • 2108 posts
  • LocationBuenos Aires, Argentina
  • Framework Version:DMS
  • Country: Country Flag

Posted 04 January 2013 - 10:20 PM

Please try with

Please Login or Register to see this Hidden Content

This work fine in Opera and Firefox



#10 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 04 January 2013 - 10:23 PM

Picked that up from here -

Please Login or Register to see this Hidden Content

 

W3 schools and similar sites say it can't be done, but thought that might work as its css3 as there are examples of it working online elsewhere. The only other option would be to use a background image like the last post on this thread -

Please Login or Register to see this Hidden Content


  • batman likes this

#11 vergilst

vergilst

    Advanced Member

  • Members
  • 33 posts
  • Framework Version:latest
  • Country: Country Flag

Posted 04 January 2013 - 10:40 PM

Hi Batman. You're right - it works for me in Firefox, but not in Chrome, Opera and Safari.

 

James, I know that this option exists, but I think that it must have a common CSS solution.



#12 batman

batman

    Bat Learning

  • Members

  • 2108 posts
  • LocationBuenos Aires, Argentina
  • Framework Version:DMS
  • Country: Country Flag

Posted 04 January 2013 - 11:02 PM   Best Answer

Hi verglist

I prove the James B solution with background and work fine

Please Login or Register to see this Hidden Content

You can copy this code (the image is upload at Picassa), then you change the image for 1px.png image..... a good one

;)

 

the image is in "lh5.googleusercontent.com/-DmHHlkXANqg/UOddQEHxPuI/AAAAAAAANY4/SQXOJ421xSQ/s720/line%2520red.png" write before de https://

 

Finally you change for

 

Please Login or Register to see this Hidden Content

Please Login or Register to see this Hidden Content



#13 vergilst

vergilst

    Advanced Member

  • Members
  • 33 posts
  • Framework Version:latest
  • Country: Country Flag

Posted 04 January 2013 - 11:33 PM

Thanks Batman and James

 

The final solution works fine, just added to your code "text-decoration: none;" in order to remove the default black line.

 

Thanks again.



#14 batman

batman

    Bat Learning

  • Members

  • 2108 posts
  • LocationBuenos Aires, Argentina
  • Framework Version:DMS
  • Country: Country Flag

Posted 04 January 2013 - 11:50 PM

Thanks you Verglist, I take note...

"text-decoration: none;"

wpml_mail.gif