Jump to content

Welcome, Guest!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

  • 0
hollymcr

Getting started on custom theme

Question

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?

 

Share this post


Link to post
Share on other sites

6 answers to this question

Recommended Posts

  • 0

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!

  • Like 2
  • Thanks 1

Share this post


Link to post
Share on other sites
  • 0

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

Share this post


Link to post
Share on other sites
  • 0

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!

Share this post


Link to post
Share on other sites
  • 0

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!

 

 

Share this post


Link to post
Share on other sites
  • 0

 

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

 

Share this post


Link to post
Share on other sites
  • 0
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 by cienislaw

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...