Skip to Content
author's profile photo Former Member
Former Member

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

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

Add a comment
10|10000 characters needed characters exceeded

Related questions

6 Answers

  • Best Answer
    author's profile photo Former Member
    Former Member
    Posted on Jul 21, 2016 at 05:04 AM

    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.

    Add a comment
    10|10000 characters needed characters exceeded

  • Posted on Jul 19, 2016 at 04:03 AM

    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

    Add a comment
    10|10000 characters needed characters exceeded

    • 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.

  • author's profile photo Former Member
    Former Member
    Posted on Jul 18, 2016 at 05:53 PM

    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.

    Add a comment
    10|10000 characters needed characters exceeded

    • 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

  • author's profile photo Former Member
    Former Member
    Posted on Jul 18, 2016 at 08:04 PM

    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.

    Add a comment
    10|10000 characters needed characters exceeded

  • Posted on Jul 19, 2016 at 03:47 AM

    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

    Add a comment
    10|10000 characters needed characters exceeded

  • author's profile photo Former Member
    Former Member
    Posted on Jul 20, 2016 at 07:56 AM

    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

    Add a comment
    10|10000 characters needed characters exceeded

Before answering

You should only submit an answer when you are proposing a solution to the poster's problem. If you want the poster to clarify the question or provide more information, please leave a comment instead, requesting additional details. When answering, please include specifics, such as step-by-step instructions, context for the solution, and links to useful resources. Also, please make sure that you answer complies with our Rules of Engagement.
You must be Logged in to submit an answer.

Up to 10 attachments (including images) can be used with a maximum of 1.0 MB each and 10.5 MB total.