The right way to edit themes

[Madal]

So i have recently got into Invision Community platform, as we all here are. I am one of those many  who has no knowledge on coding or building an online community, so I try really not to rush and try to make right choices long term. On my research to do so I have ran into very basic problem in my head.

We all would like our community to look certain way - design wise. The default theme of IC is actually looking very decent. There are also many themes on the marketplace to choose from. But there is always something "wrong". I personally would like to have a really clean theme, with only necessary elements. As a beginner I tried to overcome this problem by buying a theme on the marketplace and editing it by deleting certain elements by editing html. And it worked to some extent.

But as I understand editing html is not a solution as it will cause problems when i need to update the theme from the developer release for example !? So the right and issue-free way would be edit the theme with CSS instead, right? Or perhaps I am getting it all wrong from the beginning?

Thanks for your time !

[TAMAN]

40 minutes ago, Madal said:

So i have recently got into Invision Community platform, as we all here are. I am one of those many  who has no knowledge on coding or building an online community, so I try really not to rush and try to make right choices long term. On my research to do so I have ran into very basic problem in my head.

We all would like our community to look certain way - design wise. The default theme of IC is actually looking very decent. There are also many themes on the marketplace to choose from. But there is always something "wrong". I personally would like to have a really clean theme, with only necessary elements. As a beginner I tried to overcome this problem by buying a theme on the marketplace and editing it by deleting certain elements by editing html. And it worked to some extent.

But as I understand editing html is not a solution as it will cause problems when i need to update the theme from the developer release for example !? So the right and issue-free way would be edit the theme with CSS instead, right? Or perhaps I am getting it all wrong from the beginning?

Thanks for your time !

edit the theme with css only if possible and use the theme custom.css template for everything or create a custom css template in the same custom category 

your custom css templates wont change during ips updates or theme updates 

 

[Ehren]

I typically suggest a Parent/child setup, since it allows you to easily compare your customized theme with an untouched one.

To do this, install a 3rd party theme onto your site. Next, visit the Themes page in your Admin panel, click the "edit/pencil icon" next to the theme and tick "None" under the "Available for" option. This will hide it from your members, which is intentional. This theme is referred to as the Parent theme. You should never edit this theme (no code changes, no setting changes, etc), just keep it untouched.

Next, visit the Themes page again, but this time, use the "Create New" button to create a new theme. Select the "Manual mode" option and click Next. Type in a name for your theme, and in the "Parent" dropdown, select the 3rd party theme which you just installed. Press Save.

Doing this will create a "Child theme" which is basically a clone of your Parent. You can edit the Child by visiting the Themes page, and then expanding the Parent, which will reveal your Child. The benefit with this setup is that you can now edit your Child theme and easily compare it to the Parent by using the "Compare with parent" option (by clicking the cog icon at the top right of the code editor). Also, when reverting the code, it'll revert it back to the Parent code instead of the default Invision code.

When you need to upgrade the theme, you should upgrade the Parent theme. You can then use the "compare tools" to manually upgrade your Child theme - or even revert it back to the "unmodified 3d party code", and then reapply your code changes from there. Whatever's easier.

It's a slightly confusing process to type out and explain, but it's very straightforward once you've tried it yourself - so maybe give it a go!