Open Forum

Two interrelated questions: 

1. Is it possible to use a flex site's theme styles/classes within a custom code block? By default, if you use, say, an <h4> tag in your custom code, it will not adopt the styles of your theme's h4, meaning you have to redefine them in a CSS block. This of course is problematic, because if you change a theme style, you now have to update your code style to match. 
2. I'm finding it impossible to apply some basic text styles using the CSS insertion. For example, I want to increase the line-height property of paragraph text. Defining a style does nothing; the only way I can get this to do anything is by redefining the p style within my CSS, but then of course it applies to everything, not just the targeted block of text. Seems like in the CSS hierarchy, my custom style is actually not at the most local -- it's being overridden by some site-wide default.

#AttendeeHub

------------------------------
Adam Miller
Digital Corporate Content Manager
Visit CaliforniaUnited States
------------------------------

Hi Adam,

Hope you are well.

You can refer to the following articles for reference :

------------------------------
Raashi Semwal Khati
Senior Quality Analyst
Cvent
------------------------------

Thank you Raashi, but neither of those resources relate to my question. I'm not asking about the custom CSS tool nor do I need help with basic HTML/CSS. I'm very specifically asking if you can call theme styles, such as paragraph and heading, within a custom code widget. By default, the <p>, <h1> etc. tags in the widget do not adopt the CSS styling of the theme. Thus if the custom code widget contains text, as best I can tell you need to apply local CSS within that widget to match.

------------------------------
Adam Miller
Digital Corporate Content Manager
Visit CaliforniaUnited States
------------------------------

Original Message:
Sent: 07-19-2023 09:40
From: Raashi Semwal Khati
Subject: Using theme styles in custom code & targeting text styles with custom css

Hi Adam,

Hope you are well.

You can refer to the following articles for reference :

Adding CSS Classes to Your Flex Event = Link : https://support.cvent.com/s/communityarticle/Adding-CSS-Classes-to-Your-Flex-Event

 

Event Website Styling 101 = Link : https://support.cvent.com/s/communityarticle/Flex-Web-Styling-101

Additionally, as your question is regarding CSS/HTML, I would suggest you to contact our HTML support team and they'll be able to assist you with your query. You can contact them at 866-318-4357 >  Press 1 for Event cloud > Press 1 for Setting Up Event > Press 1 for Events > Press 2 for Web Design & HTML for immediate assistance.

I hope this helps.

------------------------------
Raashi Semwal Khati
Senior Quality Analyst
Cvent
------------------------------

Hello Adam,

I recommend referring the Cvent article https://support.cvent.com/s/communityarticle/Adding-CSS-Classes-to-Your-Flex-Event

------------------------------
Vijayathivakaran Mathialagan
Web Analyst
AstraZenecaIndia
------------------------------

Thanks Vijayathivakaran, but this doesn't quite get at my question. I'm aware you can inject custom CSS. My question is using custom code blocks (similar to this but actually a different feature), can you apply CSS styles from your theme. By this I mean the styles defined at the theme level, such as paragraph and headings, not custom CSS.

As best I can tell, it is only possible to apply CSS locally within a custom code block, meaning you have to redefine any text styling to match your theme in every single code block. But this of course is counterintuitive, so I'm hoping I'm just missing something. 

------------------------------
Adam Miller
Digital Corporate Content Manager
Visit CaliforniaUnited States
------------------------------

Original Message:
Sent: 07-24-2023 05:42
From: Vijayathivakaran Mathialagan
Subject: Using theme styles in custom code & targeting text styles with custom css

Hello Adam,

I recommend referring the Cvent article https://support.cvent.com/s/communityarticle/Adding-CSS-Classes-to-Your-Flex-Event

------------------------------
Vijayathivakaran Mathialagan
Web Analyst
AstraZenecaIndia
------------------------------

I believe you're correct that those classes don't automatically carry over to a custom code block. This feels like something that, while you could do it with a new CSS block like you mentioned, it would be better if this could be fixed globally so that if you've taken the time to set up CSS, it will carry through everything as opposed to having to be recreated.

