Hi! We’ve been experimenting with content inputs for a bit now (to effectively have a universal h1 symbol that we can add and edit anywhere) and when we try adding CSS to this symbol, nothing changes on the text. The only way we can change font family, font size, etc. seems to be with the “Typography” dropdown under the style section, which isn’t exactly the way we want it. If you have any ideas for how to add CSS to a symbol like this, please let me know! Thanks 
Hi @jackmielke, there are a couple ways you can add custom css with symbol inputs.
One way would be to use the CSS Properties section in the Style tab to dynamically bind css data to the symbol input.
You can also accept css code inside a style tag as an input, and bind this input to a custom code block. You will have to add the css class in the Advanced section of the style menu.
Please let me know if this doesn’t answer your question.
Thanks for the quick response :). It looks like the second option is more of what we’ve been seeking, but do you recommend I insert the custom code precisely where I want the text too? Just don’t know how to bind part of that custom code while retaining the ability to edit the TEXT of each new header as well…
It also isn’t picking up the default code from the code input when I try to bind it which is a bit weird. I have to manually re-type it into the content state section each time.
One last question: these two strategies have the same results, correct? We just don’t want this CSS to be overran by any parts of our current universal style sheet, and so I’m hoping that the second option in particular can override all pre-existing style sheets (similar to how it does when you “Edit JS + CSS”)? The first option you presented seems to maybe have some issues here.
Thanks again! I appreciate all the help
Hi @jackmielke,
You can insert the custom code anywhere on the page since they can have multiple styles declared for other CSS classes too. If you are planning to have multiple custom code blocks then it will be good to insert them below or above the blocks.
To bind part of the custom code, you can add a custom code block, click on edit bindings and select the content input code name.
Regarding override preference, the first strategy gets more preference and can override most of the pre-existing styles declared on the universal theme stylesheet as long as they are not marked !important.
1 Like
Thanks! That’s great to know and very helpful 