This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Chase Curry
Posted May 12 - Read on Facebook

Is there a way to create a css class, then apply that to a number of layers? For instance, I have 6 form fields that all have text. I want to make them all 14px font and white. Thanks in advance!

14 Comments

Jordan Robert Dobson

myStyle = {fontSize: "14px", color: "white" }

myLayer1.style = myStyle
myLayer2.style = myStyle

Etc...

Collect your style settings in a variable then pass in to your layers.

Chase Curry

Great- thanks Jordan Robert Dobson!

Chase Curry

Does this also work for true css styles?

inputElement.style["-webkit-user-select"] = "text"
inputElement.style["padding-left"] = "20px"

I tried adding them to a variable, but no dice.

Jordan Robert Dobson

No dashes. Use CamelCase instead and I think that will resolve your issue. IHopeThatHelpsYouOut.

You can also do a string as well in your object I believe.

{"padding-left": "20px"} I believe should work.

I'd have to check the docs and I'm at the ocean right now... So let me know what it says and if that helps.

Chase Curry

Ah I think I should've been more specific. This is actually on a text input created with javascript:

inputElement = document.createElement("input")
textInputLayer._element.appendChild(inputElement)

whose styles are written like:

inputElement.style["font-size"] = "14px"
inputElement.style["outline"] = "none"

I didn't expect text field elements to be this tricky :p

For reference, this doesn't seem to work:

inputElement.style = {
"font-size": "24px",
"outline": "100px"
}

Jordan Robert Dobson

Oh. Not sure exactly. I think you end up with something more like inputElement.style.backgroundColor = "red"

Chase Curry

Yeah I figured this was a bit out there... from Koen Bok's text input, these style declarations work for an individual field...

inputElement.style["font-size"] = "14px"
inputElement.style["outline"] = "none"

Chase Curry

Just wondering how to add those to a variable, then apply to each field

Jordan Robert Dobson

Hmmmm. Still. Add them to an object ...

Jordan Robert Dobson

Do a loop over every input you have... Then inside that loop, loop over every key value pair in your object. And add it to the style...

Chase Curry

hm yeah that's a thought... that would probably work- will let you know

Jordan Robert Dobson

for input in myInputArray
for key, value of myStyleObject
input.style[key] = value

That should do it I think.

Jordan Robert Dobson

Just make sure I don't have the "for in" and "for of" mixed up.

Jordan Robert Dobson

Let me know if that works out. Doing this all from memory.

Read the entire post on Facebook