I’m trying to further customize a custom skin I created via the CMS dashboard, by way of incorporating fonts from my client’s for site headers. I’ve seen documentation for building themes/skins from scratch, but that’s not what I want to do.
I would assume I could modify the css for the skin I created, but I have no idea where that file would even exist. If I look at the file system for my client’s Concrete installation, I’m able to find default.css & rustic-elegance.css under /concrete/atomik/css/skins-- but I don’t see anything else.
Am I looking in the wrong place? Am I going about this the wrong way? Any pointers anyone can offer are very appreciated!
Hello,
You’re on right track, but customizing an existing Atomik skin’s CSS can be a bit tricky compared to building a new theme from scratch. Here’s how to approach adding custom fonts for your client’s site headers:
- Locate the Skin’s SCSS Files (Not Default Locations):
While you found default.css and rustic-elegance.css, these are likely the compiled versions and not ideal for editing. Atomik uses SCSS for styling, which gets compiled into CSS.
The location of the SCSS files for your custom skin might differ slightly depending on how it was created. It’s not typically found directly under /concrete/atomik/css/skins.
2. Check the Concrete CMS Documentation:
Refer to the Concrete CMS documentation for “Customizing Atomik theme” specifically. There should be a section Mary Kay InTouch on locating the SCSS files for custom skins.
3. Common Locations (if Documentation Doesn’t Specify):
If the documentation doesn’ t specify, here are some common locations to look for your custom skin’s SCSS files:
Inside your theme folder within the Concrete CMS installation directory (e.g., /application/themes/<your_theme_name>/). Look for subfolders like assets/scss or presets/default.
If your skin was created as a package, it might be located within the package directory under /application/packages/<package_name>/.
4. Look for Files Related to Typography:
Once you locate the SCSS directory for your skin, look for files related to typography. These might be named something like _typography.scss or _fonts.scss.
5. Adding Your Custom Fonts:
In the relevant SCSS file, you can define custom fonts using the @font-face rule. You’ll need to specify the font family name, source location (either a path to the font file on the server or a URL), and other font properties.
Important Considerations:
Uploading the font files themselves: You’ll need to upload your client’s font files to a location accessible by the web server. A common location is within the theme’s assets folder.
Compiling the SCSS: After modifying the SCSS file, you’ll likely need to recompile it into CSS for the changes to take effect. This process might involve using a command-line tool or a plugin within the Concrete CMS dashboard (refer to the documentation for specific instructions).
I hope the information may helps you.
1 Like
css on atomik is based on sass, but if you’re lazy as me, you may simply override header_top.php:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- hack radeff.red -->
<link href="/semences.css" rel="stylesheet" type="text/css" media="all">
</head>
1 Like
I’m probably far lazier, @zpartakov – but I’m also careful. I will keep your advice in mind, should doing this the right way turn into more effort than I’m willing to expend. Thanks!
@cassie2698bratt , this is very helpful, many thanks! Since I do have plans for eventually marketing the solution I’m developing for my client to other clients, I want to make very sure that I’m applying this customization in a way that aligns as much as possible with core CMS functionality and is also easily modified on a per-case basis.
What you’ve provided should go a long way toward making this simple. Again, many thanks!
This is likely bad practice but I’ve been doing it for a while now and loving it. When you create a new style preset for a theme’s customizer options, it creates a CSS file in /files/presets and you can edit it directly, and unless you go back into customizer and muck about, you can add CSS to this file and it’s served up without too much fuss.
Customizer I’m talking about:
- Go to Dashboard → Pages & Themes → Themes
- Click the gear icon next to Atomik, choose ‘Customize’
- Click pencil icon, choose a preset, click ‘Create New’
- Make sure you choose the new preset back in ‘Themes’
2 Likes
After playing around with a clean install of Concrete, I figured out that I can change font settings in default CSS and it actually works (likely also bad practice). I also figured out that trying to mirror those changes to an instance I’ve already been working with doesn’t do anything.
I think that, for this project, I’m just going to start over again from scratch and copy over the custom block templates from my client’s current staging environment after I’ve gotten the base CSS the way I want it. Regardless, many thanks for your input on this!
1 Like