Easy Webflow to Joomla for Blog capability

pastiwibawa · June 11, 2014, 4:05am

Hi all.

I have converted Helix website to Joomla to have it Blog capability. It is actually pretty easy. I hope it’s helpful.

I. Pre-requisite

I made this on my local. So to start, here is what you need:

Xampp 1.8.2 (Download link: Download XAMPP), or anything else you like
Joomla 3.3 (I’m using the latest as I wrote this. Download link: Official Joomla! Language Packages )
Helix sample export website made with Webflow (Download link: https://webflow.com/pricing/sampleexport )
JCE content editor alternative for Joomla. The reason I use JCE is I am sure it won’t strip any code I put on Custom HTML. (Download link: https://www.joomlacontenteditor.net/downloads/editor/joomla-3 )
Text editor. I use sublime. It will save my text file in UTF-8.

OK. First. I assume you all are familiar to prepare Joomla on Xampp, but basically things need to be done are as listed below:

a. Installing Xampp
b. Setting Joomla website
c. Set beez3 as default template site
d. Installing JCE for Joomla
e. Set JCE as Joomla default editor

When you finished setup things above, here is file and folders you need to pay attention:

Notes: I setup my joomla website at joomla33 folder

C:\xampp\htdocs\joomla33\templates\beez3\index.php

C:\xampp\htdocs\joomla33\images
C:\xampp\htdocs\joomla33\templates\beez3
C:\xampp\htdocs\joomla33\templates\beez3\css
C:\xampp\htdocs\joomla33\templates\beez3\images
C:\xampp\htdocs\joomla33\templates\beez3\javascript

Unzip Helix sample export file (helix.webflow.zip) somewhere so you will have files/folders as below:

D:\helix.webflow
|index.html
|css
|images
|js

OK. If you have all those things setup, here is the main part.

II.A. Rename (or delete if you want) Beez3 css, images and javascript folders

C:\xampp\htdocs\joomla33\templates\beez3\css → css-Org
C:\xampp\htdocs\joomla33\templates\beez3\images → images-Org
C:\xampp\htdocs\joomla33\templates\beez3\javascript → javascript-Org

As you might guess it has not to be css-Org

II.B. Copy Helix css and js folders and Paste into beez3 folder

D:\helix.webflow\css → C:\xampp\htdocs\joomla33\templates\beez3
D:\helix.webflow\js → C:\xampp\htdocs\joomla33\templates\beez3

So you now has beez3 with helix css and js folders.

II.C. Image files trick

For images we called from .css file, it needs to be available at C:\xampp\htdocs\joomla33\templates\beez3\images.
And for images we called from Custom HTML module, it needs to be available at C:\xampp\htdocs\joomla33\images

So the easiest way here is to copy all images to Joomla images folder:

D:\helix.webflow\images*.* → C:\xampp\htdocs\joomla33\images

And to copy images folder to beez3 template folder:

D:\helix.webflow\images → C:\xampp\htdocs\joomla33\templates\beez3

This way you won’t have broken images.

III. Modifying beez3 index.php file

Open C:\xampp\htdocs\joomla33\templates\beez3\index.php with your text editor and replace all its content with this codes below: (download modified index.php file from here, rename your beez3 original index.php file and copy this file to beez3 folder)

<?php
/**
 * @package     Joomla.Site
 * @subpackage  Templates.beez3
 * @copyright   Copyright (C) 2005 - 2014 Open Source Matters, Inc. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

// No direct access.
defined('_JEXEC') or die;

JLoader::import('joomla.filesystem.file');

// Check modules
$showRightColumn = ($this->countModules('position-3') or $this->countModules('position-6') or $this->countModules('position-8'));
$showbottom = ($this->countModules('position-9') or $this->countModules('position-10') or $this->countModules('position-11'));
$showleft = ($this->countModules('position-4') or $this->countModules('position-7') or $this->countModules('position-5'));

if ($showRightColumn == 0 and $showleft == 0)
{
	$showno = 0;
}

JHtml::_('behavior.framework', true);

// Get params
$app				= JFactory::getApplication();
$doc				= JFactory::getDocument();
$templateparams		= $app->getTemplate(true)->params;
$config = JFactory::getConfig();

?>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" >
<head>
  <meta charset="utf-8">
  <title>Helix</title>
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/normalize.css">
  <link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/webflow.css">
  <link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/helix.webflow.css">
  <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js"></script>
  <script>
    WebFont.load({
      google: {
        families: ["Open Sans:300,400,600,700,800", "Bitter:400,700"]
      }
    });
  </script>
  <script type="text/javascript" src="https://use.typekit.net/kvb3ukh.js"></script>
  <script type="text/javascript">
    try {
      Typekit.load();
    } catch (e) {}
  </script>
  <link rel="icon" type="image/x-icon" href="https://y7v4p6k4.ssl.hwcdn.net/placeholder/favicon.ico">

</head>
<body class="w-clearfix">

<!-- include position-0 module for header -->
<jdoc:include type="modules" name="position-0" />

<!-- Start ContentArea -->
<div id="<?php echo $showRightColumn ? 'contentarea2' : 'contentarea'; ?>">

	<!-- include position-1 module for content -->
	<jdoc:include type="modules" name="position-1" />

		<jdoc:include type="component" />

</div> <!-- end contentarea -->

<!-- include position-9 module for footer -->
<jdoc:include type="modules" name="position-9" />

  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/webflow.js"></script>

<jdoc:include type="modules" name="debug" />
</body>

I make notes for few things down here but you can request for more detail explanation if you need and I will try to make it on next post.

Notes:
A. <?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?> added before css and js folder. It basically create a path to our active template.

	<link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/normalize.css">
	<link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/webflow.css">
	<link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/helix.webflow.css">

	<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/webflow.js"></script>

B. you can see we use helix body class so it will be sure it has right style/layout

C. beez3 has some positions defined for Joomla modules that here we use for few parts of our page:

	<jdoc:include type="modules" name="position-0" /> we use it for Header
	<jdoc:include type="modules" name="position-1" /> we use it for Content
	<jdoc:include type="modules" name="position-9" /> we use it for Footer

Later we will copy-paste helix header, content and footer into Joomla custom-html modules so it will show to each position respectively.

D. this where our article will show for the blog

<jdoc:include type="component" />

IV. Create Header, Content and Footer custom-html modules

Here is screenshots and each text files for each part of code from Helix index.html file you have to copy-paste into Joomla custom-html module.

Header part

Header part793×674 76.2 KB

Content part

798×600 76.4 KB

Footer part

793×676 85.7 KB

Notes: You might noticed that I have added ‘Blog’ link already into header-part.txt so we can open our blog page.

Follow these steps to create custom-html module:

Open Module Manager
Create New module
Choose Custom HTML

695×559 48.8 KB
Type ‘helix-header’ for module name/title
Toggle editor window so it shows only code instead of WYSIWYG then paste header-part code there
Hide module title
Choose ‘position-0’ for this module position, ignore the fact it has ‘Search’ name on it

1247×628 75.6 KB
Click ‘Menu Assignment’ button and set Module Assignment to ‘On all pages’
‘Save & Close’ it
Create next two Custom HTML module with this these information:

Content part:
→ Name/Title: helix-content
Show Title: Hide
Position: position-1
```
   Menu Assignment:
    -> Module Assignment: Only on the page selected
       Menu Selection: Main Menu > Home 
```

> Footer part:
	-> Name/Title: helix-footer
	   Show Title: Hide
	   Position: position-9

	   Menu Assignment:
	    -> Module Assignment: On all pages