Whats the best approach to modify a theme?

[jesusfj710]

Hello everyone

I found myself using Top theme. However, I wanna modify or add new blocks. What should be the best approach?

Should I fork the Top theme, then point my project to that one instead? How should I do that in that case. I understand that I could use --theme, but not sure if how, since there it not that much documentation about...

[oscarotero]

Hi Jesús.

I need to add some documentation to the TOP theme and probably make some changes to make the customization easier.

For now, this is what we have:

• If you want to customize the styles, just edit the file styles/theme.css to override the default styles and configure the theme variables (colors, typography, etc).
• If you want to change the html code generated by an existing block, you have to download the template file in local and change it. For example, to edit the faq block, create locally the file _includes/blocks/faq/faq.vto and edit it. Lume will use this file instead of the remote file of the theme.
• If you want to add new blocks, the theme is not ready for that yet. It's possible to create the new block folder in _includes/blocks/ but there's no way (for now) to configure the CMS to show the new block in the block selector. So the only way is forking the theme and add the new block there. Once the block is created, you have to do the following to use it:
  • Update the _cms.ts config to load the new block: https://github.com/tarugoconf/top/blob/main/_cms.ts#L21
  • Update the main styles file to import the styles of the new block: https://github.com/tarugoconf/top/blob/main/src/styles/main.css#L19
  • If you think the new block can be useful for more people, please do a Pull request :)
  • That's all, I have to implement a way to load new blocks dinamically without need to clone the source repo, but for now it's the only way.

[jesusfj710]

Hey Oscar,

Thanks for the quick and complete reply. I think I will definitely modify one of the blocks a bit and add other fields.

It's just for fun, but I have previously used HUGO to make my personal blog and I'm considering migrating it to Lume with some of the themes I've learned about thanks to seeing TOP.

I'm sure when I start making my personal blog/page I'll find that I need to modify some of the blocks and I'll make an alternative theme.

Thank you very much again for the reply because you have certainly answered my doubts.