How to apply different colors to all texts in a text box in design studio

[Former Member]

I am using the following CSS to apply the color to the Text in a Text box

TEXT_2_tf1{

color : green;

}

with the help of this all the texts in the text box gets green color instead of only 1 text

for example I have "sample text" in a text box I want "sample" in green color & "text" in blue color

Is there any way to achieve this

[Former Member · Accepted solution]

Hi,

If you use formatted text view instead of text view, you could achieve it. In formatted text view you could set a html using script. To achieve that you can set html like this.

FORMATTEDTEXTVIEW_1.setHtmlText("<p><span class='red'>Red</span> color <span class='green'>Green</span></p>");

After that define your custom css as below.

.red {color: red; }

.green{color: green;}

Hope this helps.

Thanks,

Mohan Raj D.

[Former Member · Accepted solution]

Hi Mohan Raj

Thanx a lot for your help it worked perfectly.

[Former Member · Accepted solution]

Hi Rahul,

Happy to hear that solution worked for you.

[Former Member]

I want to create a String of Text with the names of the countries in white color their value (if +ve) in Green color & (if -ve) in red color

[vijaymuniraj]

Hi,

Why don't you create one global script for your logic and apply the same global script to all text boxes?

[former_member194504]

Hi Rahul,

This may help you if you want only two words text as you said as example and if you have static content to fill the text box.

Go ahead drag and drop text and empty the conent.

put this css and run it

#TEXT_1_tf1:before{
    content: "sample";
    color:blue;
}
#TEXT_1_tf1:after{
    content: " text";
    color:red;
}

Thanks,

Nithyanandam

[Former Member]

Hi Nithanandam,

Thanxx a lot for your help, but I have 16 textboxes with different colors

Is there any option we can access each word in a Text Box  using the Child element as we do in charts

[former_member194504]

Hi Rahul,

No you can't without help of javascript or jquery.

Thanks,

Nithyanandam

[MustafaBensan]

Hi Rahul,

I'd be interested to know the business case for such multi-coloured text boxes.  If you implement this the recommended way of creating separate text boxes for each word then this involves a significant amount of maintenance overhead, so you should carefully consider the value and need for this requirement.

To put the requirement into context, can you be more specific about the purpose of each of the 16 text boxes you are referring to?

Regards,

Mustafa.

[former_member194504]

Hi Rahul,

As Franck said, there is no possible way to individually color the text only using CSS. However you can use gradient if you want,

https://css-tricks.com/snippets/css/gradient-text/

or else you can done using javascript or jquery manipulation.

Thanks,

Nithyanandam

[Former Member]

Oh, I understand now. Sorry, I misread your post.

Nope, First word can only be achieved with Javascript or Jquery manipulation, which means DOM-Hacking, and it's not a good idea.

I think you'll have to create 2 text box to separate your words, and assign a class/style to each of them.

If you have an issue with the positioning and the width of the text box elements, you can use CSS to change the position absolute to relative, but it's a bit of work.

[Former Member]

Hi,

Add a CSS class in Design studio on all texts : TEXT_GREEN.

Then, in the CSS stylesheet, declare the CSS class as:

.TEXT_GREEN {

color: green;

}

Just for information, you were referring to a specific text in the app using its ID with your css code, but I think you miss the # in front of it.

[Former Member]

Yes you were correct I missed the ID but with that too I have to create various text boxes & assign a different class to each text box whereas I want to use only 1 text box

Any idea how that can be achieved

Thanks for your  quick response

Regards

Rahul