Changing the color of text from field in edit mode VIA CSS

  • 1
  • Question
  • Updated 3 years ago
  • Answered
HI,

I'm trying to change the color of the text from only a couple specific fields , which are mostly in Edit mode by default..
I created a CSS with guideline found in community.. and am not able to make it work

Here what i thought should have work:

.nx-fieldtext {
    color:#ff0000;
}

And ofc added the name in th css class on field I need to change color on.

But it did not work

I've even followed the examples here: http://help.skuidify.com/m/25162/l/102515-including-custom-css-in-a-skuid-page using the inspect element.

I'm a noob when it comes to that, but it seems pretty straightforward
this is the element styles when i click on specified field trying to apply this css


If i change the color on it directly (the green color is default from theme) or use the following , as seen on console, directly in css class:
 .nx-field input, .nx-field textarea, .nx-field .nx-richtext-input {
 color:#ff0000
}


The color is applied to All my large text fields

Can anyone point me in the right direction pls?

Thx
Photo of Dave

Dave

  • 5,538 Points 5k badge 2x thumb

Posted 3 years ago

  • 1
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
Dave,   We are all noobs around here...  Don't worry. 

Not sure I totally understand,  what you are trying to do.  But if you want to target the text showin in the edit mode version of the field - you'll want to build your css around the "input" tag.

So here is something I did:  I added the css class "greenText" to a field editor and then added this css rule.

.greenText input {    color: green;  }


And the field editor looked like this: 


 
Photo of Dave

Dave

  • 5,538 Points 5k badge 2x thumb
Thank you Rob, yes as u said, I'm trying to change the color of text from field in edit mode

I just copied your exact code, put it in a css class (inline) -Just changed the color to red



I put in the field the CSS class name: greenText (tried as well to do it on field Editor instead of specific field)



But still did not work, the text is not red :(

The field is still shown in the default color I chose on Theme (green)
Photo of Louis Skelton

Louis Skelton

  • 4,878 Points 4k badge 2x thumb
You could try this instead - might be worth a shot:

.greenText input {color: green !important;}
Photo of Dave

Dave

  • 5,538 Points 5k badge 2x thumb
Ty Louis, but unfortunately that did not work either :(
Photo of Tami Lust

Tami Lust

  • 5,280 Points 5k badge 2x thumb
If you set your Theme to default will it work then?
Photo of Dave

Dave

  • 5,538 Points 5k badge 2x thumb
Hey Tami,

I did try that as well but did not work either.

If i use the code below,The color works, but on all All large text type of fields

.greenText .nx-field input, .nx-field textarea {
 color:#ff0000
}

But still cannot get this to be applied on specific field
Photo of Ben Hubbard

Ben Hubbard, Employee

  • 12,490 Points 10k badge 2x thumb
Try this to limit it to just fields with the greenText css class.

.greenText .nx-field input, .greenText .nx-field textarea {
 color:#ff0000
}

the comma in your rule represents the start of a new selector.
Photo of Dave

Dave

  • 5,538 Points 5k badge 2x thumb
Ty Ben, that worked perfectly :)