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:

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?