How to use themes to conditionally style text

Develop, Build & Integrate CMS Development
1

Hi - thanks in advance for any help people can give me. There is clearly something I’m missing about themes and I’m not even sure what to search for to figure this out.

I am working on converting the website I inherited when I joined my current company from using module-specific styling (e.g. an h3 in custom module A on a page is being styled by module A’s CSS and an h3 in custom module B is being styled by module B’s CSS, even though they are styled to appear the exact same way) to take advantage of theme functionality. The previous developer imported the site but didn’t get to the point of building out the theme so it is the first time I’m doing it and I don’t have an example to work off of.

Long story short, I understand that I can set styles for basically every element but what I am not understanding is how I can make it so that if an H3 shows up on our dark background it is white and if an H3 shows up on our light background then it shows up dark blue. This is just one example obviously of the many instances where one blanket rule for all instances of a specific tag doesn’t work. Am I missing something? Are there any videos or resources that explain themes and how to use them particularly well? I am having trouble finding helpful resources about them.

Thank you in advance!!

2

Hi @emilytm

One way is to include font styling within your module and theme fields. You can include these within your fields.json file when developing a module or theme. This may help prevent you from having to create a bunch of different modules. You could easily just add:

{
 "type": "group",
 "name": "typography",
 "label": "Typography",
 "expanded": true,
 "children": [
 {
 "type": "font",
 "name": "h3_font",
 "label": "Heading 3",
 "load_external_fonts": true,
 "default": {
 "color": "#000",
 "font": "Merriweather",
 "font_set": "GOOGLE",
 "variant": "700",
 "size": "48"
 }
 }
 ]
}

This way within the page editor, you can specificy the color of the font without hard coding it within the css. This is best practice to make it easier for the end user to quickly modify page styling.

Otherwise, you could specify the specific styling for each module within the module.css file.

So if you have module A, within the module.css this would be the styling for the H3:

h3 {
 color: white;
}

Then within module B you would have this within your module.css

h3 {
 color: black;
}

Or if you need to have specific control over specific properties and classes are not ideal, you could use the require_css block and include the styling directly in the module.html. For example:

{% require_css %}
 <style>
 h3 {
 color: white;
 }
 </style>
{% end_require_css %}
3

Hi @emilytm,

to display someting according to the background color you’ll need some CSS classes. Or JavaScript(but this will be a huge overengineered solution) :slightly_smiling_face:

For instance you can do something like

fields.json

{
				"name": "common",
				"label": "Common colors",
				"required": false,
				"locked": false,
				"children": [
					{
						"name": "light",
						"label": "Light color",
						"required": false,
						"locked": false,
						"inline_help_text": "",
						"help_text": "",
						"type": "color",
						"visibility": {
							"hidden_subfields": {
								"opacity": true
							}
						},
						"default": {
							"color": "#ebedef"
						}
					},
					{
						"name": "dark",
						"label": "Dark color",
						"required": false,
						"locked": false,
						"inline_help_text": "",
						"help_text": "",
						"type": "color",
						"visibility": {
							"hidden_subfields": {
								"opacity": true
							}
						},
						"default": {
							"color": "#001d3d"
						}
					}
				],
				"type": "group",
				"inline_help_text": "",
				"help_text": "",
				"default": {}
			},

theme.css

.light-bg{
background-color: {{theme.colors.common.light.css }};
}

.dark-bg{
background-color: {{theme.colors.common.dark.css }};
}

.light-bg h1,
.light-bg h2,
.light-bg h3{
color: {{theme.colors.common.dark.css }};
}

.dark-bg h1,
.dark-bg h2,
.dark-bg h3{
color: {{theme.colors.common.light.css }};
}

than - in your module you can add a choice field like

<div class="{{ module.styles.background_color }}">
...
</div>

the coice field could contain the class like “light-bg” or “dark-bg” as value.

If you’re working with sections you can either set it fix like

{% dnd_section class="light-bg" %}
...
{% end_dnd_section %}

or

<div class="light-bg">
{% dnd_section %}
...
{% end_dnd_section %}
</div>

Of course there are some other approaches, but I’d recommend you to have a dedicated section per color to make it easier for you/the page creators

best,

Anton