Working With V9 - Customizing Atomik theme

Ok People

I have worked on themes for concrete5 for years, and I have used the Elemetal theme as a basic start point for most builds.

I was hoping to do the same with this nice new theme Atomik - (NO DOCUMENTION ON HOW TO DO THIS)

Having worked out how to copy the theme and remove the DOCUMENTION parts to allow for custom install. (No documention)

Now I am building the site pages, and I have created a Homepage page template just as before, all fine.

My Issues are with this new SCSS system, and the complier/Skins system ā€¦ Now I want to change the spacing round the logos in the header and footer, and I want to Add my own styles to the theme for the new sections i have addedā€¦

How ever I CAN NOT DO THIS.

  1. The stupid skin system, overrides all styles so modifying or updating the scss files is pointless.
    2.You cant add custom CSS in the theme editor as it doesnt work.

  2. Creating a custom theme generates a new skin.scss file by complying the SCSS files Ok ā€¦ So now i can see my changes But only onceā€¦ this doesnt update ever and after every minor CSS update you have to dele and recreate the custom skin (Waste of time)

  3. Finding the scource locations of SCSS files now doesnt work using chome, so you now have to nav a look through the never ending mess of SCSS folder & files and sub folders to find the relevent CSS property you need to update. ( Total wate of time and energy) and Not a useful file structureā€¦

  4. Where to put custom CSS ? Where the hell do i put my custom styles. The layout is confusing , and their is no place for any custom codeā€¦ and no documentation ā€¦

Please advise? Otherwise i may just have to drop V9 and stay on V8. But then i am gona have to upgade and deal with these issues laterā€¦

I Really like this new theme and is looks smart and has nice features i had to manaully add into the elemental theme in the past?

Or Maybe I am just being stupid, and i have missed somthing to solve this problem?
I have disabled all Cache ā€¦ makes no differnceā€¦

Regards
Carl

1 Like

This post has been REDACTED since the OP has not responded!

Iā€™ll be posting some extensive theming documentation next week which might help point you in the right direction (although given the content of the post its unlikely to cover every point of contention you have.) Itā€™s more geared toward starting a theme from scratch rather than forking Atomik, but maybe it will help.

Regarding the original post, I see more general frustration than specific questions. The only specific question I see that I can suss out is number 4.

  1. If youā€™re trying to just add custom styles directly to the theme (if youā€™re building your own version of Atomik) then you can put them anywhere, and recompile the theme.
  2. If youā€™re trying to use the built-in customizer (which it seems like you might be doing), then the custom CSS selector can be found here, at the bottom of the customizer, where the title says ā€œCustom CSSā€, and the button has the label ā€œAdd Custom CSSā€.

image

Turning this on gives you a button to pop open a custom CSS dialog, just like in version 8.

Changing this and saving as a new skin will apply your custom styles.

Ok ā€¦ Thanks for the response,

Yes it was a little bit of frustration as, the default theme is OK, and does almost all i want. The issue is changing the Margins and padding on a couple of Areas to tweek this design to suit is all i need.

I have tried the built in CSS custom theme Options, I could use this , but it doesnā€™t workā€¦ It doesnā€™t seem to save, if you reload after save all the css is gone. I cant get this feature to workā€¦

All I actually want to do is be able to Disable the Skin completely and comply er So as to see the paths to the style like with .less on the old V8. And be able to modify the scss Files and see the changes?

My issue is doing a simple CSS mod is now a complete pain. Having wasted 4 hours trying to change the padding on the logoā€¦ I was a little annoyed that it is now so complex to do so. I can see that if you create a custom skin it re-complies the skin all i want is to be able to do manually recompile this file. and to disable it during development?

Thanks.

Just an FYI, I have an Atomik Theme Clone in a separate package that is just ready to go. Instructions on how to use and everything are in the repo README.md file. Here is a link if it helps: https://github.com/davedew/atomik_theme_clone

I also have a plain starter theme repo here: https://github.com/davedew/afixia-theme-basic-bedrock

1 Like

The documentation I mentioned earlier is now posted here:

1 Like

Hello team, I appreciate all of the hard work you have all put in to continually evolve the ConcreteCMS system and I can appreciate that methods change in the name of progress, efficiency, etc. but I am sure having a hell of a time trying to do things with Atomik that would have been very easy with other themes. I think I understand this ā€˜recompilingā€™ business but my SSH access to the server I use does not seem to have ā€˜npmā€™ installed and donā€™t know how I might recompile without it. I can find the SCSS code that I want to change and change it, but without recompiling, it does nothing. I have found the ā€˜custom CSSā€™ area of the theme customizer and it saves my CSS, but does not seem to apply it into the mix. Even after clearing caches, my changes do not appear. I know itā€™s just learning curve, so maybe someone has some insight.

Hi, Iā€™m currently successfully using this method ā€˜custom CSSā€™, although itā€™s probably not a sophisticated solution, it probably loads more code. The reason may also be the browser cache.

Hello Afixia, I have installed your Atomik Theme Clone and am starting to figure it out.

When using ā€˜Customizeā€™ in ā€˜Pages & Themesā€™ it brings up the homepage with the pencil icon. When I click the pencil icon, it never loads. The panel slides out, just nothing comes up. This ā€˜Customizeā€™ facility does work in the built-in Atomik.

Is it possible to recompile CSS without shell access? Am I on the right track trying to use the ā€˜Customizeā€™ system?