Converting an HTML Template into Concrete5 Theme
Most designers tend to lean towards well known CMS as Joomla, WordPress, rather than choosing something unknown to them. Don’t change the way you work as you will now be able to convert your HTML into concrete 5 themes within a few minutes.
The tutorial of how to ‘concerte- ize’ an HTML theme based site underlies below:
- After turning off the caching in the Dashboard, find your favorite HTML theme (build by yourself or another designer)
- Create a directory in the webroot/ theme/ application/ directory and create a thumbnail. Png file of it.
- Create another .txt file along with the description and title on it.
- After copying your theme’s assets into the directory go into the dashboard and wait for the installation block to show up. Dashboard > Pages and Themes > Themes
- After the installation is complete activate the theme from Theme dashboard page. But don’t get too worried if it’s still blank. It’s blank as you still haven’t created any templates.
- Irrespective of the theme you choose, there is one file which is common to every theme, default.php. Its mainly used when a file in the theme’s directory matching the template’s handle cannot be found.
- If default is not available, then copy the index.html of Urbanic and change it to default.php.
- If you load the page after this, then assets will be missing even though the contents will show up, as it’s not the right places for them to show up.
- Copy the css, fonts, js, images directories into the theme’s directory and then go to default. Php and prefix all the available CSS and src calls.
So:
src=”js/file.js”
Becomes
src=”<?php echo $view->getThemePath()?>/js/file.js”
After this add required PHP to both the header and the footer of the page
Add:
<?php Loader::element(‘header_required’)?>
In the HEAD tag and remove the title
Add:
<?php Loader::element(‘footer_required’)?>
Towards the end, before closing the body tag.
You will find the Concrete 5 edit bar after you refresh the page. Now you require to add a container DIV around the content in the page, so that the panels will be able to shift the content around, as per requirement. Mention the class, which remains
<div class=”<?php echo $c->getPageWrapperClass()?>”>
Fix the CSS issues if noticed that the theme conflicts with the concrete5 theme. Creating editable areas is possible now. Replace some content which you were about to remove with this:
<?php $a = new Area(‘Area Name’); $a->display($c);?>
Follow the aforementioned steps to successfully Convert an HTML Template intConcrete5 Theme or you may simply hire experienced and professional Concrete 5 developers from PHP Programmers to achieve success smoothly for your upcoming project at an affordable cost..
You are good to go!