Getting started on custom theme

[hollymcr]

What's the best way to get started on a custom theme?

I spent some time today starting here without success - a lot seems to have changed since it was written and I don't know enough about gulp or the code using it to get past it.

I'm not looking for anythying complicated, is it better to just hack an existing theme? What is a good simple theme to get started with?

 

[Traumflug]

Forget the decoration, neither GitKraken nor PHPstorm are necessary.

To get started, copy one of the themes:

cd themes
cp -rp community-theme-default my-new-theme

Which one doesn't matter. Both are technically almost the same, just (S)CSS is quite distinct.

Then edit config.xml inside the new theme with your favorite code editor (vi, nano, geany, gedit, sublime, whatever):

cd my-new-theme
geany config.xml

Edit fields name and directory in the upper few lines. Each appears twice. Name is arbitrary, directory should match the actual directory. Save the file. Why these edits are necessary? Well, PrestaShop decided it this way 10 years ago and changing this would easily break existing themes.

At this point you can install the theme already. It'll look like the one you copied, but it's the new one.

Then you can build the theme:

npm install
npm run compile-css
npm run format-js
npm run copy-index
npm run clean-up

First command is needed only once, second command is the essential one, the other ones are tidying up code a bit.

As you didn't change anything yet, a new build shouldn't change anything.

Now you're ready for editing the theme. Template file (.tpl) file edits take effect immediately. JavaScript files as well. Just reload the page in your browser and the change is there.

Regaring CSS: don't edit .css files, but the .scss ones. After each edit, rebuild the theme, then reload the page in the browser.

At this point you're in the middle of development already. Cheers!

[hollymcr]

Thanks, that means I was starting in pretty much the right place.

Should I use the community theme from 1.1.0 or the latest in git? I had more success in my first attempts (based on the linked howto) with the git version, but can I assume I can ignore the various warnings and deprecations? (That seems to be where git has fewer issues.)

I just tried following through your instructions using 1.1.0:

• npm install leaves me with 32 vulnerabilities
• npm run compile-css gives me an error in plugingupl-notify (not found: notify-send)
• npm run copy-index gives me a long list of ERROR: ENOENT: no such file or directory, lstat 'index.php.copy

Are all those errors/warnings OK or does that mean something is broken?

Doing the same on current git:

• npm install - no vulnerabilities
• npm run compile-css OK
• npm-format-js: Error: missing script format-js
  Looking in ackage.json I guessed that maybe this should now be lint-js instead, which does run but with 757 errors...
• npm run copy-index gives an error: "TypeError: fs.copy is not a function"

Neither feel like they "worked".

This is on Ubuntu 20.04.1

[Wartin]

Hello.

I don't know about those errors because I just edited custom CSS and template files of Niara theme.

But I wanted to write that there is this modded community theme too, that you could want to see to start your modifications:

https://forum.thirtybees.com/topic/4011-community-theme-modded/

There are some mods in the forum too, like '3 step checkout' thread, or search with product images. These are not modules, but changes you have to do.

Good luck!

[hollymcr]

I just tried community-theme-modded.

npm run lint-js now gives: Error: No ESLint configuration found

Copying .eslintrc.js from the community theme lets it run, generating 764 errors...

I'm sure once I get to the point I can actually start everything will get easier!

 

 

[datakick]

 

39 minutes ago, hollymcr said:

I just tried community-theme-modded.

npm run lint-js now gives: Error: No ESLint configuration found

Copying .eslintrc.js from the community theme lets it run, generating 764 errors...

I'm sure once I get to the point I can actually start everything will get easier!

 

 

you can safely ignore linting warnings for now.

For development, all you need to do is install dependencies:

npm install

This also installs gulp. You can then run it like this:

./node_modules/.bin/gulp

Gulp will watch your sass files, whenever you change any, it will automatically compile them to css on the fly.

That's all there is, really

 

[cienislaw]

On 7/31/2020 at 3:34 PM, datakick said:

you can safely ignore linting warnings for now.

but those are not warnings but errors - is there a solution to this? im trying to properly modify Niara theme and seeing a bunch of errors doesn't help the process.

