Initialize the site using a web browser
Customizing the Hyperion site -> Kell Robotics
Adding a custom module to display video
Putting a slideshow into the ‘header 2’ position
Customizing the FEATURED STORY module
Customizing the OUR PARTNERS module
Customizing the MAIN MENU module
Managing content to the “Information in Depth” area
Upgrading joomla, fixing security
‘images’ folder description – simplifying it to a single style
Create MySql database
Login into ‘bluehost.com’
Create database – edbarker_kr54
Create User – edbarker_ur54 GB6}XZX1rL9P
Assign user to database
Grant ALL privileges to user
Record access information
SSH ‘shell’ connection
Connect to site using SSH
Navigate to the www or public_html folder
You can ‘look around’ and navigate with the basic linux commands,
ls list contents of folder
ls –l ditto but in long detail format
cd change directory
pwd print working directory
Unzip the Joomla Hyperion quickstart installation. This package has joomla, the template, and a full sample data set for the demonstration website.
ls -l
you will now see a bunch of stuff including tgz and zip archives
unzip KEEP_THIS/Joomla_RT_Hyperion_j15
ls -l
you will now see the folder created by unzipping the archive above
Place the site
Move Joomla to kr54
Do the linux ‘move’ command
mv Joomla_RT_Hyperion_j15 kr54
ls -l
the Joomla_RT_Hyperion_j15 has been renamed kr54
move and rename commands are essentially identical
Initialize the site using a web browser
Navigate to www.edbarker.net/kr54
Run initial setup, answer question, install sample data
Database Configuration
Database type : mysql
Host name: localhost
Username: edbarker_ur54
Password: GB6}XZX1rL9P
Database name: edbarker_kr54
Main Configuration
Sitename: Kell Robotics
Your Email: localhost
Admin password: team.1311
Confirm admin password: team.1311
Install Default Sample Data ç
Installation folder removal
Connect to site using SSH if not still connected
Navigate to the www or public_html folder
Continue navigation to kr54
Remove the installation folder
Do the linux ‘remove’ command
rm –rf ./installation
View the Site
Click ‘view site’ at the step above or navigate to www.edbarker.net/kr54
The site is now setup and is identical to the Hyperion demo site at RocketTheme
Customizing the Hyperion site -> Kell Robotics
Log into the administrator screen at www.edbarker.net/kr54/administrator
On the extensions menu go to module manager
At the bottom of the screen click ‘display all’
Disable the Main Menu in the right position, and enable the one in the left position
Edit ‘Our Partners’ and place it into the left position.
Disable ALL modules EXCEPT
Featured Story
Inset Module
Inset Module
Main Menu
Module Left
Module Right
News Updates
Our Partners
Our Services
Recent Videos <- disable this one for now
Search
Top Menu
Adding a custom module to display video
At the top bar of module manager click NEW to create a new module.
Click custom_html for the module type.
In the ‘Details’ box the
module name is “Recent Videos”
position is “advert1”
In the “Menu assignment” box click ‘select from’ and mainmenu/top only.
In the “custom html” dialog click html
A popup will appear: place the following html text into the box and update/save it.
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"
width="640" height="413"><param name="width" value="640" /><param name="height" value="413" />
<param name="bgcolor" value="#111111" />
<param name="src" value="http://www.youtube.com/cp/vjVQa1PpcFN-GJKVcvfDJ_5TLB044xNDOttiYiw0lFU=" />
<embed type="application/x-shockwave-flash" width="640" height="413" bgcolor="#111111"
src="http://www.youtube.com/cp/vjVQa1PpcFN-GJKVcvfDJ_5TLB044xNDOttiYiw0lFU="></embed></object>
Save the module.
Order the advert1 modules so the Recent Videos preceeds News Updates
Configure the module so that is appears only on the home menu.
Push custom content to the website
using Filezilla push the contents of your local ‘root folder’ to the websites
root folder
Putting a slideshow into the ‘header 2’ position
ADD-ON INSTALLATION
We install a module extension called mod_rokslideshow_j15.zip
the default installation of the hyerion template does not have this thing.
click 'extension' on the menu bar, click 'install/uninstall'
click upload package file.
----------------------------------------
CREATE CUSTOM MODULE WITH THE ADD-ON
click 'extension' on the menu bar, click 'module manager'
create a new module by clicking 'new'
its type will be rokslideshow
now you should get a screen with a bunch of properties.
now you have to sort out things like whether or not your show title, position, image folder, width, height, duration and such
what is really cool about this module is it will take whatever images you plop into the images folder and display them.
1) it needs to have its own folder because it will display everything in it.
2) it is preferred to size the images exactly because it will stretch/shrink them to fit.
3) the order the slideshow goes in is alphanumerical. look at the 'chr' columns in column 2,3,4 at this website. Letter 'A' comes before 'Z' and 'Z' comes before 'a' and '3' comes before 'A'
4) the 'back end' - the computer hosting the website is linux based and filenames are case sensitive.
Parameters
Folder name is ‘slideshow’
Show title ‘no’
Position ‘header2’
Menu appearance is ONLY on main
Images directory ‘images/slideshow’
240 wide
270 tall
2500 duration
2000 transition
fading
Customizing the rokrotator
· The images used in this section live in images/site and are 469px by 170px
· Using article manager disable all articles in section news, category rotator
· Using article manager create 5 new articles in section news, category rotator
o Who We Are
o What We Do
o Why it Matters
o Our Goals and Progress
o Our Stakeholders
· Use the following html code as a template, place this in the html content portion of each article, modifying as necessary
<div class="slide1">
<div class="rotator-demo-text">
<span class="rotator-demo-header">What We Do</span>
<span class="rotator-demo-desc">Lorem ipsum dolor sit amet, ipsum dolor consectetuer adipiscing elit...</span>
</div>
</div>
Edit span.rotator-demo-header in the template.css file to adjust font sizes. Make sure to backup the template changes to your local site folder
Customizing the FEATURED STORY module
This content in located in a module, not an article
· Using the module manager open the featured story module
· Edit the content as you like
· Using media manager copy files from your local website graphics folder to the remote site folder
· The images used in this section live in images/site and are 294px by 152px
Customizing the OUR PARTNERS module
This content in located in a module, not an article
· Using the module manager open the our partners module
· Edit the content as you like
· Use the following html code as a template, place this in the html content portion of each article, modifying as necessary
<div>
<a href="http://www.ge.com">
<img src="images/my_site/sh1.jpg" border="10" align="center" /></a>
</div>
<div>
<a href="http:// www. swbg-conservationfund.org">
<img src="images/my_site/sh2.jpg" border="10" align="center" /></a>
</div>
· Using media manager copy files from your local website graphics folder to the remote my_site folder
· The images used in this section live in images/site and are 170px by 40px
Customizing the MAIN MENU module, creating two new Sections
Section Manager
Using the section manager create two new sections
· Team News
· Inventeam News
Menu Manager
· Using the menu manager open main items line on the main menu row
· Click ‘add new’ item.
· The type will be internal link->section blog layout
o Title: Team News
o Section: Team News
o Leading,intro,columns – 1, 10, 1
· Using the menu manager open main items line on the main menu row
· Click ‘add new’ item.
· The type will be internal link->section blog layout
o Title: Inventeam News
o Section: Inventeam News
o Leading,intro,columns – 1, 10, 1
Managing content
“Team News” and “Inventeam News”
Using article manager you can add articles that will appear in these areas.
“Home page”
Rework the introducing hyperion article to create our home page content
“Home page – Inset modules”
Using the module manager rework the inset modules to create home page content
Going Online
Connect to site using SSH
Take the old site offine by
mv kellrobotics kellrobotics.old
mv kr54 kellrobotics
edit the configuration.php file to correct the base url
Upgrading joomla, fixing security
If you are logged into the administrator screen then please logout.
At bluehost go to the control panel and go to ‘simple scripts’.
IMPORT the site www.edbarker.net/kellrobotics
This will setup things so that simplescripts can keep the site upgrade with security patches and other feature and make upgrade management easier.
‘images’ folder description – simplifying it to a single style
At the ‘root’ of the website folder is an ‘images’ folder containing a directory tree of stuff. The default hyperion template has a tree as follows.
Each ‘style’ has it’s own private stuff.
We are going to do two things. Modify the demo.css style sheet to point all request away from style?? to a new folder we will call ‘my_site’
------images
`-----banners
`-----front
`-----site this is the new folder to replace the style?? stuff
`-----M_images
`-----slideshow this is the new folder to support the slideshow
`-----smilies
`-----stories
| `-----food
| `-----fruit
| `-----styles
| `-----2008_CMP these are new folders to put our images for our articles
| `-----2010_EEA
| `-----Articles_1
`-----style1
`-----style10
`-----style11
`-----style12
`-----style2
`-----style3
`-----style4
`-----style5
`-----style6
`-----style7
`-----style8
`-----style9
`-----test
`-----thumbnails
`-----tutorial
| `-----logo
The demo.css style sheet lives in the ‘root’ of the website. It will need to be modified to support the new folder structure.
Team Partners
General Electric http://www.ge.com/
NASA http://robotics.nasa.gov/
Cobb EMC http://www.cobbemc.com/
SeaWorld Busch Gardens or SeaWorld http://www.seaworld.org/conservation-matters/eea/
Nypro http://www.nypro.com/
Georgia Power http://www.georgiapower.com/
WIT http://www.mywit.org/
LRIG http://lab-robotics.org/southeast/
ITT Tech http://itt-tech.edu/
Marine Biz TV http://www.marinebiztv.com/
AIAA http://www.marinebiztv.com/
Georgia Tech Research Institute http://www.oshainfo.gatech.edu/
Piedmont Park Conservancy http://www.piedmontpark.org/
Georgia Aquarium http://www.georgiaaquarium.org
ASME Atlanta http://sections.asme.org/atlanta/
GEICC http://www.geicc.org/
Johnny’s Pizza http://www.johnnyspizza.com/location-template.php?location=kennesaw/
HI Solutions http://hisolutions.net/
Modern Metals none
Georgia Department of Education http://www.doe.k12.ga.us/
Arylessence http://www.arylessence.com/
Cobb County Schools www.cobbk12.org/
CobbEdTV http://www.cobbk12.org/cobbedtv/
Random Stuff, things to know
Open another browser or browser tab and navigate to www.edbarker.net/kr54/administrator
Username: admin
Password: team.1311
Things to know, managing content:
Sections contain categories
Categories contain articles
Sections are maintained by the section manager
Categories are maintained by the category manager
Articles are maintained by the article manager
To further confuse things, some content are in containers called modules
Module characteristics and content is maintained by using the module manager
menus are maintained by the menu manager
Things to know, managing look and feel:
Joomla template is a set of files that have php scripts, html, and css style sheets. These files give the site its look and feel.
The template defines a series of location boxes.
Using the module manager you can easily move and place module location.
Using the template manager you can easily change the ‘style’ of a ‘theme’ or access the html and css style sheets to tweak the look of the site.