Migrating a site from Joomla 1.5 to Joomla 1.6.1
This article outlines some of the things we had to do to move our website from Joomla 1.5 to Joomla 1.6.1. It is based on our personal experience of doing this so there might well be an easier way of getting a particular thing done. If so, please let us know.
Summary
Joomla 1.6 makes a big move to a new JAT3 framework. So it is not a simple one-click upgrade especially if you have a customised template as we do on the openba website. Lots of things are not quite the way they were and there are certainly bugs. However, we like the power of Joomla and are happy to work through the issues as the product progresses. We use several Joomla plugins. This article is in no way saying that these are the best or the only plugins to use. They just happen to be the ones we use.
Editing works best in Chrome rather than IE or even Firefox.
Step 1
Download Joomla 1.6.1 from http://www.joomla.org/download.html and do the typical installation of Joomla.
Step 2
Download ja purity II template from http://www.joomlart.com/forums/downloads.php?do=cat&id=402 and the file ticked in the image below.
After the download completes. Do the typical installation of the template, component and the plugin.
How to change the Logo image and the header image
- Go within the template directory (Ja-Purity II) to the Images directory.
en Delete the Following Files in the images directory:
◦ logo.gif
◦ logo.png
◦ header3.jpg
- Then copy the following in the images directory:
◦ Your new logo as – logo.gif and logo.png (both of these would be the same logo)
◦ Your new header as – header3.jpg.
- Within the images directory open another directory named header.
en Delete the Following Files in the header directory:
◦ header1.jpg (Leave header2.jpg and header3.jpg in the directory)
- Then copy the following in the header directory:
◦ Your new header as – header1.jpg (Leave header2.jpg and header3.jpg in the directory)
How to change the header background
- Go into the template directory (Ja-Purity II) and open the directory named css.
- Open the css named template.css and change the following code:
#ja-header { background: #000000; position: relative; z-index: 10; }
Change background to the colour you want.
How to change the templates width
- Go within the template directory (Ja-Purity II) and open the directory named css.
- Open the css named layout.css and change the following code:
.main { width: 90%; max-width: 100%; margin: 0 auto; position: relative;}
Change width to desired template width and change max width to set the maximum width of the template (Normally 100%).
How to change the header-mask from a picture to a colour
- Go within the template directory (Ja-Purity II) and open the directory named css.
pen the css named template.css and change the following code:
#ja-header .main .main-inner1{
background: #58575C;
margin-left: 0px;
margin-right: 0px;
}
Change background from a picture link to the colour desired.
How to change the logo size
- Go into the template directory (Ja-Purity II) and open the directory named css.
- Open the css named template.css and change the following code:
h1.logo { height: 79px; width: 432px; }
Change the height and width to match the pixels of your logo image.
- Secondly change the next piece of code:
h1.logo a {
background: url('/../images/logo.gif') no-repeat left;
display: block;
height: 79px;
width: 432px;
}
Change the height and width to match the height and width you changed previously.
How to change the left column to use the same javascript as right column does
- In the Joomla back-end yoursite/administrator
o to the Template manager.
- Click on ja purity ii – Default
- Click on the Layouts tab and then click on the Edit button next to Default.
hen change the following code:
<block name="left1">left</block>
Change the above code to:
<block name="left1" style="jarounded">left</block>
How to remove the white clear box below article headings
- Go within the template directory (Ja-Purity II) and open the directory named css.
- Open the css named template.css and change the following code:
.article-tools {
background: #f6f6f6;
border: 1px solid #ddd;
clear: both;
color: #999;
display: block;
line-height: normal;
margin: 0 0 10px;
padding: 5px;
position: relative;
}
change the above code to:
.article-tools {
clear: both;
color: #999;
display: block;
line-height: normal;
margin: 0 0 10px;
padding: 5px;
position: relative;
}
How to change side column heading colours
- Go within the template directory (Ja-Purity II) and open the directory named css.
- Open the css named template.css and change the following code:
div.ja-module h3, div.module h3 {
border-bottom: 1px solid #ccc;
color: #EE8700;
font-size: 115%;
font-weight: bold;
margin: 0 -15px 10px;
padding: 8px 15px;
text-transform: uppercase;
}
Change color to the colour you want you headings to be.
How to change on menu clicked colour
- Go within the template directory (Ja-Purity II) and open the directory named css and then open the directory named menu.
- Open the css called mega.css and change the following code:
.ja-megamenu ul.level0 li.active.active {
background: url('/../../images/grad1-mask.png') repeat-x top #EE8700;
}
Change the color code to the colour you want the on clicked menu colour to change to.
How to add an iframe into your site
- Download the plugin for iframe
- Enable the iframe as you would normally enable a plugin in Joomla.
- Add the following code into an article to add the iframe:
{iframe}url{/iframe}
How to make the middle column align equally with the side columns
- Go within the template directory (Ja-Purity II) and open the directory named css.
- Open the css named template.css and change the following code:
.leading {
padding-bottom: 10px;
padding-top: 0px;
border-bottom: solid 1px #ccc;
}
Change padding-top to 0px.
- Then in the same css file change the following code:
.article-tools {
clear: both;
color: #999;
display: block;
line-height: normal;
margin: 0 0 0px;
padding: 0px;
position: relative;
}
Change padding to 0px.
- Then in the same css file change the following code:
.column p, .column pre, .column blockquote,
.column h1, .column h2, .column h3, .column h4, .column h5, .column h6,
.column ol, .column ul { margin: 0px 0; padding: 0; }
Change padding to 0.
- Lastly in the joomla root directory go to plugins/system/jat3/jat3/base-themes/default/css/
- Open the css named template.css and change the following code:
.items-leading { padding-top: 0px; }
.items-leading .leading { padding-bottom: 10px; }
Change padding-top to 0px.
How to remove the line under the main leading article
- Go into the template directory (Ja-Purity II) and open the directory named css.
- Open the css named template.css and change the following code:
.leading {
padding-bottom: 10px;
padding-top: 0px;
border-bottom: transparent;
}
Change border-bottom to transparent.
How to add a youtube videos to the site
- Download Jplayer plugin
http://vault.futurama.sk/joomla/download-jplayer
- Enable the jplayer plugin as you would normally enable a plugin in Joomla.
- Add any youtube video to your article with the following code:
{youtube}IU7YDr50vB4{/youtube}
How to add normal videos to the site
- Download Easy embed video plugin
- Enable the Easy embed video plugin as you would normally enable a plugin in Joomla.
- Add the video as a normal link
eg. http://vimeo.com/1084537
How to change a table layout borders
- In the joomla root directory go to plugins/system/jat3/jat3/base-themes/default/css/
- Open the css called addons.css and change the following code:
table {
border-spacing: 2px 2px;
empty-cells: show;
}
Change border-spacing to 2px 2px to give you a double border.
- Then in the same css file change the following code:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 1;
outline: 0;
font-size: 100%;
background: transparent;
}
Change border to 1 to give you a border.