ok, I've educated myself and indeed those errors can be ignored (assuming that JS code in repo is working in 101%), but would be nice to have build process error and warning free (low priority).

Edited August 6, 2020 by cienislaw

[Obi]

Why do developers insist on incorporating unecessary layers (in this case a sass compiler), in this case gulp?
I mean, I get including a library that offers lots of shortcuts to code functions, etc., but all Sass does is require conversion into CSS, so why not learn CSS and write the darned code in the core interpreted language instead of adding another essentially useless compile layer (as I understand this methodology)?

So I guess my question is, how can all of the Sass/Gulp related files be removed from the template?

Edited October 3, 2022 by Obi

[datakick]

12 hours ago, Obi said:

Why do developers insist on incorporating unecessary layers (in this case a sass compiler), in this case gulp?
I mean, I get including a library that offers lots of shortcuts to code functions, etc., but all Sass does is require conversion into CSS, so why not learn CSS and write the darned code in the core interpreted language instead of adding another essentially useless compile layer (as I understand this methodology)?

So I guess my question is, how can all of the Sass/Gulp related files be removed from the template?

reusability, single point of configuration, browser compatibility, ....

You can, of course, build your own theme with vanilla css. 

[Obi]

I'm having trouble finding where the $css_files array gets populated - can someone point me to the php file please?

Thanks

[yaniv14]

classes/controller/FrontController.php

classes/controller/FrontController.php

 

[Obi]

On 10/10/2022 at 12:27 AM, yaniv14 said:

classes/controller/FrontController.php

classes/controller/FrontController.php

 

Thanks - I thought adding at line 1078 and copying to the /override/classes/controller/ location would do the trick, but my custom css file is not getting loaded.

        // Added custom stylesheet here to insure it is last to load - OBI
		$this->addCSS(_THEME_CSS_DIR_.'dws-custom.css', 'all');

This is what I am using to load that stylesheet - I've aslo checked to make sure the dws-custom.css file is located in the /themes/themename/css/ directory and it is there - can you tell me what I'm doing wrong?

Edited October 11, 2022 by Obi

[vallka]

I personally fear node.js and trying to avoid using it at all costs. The alternative is a command-line 'sass' tool, advised by ChatGPT:

>The simplest Sass compiler is likely the command-line tool called "sass." It can be installed via the command line and is used to convert Sass files (with the .sass or .scss file extension) to CSS files. For example, to convert a file called "styles.scss" to "styles.css", you would run the command "sass styles.scss styles.css". It is also possible to use it in watch mode to automatically update the css file whenever the sass file changes.

>You can use the --output or -o option to specify the directory where the CSS files should be generated. For example, if you want to output the CSS files to a directory called "css" that is located in the parent directory of your Sass files, you can use the following command:

>sass --output ../css input.scss:output.css
 

This helped me a lot! Thanks ChatGPT!

And there is even better solution (as for myself)

Live Sass Compiler for VSCode:

https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass

 

Fortunately for me, TB do not mess up with putting all javascripts together, so no reason to worry about them. They just work as they are :) Not as in PS1.7

 

[Obi]

On 10/11/2022 at 8:56 AM, Obi said:

Thanks - I thought adding at line 1078 and copying to the /override/classes/controller/ location would do the trick, but my custom css file is not getting loaded.

        // Added custom stylesheet here to insure it is last to load - OBI
		$this->addCSS(_THEME_CSS_DIR_.'dws-custom.css', 'all');

This is what I am using to load that stylesheet - I've aslo checked to make sure the dws-custom.css file is located in the /themes/themename/css/ directory and it is there - can you tell me what I'm doing wrong?

Posting the answer to my question so it will hopefully help someone else with a same/similar issue:

Code comments should answer any questions about where and what...

        // Execute Hook FrontController SetMedia
        Hook::exec('actionFrontControllerSetMedia', []);

        // Added custom stylesheet here to insure it is last to load - Obi
        // module css files still load after this - not sure where
        $this->addCSS(_THEME_CSS_DIR_.'dws-custom.css', 'all');

        $this->addSyntheticSchedulerJs();
        return true;
    }