MyBB Community Forums

Underline can Change Color?

it is possible to change the color of Underline BBcode?
I would like to change the color black to another if possible

Example:



Thanks in advance

The editor (MyCode) just inserts a HTML <u>-Tag for underlining text. This is always the same font color!

You can create a new MyCode to add a customized element with CSS using border-bottom. In addition you can give a parameter for different colors.

<span style="border-bottom: 1px solid #0000CC;">Underlined text</span>

[ExiTuS]

(2019-09-27, 08:31 AM)[ExiTuS] Wrote: [ -> ]The editor (MyCode) just inserts a HTML <u>-Tag for underlining text. This is always the same font color!

You can create a new MyCode to add a customized element with CSS using border-bottom. In addition you can give a parameter for different colors.

<span style="border-bottom: 1px solid #0000CC;">Underlined text</span>

[ExiTuS]

That CSS creates a line underneath the span, but if that span doesn't fit on a single line it won't have the desired effect. Some browsers allow you to specify text-decoration-color.

<u style="text-decoration: underline solid #0000CC;">Underlined text</u>

Like I said, some browsers will not honor the text decoration color. I also don't know if that would change the color of any other inherited text decorations (such as strike through or line over).

(2019-09-27, 03:53 PM)laie_techie Wrote: [ -> ]That CSS creates a line underneath the span, but if that span doesn't fit on a single line it won't have the desired effect. [...]

That will happen to block elements only! span is an inline element and if a long text within span causes a line break, the border-bottom will keep in the next line as well.

[ExiTuS]

Quote:The editor (MyCode) just inserts a HTML <u>-Tag for underlining text. This is always the same font color!
You can create a new MyCode to add a customized element with CSS using border-bottom. In addition you can give a parameter for different colors.

<span style="border-bottom: 1px solid #0000CC;">Underlined text</span>

[ExiTuS]

Thanks you [ExiTuS] for your feedbacks, how can used customized via MyCode? i am no a expert with MyCode... 

Quote:That CSS creates a line underneath the span, but if that span doesn't fit on a single line it won't have the desired effect. Some browsers allow you to specify text-decoration-color.

Like I said, some browsers will not honor the text decoration color. I also don't know if that would change the color of any other inherited text decorations (such as strike through or line over).

Thank You laie_techie for yor feedbacks, yes some browser will not soport the text decoration but I have updated my browser like many people... for security it is better to have them updated
, that browser support Underline BBCOde



Thanks Your for the Comments and Feedbacks.

---

My Resume of testing Underline CHange Color

BBCode Underline Styles, I was studying and researching through the community, I think the file with the code is
root/jscripts/sceditor/styles/jquery.sceditor.default.css (Select .CSS the Style your Theme)

But, there is No code of underline BBCode... so try add some text like:

Quote:underline {
text-decoration: Underline;
text-decoration-style: wavy;
text-decoration-color: red;
}

Resume Test: It didn't work or Display.

- Another test was in that file style: root/jscripts/sceditor/styles/jquery.sceditor.mybb.css

But, there is NO code of underline BBCode... so try add some text like:

Quote:underline {
text-decoration: Underline;
text-decoration-style: wavy;
text-decoration-color: red;
}

Resume Test: It didn't work or display.

- Another test, try modifying this file root/jscripts/sceditor/formats/xhtml.js

underline:{txtExec:['<span style="text-decoration:underline;">',"</span>"]},

Changed to:

underline:{txtExec:['<span style="text-decoration: underline; text-decoration-style: wavy; text-decoration-color: red; 

Resume Test: It didn't work or display.

- Another test, - try modifying this file root/jscripts/sceditor/jquery.sceditor.xhtml.min.js

underline:{txtExec:['<span style="text-decoration:underline;">',"</span>"]},

Changed to:

underline:{txtExec:['<span style="text-decoration: underline; text-decoration-style: wavy; text-decoration-color: red; 

Resume Test: It didn't work or display.

- Another test, try modifying this file  root/jscripts/select2/select2.css

.select2-result-selectable .select2-match,
.select2-result-unselectable .select2-match {
    text-decoration: underline;
}

Changed to:

.select2-result-selectable .select2-match,
.select2-result-unselectable .select2-match {
    text-decoration: underline;
    text-decoration-style: wavy;
	text-decoration-color: red;
}

Resume Test: It didn't work or display.

I've searched through the community and can't find the solution...

and finally test with Global.CSS (there are several codes) try to modifying the entire code of text-decoration: underline;

Changed to:

Quote:text-decoration: underline;
text-decoration-style: wavy;
text-decoration-color: red;

Resume Test: see the picture: 


I will continue studying, I would like to customize the text-decoration:

Example:




Syntax:
text-decoration-style: solid;
text-decoration-style: double;
text-decoration-style: dotted;
text-decoration-style: dashed;
text-decoration-style: wavy;