I've been meaning to write up a blog post about how to go from a HTML template (purchased from a place like https://themeforest.net) to a Backdrop theme. As a developer with only a smidge of design skill, I have found this to be a workable alternative to hiring a designer for custom work.
Below you'll find a very a rough outline of the steps I follow:
- Purchase a HTML template from themeforest. (I usually look for one that uses Bootstrap 3 or 4)
- Download, and explore the theme thoroughly. There are usually lots of options!
- Select which pages/templates to use on which pages/sections of your Backdrop site.
- Adjust as necessary, creating a copy of the template files to more closely match your site's content.
- Sometimes I add or remove columns to rows, move sections around on the page, and remove elements I know I won't be using.
- Adjusting the HTML template is easier than re-arranging in the Backdrop theme, and it will give you a good idea of what works and what doesn't.
- Create a new Backdrop theme.
- Start with a blank theme (only a .info file)
- Add necessary CSS and JS assets via the info file
- Create new Backdrop layouts for each unique layout from your HTML templates.
- copy the code from the whatever.html file into your template's layout--name.tpl.php file
- delete any example content, so all that's left are the regions
- place PHP code to print Backdrop content into these regions (I copy this from a core layout)
- Via the Backdrop Layouts UI, place blocks as content.
- use the block UI to add necessary classes to blocks
- use the Views UI to add necessary classes to views
- Open your blank Backdrop site in one browser window and the HTML template in another (for comparison).
- Check the markup on your Backdrop site.
- Does it match the markup in the HTML template? (Not usually)
- Where necessary, override templates and/or theme functions to exactly match the markup provided
- I do this most often for field level templates, things like field--field-type-image.tpl.php
- The breadcrumb is a theme function that is often overriden
- If necessary, use preprocess functions to add or remove classes, or markup.
- I do this most commonly for nodes. Usually the full display mode needs special attention, and sometimes the teaser display mode also.
- As the markup starts to fall in line with the HTML template, the design will "snap" into place.
- If I'm feeling overly ambitious, I might try to only include the CSS code for the components of the theme I'm actually using -- especially if the theme is HUGE and my needs are, well, not.
Here are a few sites I've built this way: