Streaming live at 10am (PST)

Easy Webflow to Joomla for Blog capability


#1

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:

  1. Xampp 1.8.2 (Download link: https://www.apachefriends.org/download.html), or anything else you like
  2. Joomla 3.3 (I'm using the latest as I wrote this. Download link: http://joomlacode.org/gf/download/frsrelease/19393/158832/Joomla_3.3.0-Stable-Full_Package.zip )
  3. Helix sample export website made with Webflow (Download link: https://webflow.com/pricing/sampleexport )
  4. 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 )
  5. 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 smile

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

Content part

Footer part

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:

  1. Open Module Manager

  2. Create New module

  3. Choose Custom HTML

  4. Type 'helix-header' for module name/title

  5. Toggle editor window so it shows only code instead of WYSIWYG then paste header-part code there

  6. Hide module title

  7. Choose 'position-0' for this module position, ignore the fact it has 'Search' name on it

  8. Click 'Menu Assignment' button and set Module Assignment to 'On all pages'

  9. 'Save & Close' it

  10. 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

V. Hide Page Heading on Home menu

'Home' page heading shows as default. We need to hide it.

  1. Open Menu Manager

  2. Select 'Home' menu to open it

  3. Click 'Page Display' and click 'No' for 'Show Page Heading'

  4. 'Save & Close'

VI. Creating Blog page

This will be done by create a blog menu from Joomla Administrator - Menu Manager

  1. Open Menu Manager

  2. Create 'New' menu

  3. Type 'Blog' for 'Menu Title' and select 'Menu Item Type' by clicking 'Select'

  4. From 'Articles', select 'Category Blog'

  5. Check your result and 'Save & Close' when finish

Your blog page anyway has no style on it. You can play to style it in webflow and find what class articles uses by using chrome dev or firebug.

I may post my own article style in future post smile

Cheers


How to convert static site to Joomla?
#2

Wow, thanks for the super detailed Webflow to Joomla instruction !


#3

Your welcome smiley


#4

Super awesome! Thanks for sharing!


#5

Grrrreat. Except "easy".


#6