I haven't hit the other issue you mention, but I wouldn't be surprised if certain settings weren't editable. If so, it would be good to have this stated somewhere in a knowledge base article or something so we know what's customizable and what isn't.

------------------------------
Elena PEREZ
Communications Coordinator
SEIU - UHWUnited States
------------------------------

Thanks Elena for more or less confirming that limitation of the code blocks. My sense is outside of the one-off table or whatever, code blocks are best used for creating whole pages or even sites, rather than plugging holes (after a point, just create a non-Flex site really).

Regarding the CSS, I've determined a VERY SPECIFIC workaround for applying lineheight (and I imagine many other text styles): The Flex editor will not let you apply a dot style (as best I can tell), but it will let you apply a text style to a paragraph or heading tag (p, h1, h2, etc.). So, what you can do is change the "HTML Heading Tag" of the texrt object to H6, which you're probably not using anywhere, and then target h6 in the Custom CSS tool. That will work. You do have to be sure you're not accidentally targeting an h6 somewhere else, but it's unlikely. 

Maybe this helps someone. 

------------------------------
Adam Miller
Digital Corporate Content Manager
Visit CaliforniaUnited States
------------------------------

Original Message:
Sent: 08-02-2023 19:22
From: Elena PEREZ
Subject: Using theme styles in custom code & targeting text styles with custom css

I believe you're correct that those classes don't automatically carry over to a custom code block. This feels like something that, while you could do it with a new CSS block like you mentioned, it would be better if this could be fixed globally so that if you've taken the time to set up CSS, it will carry through everything as opposed to having to be recreated.

I haven't hit the other issue you mention, but I wouldn't be surprised if certain settings weren't editable. If so, it would be good to have this stated somewhere in a knowledge base article or something so we know what's customizable and what isn't.

------------------------------
Elena PEREZ
Communications Coordinator
SEIU - UHWUnited States
------------------------------

Quick update: Better way to do this. You can use the .style + html tag format to target text. 

So, ".stylename p" would let you apply, say, a lineheight property to any paragraph text to which you've applied that custom css, .stylename p h1 would let you target p & h1, etc. 

Not sure why I didn't think this was workign at first, but there you go. 

------------------------------
Adam Miller
Digital Corporate Content Manager
Visit CaliforniaUnited States
------------------------------

Original Message:
Sent: 08-02-2023 19:41
From: Adam Miller
Subject: Using theme styles in custom code & targeting text styles with custom css

Thanks Elena for more or less confirming that limitation of the code blocks. My sense is outside of the one-off table or whatever, code blocks are best used for creating whole pages or even sites, rather than plugging holes (after a point, just create a non-Flex site really).

Regarding the CSS, I've determined a VERY SPECIFIC workaround for applying lineheight (and I imagine many other text styles): The Flex editor will not let you apply a dot style (as best I can tell), but it will let you apply a text style to a paragraph or heading tag (p, h1, h2, etc.). So, what you can do is change the "HTML Heading Tag" of the texrt object to H6, which you're probably not using anywhere, and then target h6 in the Custom CSS tool. That will work. You do have to be sure you're not accidentally targeting an h6 somewhere else, but it's unlikely. 

Maybe this helps someone. 

------------------------------
Adam Miller
Digital Corporate Content Manager
Visit CaliforniaUnited States
------------------------------


Original Message:
Sent: 08-02-2023 19:22
From: Elena PEREZ
Subject: Using theme styles in custom code & targeting text styles with custom css

I believe you're correct that those classes don't automatically carry over to a custom code block. This feels like something that, while you could do it with a new CSS block like you mentioned, it would be better if this could be fixed globally so that if you've taken the time to set up CSS, it will carry through everything as opposed to having to be recreated.

I haven't hit the other issue you mention, but I wouldn't be surprised if certain settings weren't editable. If so, it would be good to have this stated somewhere in a knowledge base article or something so we know what's customizable and what isn't.

------------------------------
Elena PEREZ
Communications Coordinator
SEIU - UHWUnited States