Solved

Combining the custom CSS with HTML controls

  • 14 December 2021
  • 6 replies
  • 135 views
H
Rank
Userlevel 2
Badge +5

I've been playing around with some custom HTML as described here. This is working alright but I'm trying to apply my styling using custom.css as described here. Although I can apply my custom CSS to the entire site, it does not target the elements inside the HTML field. 

I've tried using targeting the HTML elements with CSS classes and this does not work (CSS is also not showing in dev tools). When I was looking if the elements could be targeted at all with 

* { border: solid 3px green; }

it targeted all my elements except the elements inside my custom HTML.

So my question is: is it possible to combine custom HTML with the custom.css file?

 

 

icon

Best answer by HarryA 14 December 2021, 16:29

View original

6 replies

E
Rank
Userlevel 6
Badge +16

To do this you have to apply the css within the HTML field itself. 
 

<script>/* Your CSS here */</script>
H
Rank
Userlevel 2
Badge +5

@Erwin Ekkel I think you mean <style> since <script> is used for JavaScript?

But if I understand you correctly it is not possible to use to custom.css file for this? In that case I have a follow up question.

I’m building a couple of HTML-elements that change their styling based on the value of a form field. I succeeded in doing this by using SQL CASE statement and inline styling. But when I pass a certain threshold of characters in the expression query (around +/- 4500) the query breaks, so this makes me quite limited in what I can style. Using a <style> or <script> tag won't changes this a lot since the CSS needs be written for each of the different cases. Is there a workaround for this problem? 

I was hoping to use the custom.css file for this since it makes it a lot easier to maintain and does not limit the max amount characters used

E
Rank
Userlevel 6
Badge +16

You could add a new custom CSS in the root of the universal folder. And Directly call this in the html field: 

<link rel="stylesheet" href="./html-column.css">

Is this worth a try?

H
Rank
Userlevel 2
Badge +5

I’ve tried this already but this <link> tag is being removed by the GUI or the SF because it's not showing in the HTML document of the GUI. So I'm afraid that won't work.

H
Rank
Userlevel 2
Badge +5

Building on your answer I found a fix. You can use <style> to import stylesheets so I added:

<style>

@import "./custom.css"

</style>

and this fixed it. Thank you for thinking along 

H
Rank
Userlevel 2
Badge +5

a small caveat for anyone reading this in the future that a <style> tag will only work while it's encapsulated in another element e.g.:

<div>

<style> @import "./custom.css" </style>

<all your html elements> </all your html elements>

</div>

Reply


Terms & ConditionsCookie settings