Hey there folks. I have hit another knowledge limit on my part. When using a Hero Image Block, I assume the Styles (h1, h2, h3, h4, etc) pull from the Atomic Theme and current skin in use on the page. What I would like to do is to change the font from the default Helvetica to a different style, such as Trebuchet MS. Also, the text is rending all caps. (Even when I skip the Title and put text in the Body, it does the same.) I thought about changing skins for the page in question. I was assuming there is a way to make the changes using the Design & Block Template, Custom CSS to make the adjustment for this Hero Image. However, this is where my knowledge of CSS runs out of gas.
If there is any online tutorials or videos that would walk me through this process, I would greatly appreciate it. Or…will I need to customize a skin that contains the font look I am going for?
Well, I figured it out…sort of. It was the font used in the preset file for the skin I was using with Atomik. The font was Bebas Neue, which, according to Gemini, is an all caps font. So, I had Gemini generate CSS code to add to the skin I am using that would allow another font to be specified.
Here is the code (the background color was something I added when I first develop the site):
/* 2. BACKGROUND COLOR: Your original request */
body {
background-color: #E7F5FF;
}
/* 3. HERO BLOCK H1 OVERRIDE: Set Cabin font and turn off capitalization /
div.theme-atomik .ccm-block-hero-image-text h1 {
/ Set the font to Cabin, with sans-serif as a fallback */
font-family: ‘Cabin’, sans-serif !important;
/* Ensure the text is not forced to uppercase */
text-transform: none !important;
}
I am fairly certain there is a more appropriate way of making the change, but this worked for now.
I’m sharing this just in case someone else hits the same situation. I’m not sure I will stick with the Hero image design, but it was a good test.
I really appreciate this CMS and all of the work you guys have put into it. The community is very helpful and encouraging.
That looks good. Out of interest did you look at the theme customiser and see if you can do it in there? I know you can add custom css in there but some themes also offer font changes.
I had looked at the customizer and did not see an option to change the font. However, in retrospect, since the Atomik theme now contains several different skin options which uses other fonts, it might have been a bit easier to transfer the settings from my customized skin to one of the other skins.