CodeSublime PSD to Wordpress Contest Giveaway

reADactor — Tue, 10 Nov 2009 07:35:28 +0000

Given that this is such a unique giveaway, you need to do something different than the traditional comment/tweet to win type thing. For this contest submit your designs to be judged by a group of five designers, with the top design getting the prize. Your site design can be for an upcoming project, or something from scratch that you think up just for this contest.

All submissions must be in no later than January 4, 2010 to be considered. Their is no limit to the number of submissions you can make. Read more about contest.

WordPress theme to Joomla template

reADactor — Sun, 25 Oct 2009 13:00:18 +0000

I am using for this tutorial a free WordPress theme found here from Premium Themes.

Download and unzip the file in your computer. I assume that you have already the Joomla! 1.5 installed on your local machine or on server. Now, browse in your Joomla installation after “template” folder.

PART 1: Setting the basics of the Joomla template

Here is what you need to create in this template folder:

- a new folder: bizfresh.

Inside to the new created bizfresh folder create:

- a new folder: css;
- a new folder: images;
- an index.php file;
- a templateDetails.xml file (if the WordPress pull the template info from the css file, Joomla use a special xml file for that);
- a png screenshot of bizfresh template (140px x 142px) named “template_thumbnail” what will be used by Joomla template manager;

Like you can guess, all this WordPress theme structure will get into a single index.php file.

The structure of the index.php will for the moment like any ordinary html file, with head and body tags. Open the index.php from Joomla template folder and place the following code before the tag:

In the tag add this code

Now, open your xml file and paste this:



BizFresh
24/10/09
Your Company Name
Copyright © 2009 yourwebsite.com. All Rights Reserved.
office@yourwebsite.com
http://www.yourwebsite.com
1.0
Joomla Template

index.php
template_thumbnail.png


css/style.css

With this files done, you can go to your Joomla administration panel on templates extension: meniu / extensions / template manager / site

Select the BizFresh template like “default”. Click on “preview” to see “the big white”. I really cannot write those words without to put in playlist “Getting Away With It” . You just set the basics of the Joomla Template.

PART 2: Compile the WordPress template files

Instead to open each file of bizfresh WordPress template (in case you are not an old chinese man with writing on grain of rice skills), install the template on your WordPress installation and open the website. In your browser click on “view” tab menu and click on “source”. From there, select all the code between the body tags. Paste the code inside of your index.php body tags. Now, is time for cleaning. Delete all the headings and paragraphs tags along with any form code found. You should remain just with the div structure of the html page.

PART 3: Integrate the Jdoc statements

Jdoc statements are included in every Joomla template and indicate where the output from other parts of Joomla or its extensions should be positioned in the overall web page. The statement is a Joomla! template’s method of displaying content specific to the page being viewed. There are various statements, each returning a different part of a Joomla! page. The type attribute specifies the type of content to be rendered in place of the element. For example, the statement uses the type attribute head (type=”head”). (Note: Jdoc expressions require double quotes around attributes, and won’t work with single quotes). To read more about jdoc statements, click here.

We will use in this tutorial just 2 attributes: “component” and “modules“. But, before to make any changes to the index.php file, is important to know what module or component is need to be placed and where. In our case, the position of modules look something like that:

After placing the Jdoc expressions in right places, your index.php file will look like:




title; ?>

Magic, isn’t it? Just few lines make the Joomla template to work like a WordPress one. Now, on preview you can see at this moment just a mess. That is because no style sheet is applied to the index.php file. To fix that, copy the style.css file from folder of BizFresh WordPress theme in the css folder of the Joomla BizFresh template, and insert this line before the end of head tag of Joomla index.php template file:

Test your Joomla website. Probably you are wondering now why the css style isn’t working 100%, except the colors and positions of divs. You need to make a correction to the relative paths of the images used in css style file. Open the css in your editor and place “../” in front of each “image/” path. Test your website. You should see now all the graphics used for backgrounds, div etc.

PART 4: Joomla skinning

At this step you need to go again in your Joomla administrator panel and create the modules for “user 1,2, 3″, “copyright” (custom html modules), and set the position for mainmenu on “menu”, after that copy the module and set the position to “bottom”. Don’t forget the search module. Create it and place it in “top” position. Test the website. You are not quite happy right? The tab menu still not show instead you have a list type menu and the search form is away from how suppose to look.

In Joomla each menu have a default list setting. What menu list style use the WordPress template? Browse the page with FireFox and use an add-on to see the css code of tabs (Firebug). Seem that the ID for div and li is “nav”. Keep that in mind and go in Joomla administration panel to the menu module and set it like in following images:

Test the website. You have now tab image on menu but labels goes wrong. In the style.css file on line 301 to the “#nav” add this lines:

padding:12px 12px 6px 12px;
font:bold 14px Arial, Helvetica, sans-serif;
color: #fff!important;
text-transform:uppercase;

Test the website. Now the labels on menu are ok positioned but have wrong colors and text decoration. Look after line with number 314 in same style.css file, on “#nav .page_item a” and add “!important” to the “text-decoration”. You have now “text-decoration: none!important;”. Fix the span style with the following code:

#nav span {color:#fff;}

All look now ok, except there is a green underline for labels. Go to the begining of your css style sheet and looking after “a {”, on line 14. Change the text-decoration to “none”. Test the website. All are ok. Navigate. Now you see that the active tab from menu doesn’t have a blue image like in WordPress. To correct that, go to line number 336 from style.css file on “#nav li.current_page_item {”. Change this line with “#nav li#current {”. For a menu with more tabs, change the width of #navi to 620px. You are done now with the menu.

To have the “user” module looking like in WordPress version you need to add H3 css style to each one:

#aboutus h3 {
-x-system-font:none;
border: none;
color:#A8F179;
font-family:Arial,Helvetica,sans-serif;
font-size:22px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:bold;
line-height:normal;
margin:0 0 18px;
padding:0;
}

#subscribe h3 {
-x-system-font:none;
border: none;
color:#A8F179;
font-family:Arial,Helvetica,sans-serif;
font-size:22px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:bold;
line-height:normal;
margin:0 0 18px;
padding:0;
}

#mostpop-Post h3 {
-x-system-font:none;
border: none;
color:#A8F179;
font-family:Arial,Helvetica,sans-serif;
font-size:22px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:bold;
line-height:normal;
margin:0 0 18px;
padding:0;
}

What about the search field? The skinning of this part involve some light alteration of the mod_search module. You’ll find in the tutorial source template the mod_search folder skinned like in the WordPress template version. You need to replace the old mod_search module from your Joomla folders with this provided.

With testking 70-290 tutorial, learn all about web designing from WordPress themes to Joomla templates. Download testking 70-646 tutorials and testking 1Y0-A05 study guide to become expert in web designing/development.

Download this free Joomla template:

Credits for BizFresh remain to the Premium Wordpress Themes. Downloading this Joomla template you are agreed with Premium Wordpress Themes license terms found in the original WordPress theme pack.