News:

Wondering if this will always be free?  See why free is better.

Main Menu

How to Modify Themes

Started by Ahr Aitch, July 01, 2025, 07:33:57 PM

Previous topic - Next topic

Ahr Aitch

Is there an article here (or anywhere) that teaches one how to manipulate themes?

I want to learn more about themes, how they are created and modified, and even how to create them.  I have 'cloned' the SMF default theme and begun to noodle around with DevTools and VS Code to try to learn about them, but my efforts are hit and miss.  I suspect that creating themes follows some sort of pattern and structure in the CSS, but I haven't discerned the structure.  If there is any, I'd appreciate learning about it. 

I found lots of themes, but searching here an on the wider web has not turned up anything for me.

Perhaps someone who has built themes can PM me or point me in the right direction . . .  ???


Diego Andrés

The best way to get started is to use the developer tools and inspect an element of interest to identify its styling.

Then, you can proceed to make small changes to see them live. This is a good approach because traditionally the first modifications will be colors.

Once you're interested or settled on making specific changes, you can find the line you edited in the CSS files. Most of the time, it will likely be the index.css. The inspector tool will also provide the name of the file but it's not always correct because the forum might have enabled the option to minimize the CSS and JS.

As for the markup, the main wrapper elements and HTML structure can be found in the index.template.php.
Most of the time you can tell which template is loading what, just make sure to backup your file if you're planning on editing templates.

SMF Tricks - Free & Premium Responsive Themes for SMF.

Advertisement: