Hi dear community,
an absolute beginner questions: I am using Gutenberg editor to create blog posts. I have a Bricks template for “single post” and I am utilizing “Post content” element to display the content from Gutenberg. However, I wonder how I would be able to style the content in Bricks? See screenshot from bricks and Gutenberg editor attached. H2 and H3 appear very big, would set some margin etc. Also I want to change the color of the vertical line indicating a quote. How could this be achieved?
Many thanks for your support.
Welcome! 
Bricks takes the default CSS settings for elements like H2 and H3 from the Theme Styles you have set. Theme Styles – Bricks Academy
You can create a new theme style with the condition to display only on your posts.
You can also just change the CSS of your {post_content} element using custom CSS like this:
%root% h2 {
font-size: 2rem;
}
%root% h3 {
font-size: 1.8rem;
}
Etc.
For the vertical line, you can change its colour using custom CSS. Just find the class by right clicking it and selecting “inspect”. Then add this custom CSS to your {post_content} element:
%root% .vertical-line {
color: red;
}
(Replace “vertical-line” with the actual class. Make sure to keep the dot.)
1 Like
Many thanks @mtehsunmeta, this helped a lot!
Hi @mtehsunmeta, I chose the route the create a separate Theme Style and apply it to a post type template. This works great, however I do not manage to change font-sizes for headings set via ACF in the Bricks Builder GUI. However, I can well apply other settings to the headings set - like “Text Transform” via this GUI. These work perfectly. Just no chance to change font-sites - be it with CoreFramework variables or rem.
I can - however - change the heading font-sizes via custom CSS per element as you described above.
Any idea why this can be the case? Would love to set the font-sizes centrally in the Theme Styles - instead of individual element CSS.
Thanks again for your support!
Likely because your default theme style has settings for font size, and the condition to display it on your entire website overrides your new theme style.
Go to your original theme style and set a condition to exclude your blog posts. Hopefully that works!
Thanks a lot. That is exactly what I did @mtehsunmeta. But without effect. I think it might be related to Core Framework, since changing the general headline sizes in the CF plugin works. However, I think it must be possible to still be able to define separate headline styles for separate Theme Styles.
Are you aware of the best mode to inject custom CSS to a whole template in Bricks? I am only aware of the „per element“ CSS.
Thanks a lot!
Yes, try adding the custom CSS to the page settings.
In your template, go to settings > page settings > custom code. I’m fairly certain that should do it
Hi @mtehsunmeta, I have clearly overlooked that area - thanks for pointing it out! How would I target this page in CSS? In the different elements I was using a code like:
%root% {
h2 {
font-size: var(–text-xl);
line-height: 1.2;
margin-bottom: var(–space-m);
margin-top: var(–space-l);
}
Pasting that to the “custom code” section did not work, I think because the %root% is incorrect here. However, using “:root” would target the whole website, not just the specific template, wouldn’t it?
Thanks and best,
David
Yes, %root% is your problem here. %root% gets replaced with the element id on the front end if applied to an element’s custom CSS. Since you’re adding this code to the entire template, there’s no need for %root%. h2 {xyz} will select all h2s on the page. You also won’t have to worry about this code affecting other h2s on the website because this custom CSS will only be applied to the one template. So just:
h2 {
font-size: var(–text-xl);
line-height: 1.2;
margin-bottom: var(–space-m);
margin-top: var(–space-l);
}
should work.
