Thumbnail
Theme Designer

Developed by

Expert
Expert

All sites start off with a design. That design, mostly made in PhotoShop and saved as a .psd file, will be translated to HTML/CSS. But what do you with these .html and .css files, how do you turn that into a theme with a nice package, working together with concrete5? Of course, there’s the programming way. But since not all of us are developers, why not have a form you fill in and let something else generate that for you (based on your HTML template that is)?

So let me be clear here: You start off with an HTML template, either downloaded or provided by your developer (or created by yourself even). See BootstrapMade for example for free downloadable templates! There are loads of other (free) template sites of course.

This is how Theme Designer is developed to be. There are a few steps you follow every time creating a new theme:

  • Input a “Name”, “Handle” and “Description” for the theme (text inputs) and optionally select a Grid Framework (it’s advised to actually select one, ask your developer if you don’t know if you have Bootstrap2/Bootstrap3 or Foundation used in your template);
  • Each template should have a “<head>” section, which starts with “<head>” and ends with “</head>”. Copy everything in between and paste that into the “Header” elements text area;
  • Same goes for footer. Mostly a footer is called “<footer>” or “<div class=’footer’>”. Copy everything that belongs to the footer UNTILL the closing “</body>” tag and paste that into the “Footer” elements text area;
  • Archive every css/img/js/fonts (and maybe other) directories that are assets, used by the template. Make it a .zip file (so not a .rar file) and call it “assets.zip” or “template-assets.zip” or whatever name is obvious for you to choose later and select it under the “Zipped Files” file-selector;
  • By default there is already a “Page Template” made for you (with the “default” handle), adding only a “Main” area. In case you need more styling (HTML), you can wrap that around this (or even add more areas in case you need them). Also feel free to add more Page Templates of course;

That’s about it for the bare minimum of creating a theme from a template. The package is being created along with the needed files. You only need to navigate to “Extend concrete5” and click “Install” behind the package name (listed under “Awaiting Installation” at the bottom of this page).

Watch the tutorial video now!

Of course, there are many more settings available for the “more professional users” – or for those that need more things added to the theme. You are able to give the package a different name, instead of naming it the same as the theme for example. Same goes for the handle, description and many MANY more options. Think of creating Block Templates for your breadcrumbs for example, using the default “Auto-Nav” Block Type. Or some nice social links template, using the “Social Links” Block Type included in the core of concrete5.

To those familiar with concrete5 theme development already, this Add-On comes in handy too (also for those die-hard developers). You can always load back in your configuration once installed and overwrite files even when installed. So, you created the theme and forgot some things/elements or maybe you want to remove bits and pieces? No problem. Load it back in, make your changes and set the “Delete all existing theme files with the entered handle” value to “Yes” to actually delete the theme files and overwrite them with new ones according to the values you filled in into the form.

This Add-On makes developing AND editing themes, created with Theme Designer, really easy. However, it can not do everything for you. Fill in the form correctly, copy/paste the things you need and make your block types. This Add-On, nor the developer, is responsible for half-completed themes, non-working themes, destroyed webpages/sites or anything alike. The result all depends on how the form is filled in and what is being copied/used from the HTML/CSS template you want to convert.

Current Version: 0.9.1
Fully Translatable: No
Needs External Libraries: No
Compatible 5.7.3.1+
License: Standard
Support Response: Replies to tickets every few days.
Support Hosted: On concrete5.org
Needs extra server permissions: No
Needs Internet: No
Marketplace Tests:
Passed Automated Tests
Passed PRB Review