Packaged blocks (including theme provided blocks) can still have their own view.css and view.js. Or a block controller can can load assets that are not bundled into the big css/js.
Bundling your assets into the big css/js is entirely optional. It is a lot simpler to serve it all in one big bang where the same mix of assets are used on (nearly) every page, such as in a theme.
The limitation with the new system is where a core block view is overridden, the css/js for that core block may be built into the theme and hence can’t be overridden without doing the whole theme.
That looks perfectly sane and I agree with you, I would expect that to just work.
A difference with structure to Magic Tabs is the default view in Magic Tabs inherits from the theme and I have alternate templates with template specific view.css etc.
I just checked with the uploader block from my Snapshot addon and its view.css loads correctly.
@mashborn Ya I setup a new environment on a windows computer across the room from my linux computer and I got this issue. I haven’t had time to debug it yet, but I’ll dig in when I can.
@mashborn I moved all of the SCSS in the Atomik Theme Clone: https://github.com/davedew/atomik_theme_clone to the build folder and that cleared up the npx mix issues on my windows box. Tested it on Linux too and it seems to still be good. Give it a try and let me know.
Just an update for the Atomik Clone repo: https://github.com/davedew/atomik_theme_clone I was able to fix the installation so everything but the blog page board works out of the box now.
I’ve installed and enabled the Atomik Clone theme - seems to be working as is.
Could anyone please tell me, as examples to start with (that is which files do I change), how to:
change the Atomik Clone theme to my own
change the header layout and colors
change the any block’s layout and colors
swap the Atomik theme on a live site to that of my own (which folders do I upload to site)
What’s the difference between an updated theme and a skin and a template? Do I understand this right that when I make changes in the build and then compile it, that creates a skin in the theme folder? Should I touch that theme folder or make changes only in the build?
It says “to make changes in the build/assets/js/main.js file”. It has only a few import statements. What should I change there? Is it only for enabling/disabling assets or for JS code for blocks as well?
Where are the fonts, mobile, main, body, content, buttons now? Where are block scss files? What are the features?
Now I’m in no rush to use it with this partial documentation. It may be easy for developers but it becomes too complicated for a web designer.
I just want to keep creating custom themes easily for my clients.
Unfortunately, version 8 will still have a long life.
change the Atomik Clone theme to my own - I added more to the Github README.md file for this.
change the header layout and colors - Change the colors in the build/scss/ files. If you are looking for SCSS variables, go to build/scss/presets/default/_variables.scss
change the any block’s layout and colors - Nothing really different here than normal except there are some blocks in the atomik_theme_clone/blocks that are Atomik specific. You can change those there, otherwise you’ll follow standard Concrete overrides for blocks which is explain in their docs. As for colors or CSS changes to a block, it depends. You can see how Atomik does it in the following conversations example:
In atomik_theme_clone/build/assets/scss/_common.scss you’ll see the import statement: @import “features/conversations”;
In that file you’ll see this:
// Import base stylesheets @import “@concretecms/bedrock/assets/conversations/scss/frontend/frontend”; @import “conversations/core-conversation”;
Then in @import “conversations/core-conversation” you get this:
div.theme-atomik {
}
Basically, its importing the default conversation CSS needed to display that block and setting up a way for you to add your own css to override the defaults as needed.
swap the Atomik theme on a live site to that of my own (which folders do I upload to site) - I think you can look at my README.md for the changes to the file names. After that, just upload everything in the package folder except the build folder. Install it as a package and you’ll have the option to switch the theme normally.
What’s the difference between an updated theme and a skin and a template? Do I understand this right that when I make changes in the build and then compile it, that creates a skin in the theme folder? Should I touch that theme folder or make changes only in the build? - Just make changes in the build folder, use npx mix --production to create minified js and css files which will directly go in to your theme folder. Don’t worry about the skins, I would ignore that feature. Mostly for people who want to build color options.
It says “to make changes in the build/assets/js/main.js file”. It has only a few import statements. What should I change there? Is it only for enabling/disabling assets or for JS code for blocks as well? - You can use the main.js for imports and for anything else custom you want to write. Here are the docs on Bedrock to help understand the imports: Concrete CMS Bedrock: A Foundation for Concrete and Concrete Themes. :: Concrete CMS These imports work in conjunction with the page_theme.php getThemeSupportedFeatures() function. In that function, you tell Concrete what assets you are providing so the CMS doesn’t load them again. I made a readme file about what these include here: https://github.com/davedew/afixia-theme-basic-bedrock/blob/master/FEATURES.md. Note this feature is not working perfectly and I’ve ran in to some bugs, to the point where I’ve had to comment out all features and all js import statements. Maybe in the next version this will all be as it should?
Where are the fonts, mobile, main, body, content, buttons now? Where are block scss files?
Please see the FEATURES.md file mentioned above, it explains what blocks are connected to what features. I might also suggest you look at the basic bedrock repo I made. It has a lot more stuff that the Atomik clone does not. https://github.com/davedew/atomik_theme_clone specifically all of the import options are in the js and scss file commented out for you to pick and choose.
@afixia , I’ve stripped content off your theme because I want to start with the pre-installed Atomik content as the basis and change that styling. Installed the theme with the bare minimum. I’ve followed the mix compile instruction on your site:
npm init -y
npm install laravel-mix --save-dev
npm install @concretecms/bedrock
Leave the webpack.mix.js and all other files alone, then run
npx mix
Everything has gone fine the 1st time. But it doesn’t compile anymore. I have not touched anything. Just ran compiling again. I get this error:
ERROR in ./node_modules/bootstrap/dist/js/bootstrap.esm.js 6:0-41
Module not found: Error: Can’t resolve ‘@popperjs/core’ in ‘/srv/www/htdocs/c9/packages/ab_lizard_theme/build/node_modules/bootstrap/dist/js’
ERROR in ./node_modules/bootstrap/dist/js/bootstrap.esm.js 6:0-41
Module not found: Error: Can’t resolve ‘@popperjs/core’ in ‘/srv/www/htdocs/c9/packages/ab_lizard_theme/build/node_modules/bootstrap/dist/js’
This command has fixed the error:
npm install @popperjs/core --save
The instructions say “mix.browserSync({proxy: ‘rock-solid.test’}); change this to whatever your local URL is”. My local URL is localhost/c9. Should this be localhost/c9.test?
Should I change “div.theme-atomik” for my theme handle in build/assets/scss/resources/_resource-detail.scss, in build/assets/scss/features/basics/_page-title.scss etc.?
What’s the ‘@concretecms’ stuff for? What’s the use of @concretecms/bedrock/assets/ and build/assets/scss/features/?
When I added a custom css class in a block, I could style it in the corresponding less files (body, main, header). Well, I see a footer and header in the build folder. But where are the body and main? Which files do I style them in?
What’s the difference between the variables, customizable-variables and shared-variables - where/when are they used?
Where do I set my fonts?
Where do I change the mobile menu?
When I go into page Edit mode I get this error:
No grid framework found. Grid area methods require a valid grid framework defined in a PageTheme class.
Adding this to PageTheme (page_theme.php) fixed the error:
Looks like there are problems with JS while editing some blocks (some buttons don’t work, saving any block throws exceptions etc.) - heaps of JS errors. Do I have to load assets? There is no app.js in the theme folder, there is no js folder there at all.
I did a bunch of updates to the Atomik Clone theme yesterday including the popperjs/core and browser sync for npx mix watch. You should be able to do an npm install after you pull the latest commits, but if you don’t want to do that, just copy the package.json file and paste over your current, then run npm install.
The instructions say “mix.browserSync({proxy: ‘rock-solid.test’}); change this to whatever your local URL is”. My local URL is localhost/c9. Should this be localhost/c9.test? - Try just localhost/c9 only include an extension if there is one. if you don’t plan on using npx mix watch, then don’t worry about this.
Should I change “div.theme-atomik” for my theme handle in build/assets/scss/resources/_resource-detail.scss, in build/assets/scss/features/basics/_page-title.scss etc.? - Your personal preference. I would say no unless you want to change the CSS calls.
What’s the ‘@concretecms’ stuff for? What’s the use of @concretecms/bedrock/assets/ and build/assets/scss/features/? - It’s supposed to load in default styles and JavaScript (if in main.js) in to your theme’s files so Concrete CMS doesn’t need to load them separately saving on additional file loads. You can read more here: Concrete CMS Bedrock: A Foundation for Concrete and Concrete Themes. :: Concrete CMS
When I added a custom css class in a block, I could style it in the corresponding less files (body, main, header). Well, I see a footer and header in the build folder. But where are the body and main? Which files do I style them in? - Your personal preference. This is just a clone of the Atomik theme. I haven’t spent much time using this to tell you where Concrete put these references. You can make new SCSS files and import them in the _common.scss file as desired.
What’s the difference between the variables, customizable-variables and shared-variables - where/when are they used? - Again, this is just me copying what Concrete made, I didn’t specify each of these. I don’t know why there is a variables and customizable-variables. They both seem to be customizable to me. shared-variables are variables shared between the two skins, default and rustic-elegance.
Where do I set my fonts? - I would do this in the _variables.scss
Where do I change the mobile menu? - Depends on how you want to change it. If by changing the PHP and HTML, you’ll want to override the top_navigation_bar found in the concrete/blocks/top_navigation_bar directory. If you want to change the styling, look in build/assets/scss/header/_top-navigation-bar.scss
When I go into page Edit mode I get this error: - I’m not receiving that, and the Atomik theme does not have this as it is defined in the: use Concrete\Core\Page\Theme\BedrockThemeTrait; but yes, I would have done the same thing if I received that.
Looks like there are problems with JS while editing some blocks (some buttons don’t work, saving any block throws exceptions etc.) - heaps of JS errors. Do I have to load assets? There is no app.js in the theme folder, there is no js folder there at all. - This I know and I do not understand why. I’m still trying to understand how we can have the same import statements and build process as the original Atomik theme yet get these errors. The only thing that fixes this is to comment out all of the JS imports in the main.js file and to comment out the public function getThemeSupportedFeatures() in the page_theme.php. If I find a fix for this, I’ll let you know, but for now, it seems like a bug on their end.
Compiled Successfully in 8536ms