Text Component CSS

Ask for Help
1

I know this is a somewhat frequent point of conversation so I apologize for bringing it up again. I looked through all the other threads to try to find this info and couldn’t. How to change the color of a SPECIFIC text component on your screen? I found CSS that changed it for ALL the component but could not find CSS for just a single one. I finally got this CSS to display it exactly how I want it, but it only displays it in the builder, it does not change the color when viewing through the actual app. Here’s the CSS I am currently using along with a pic of my desired outcome. Thank you so much!

Dashboard View
Dashboard View722×1484 118 KB



div[id*='screenScrollView'] > div > :nth-of-type(2) [data-test="app-text-box"] {
    color: #f15a29;
}
2

what component are you trying to change color? is that text?

3

Yes I just want to change the color of a normal text component

4

Why not use a Rich Text component?
Seems like you’re deliberately making it difficult for yourself.

5

I’m sorry Darren, I’m not sure what you mean? Like just use a rich text component and use markdown? I could do that but then also, I want the texts displayed to be dynamic. I get I could use a template column but I just thought there had to be a way to just display the text you want using a normal text component, then use a rich text component to targe the color of the text.

6 
<pre><span><style> 
.kDEQDA{
    color: #f15a29 !important;
}
7

But wouldn’t that target all text components?

8

text is hard to target… I would just use the rich text component… as Darren said… and make it dynamic using a template column… you will have better controll

9 
<div class="text01">TEXT</div>

<pre><span><style>
.text01 {
font-family: 'Noto Serif JP', serif;
font-size: 1.3rem;
text-align: center;font-weight: bold;
line-height: normal;
color: red;
text-shadow: 1px 1px grey;
width: 95%;
}

replace TEXT in template column

10

Just use inline styling in a Rich Text component. Something like this:

<div style="color: #f15a29;">blah blah</div>

You can stick that in a template and use replacements if you want it to be dynamic.

1 Like
11

Ok thanks guys! I’m still wrapping my head around CSS so I didn’t know what would be easiest!

12

Placing text directly into Css and html have two major benefits…

  1. It will work with most browsers and operating systems
  2. It will not take extra space on the screen, which might create empty lines and make other elements unclickable
14

I would like to change overall text size. Is there a way to do that using css. Any suggestions are welcome

15

I’m not sure if there’s an overall class you can target because there’s no guarantee everything is stored in p or span, but you might try targeting p or span to see if they affect all the things you can see.

This is providing you have access to CSS on Business/Enterprise.

1 Like