Let's start by logging into our cPanel.

1. Upload the compressed ZIP file to your root directory or subdirectory (folder).

In my case I uploaded the files to a subdirectory name "4". However, this tutorial shows a typical root directory installation.

2. Now extract the files to your chosen directory

 

3. Follow the Joomla installation instructions step-by-step

4. Fill in the database configuration information

Typical Configuration

Database Type: mysql

Host Name: localhost

Username: dbprefix_username

Password: your chosen password

Database Name: dbprefix_dbname

5. FTP Configuration - Click next. You can skip this step for now

6. Main Configuration

1. Enter Site Name, Email address and password (admin). These can all be changed later

Initial user name: admin

Password: admin

2. Do not install the SAMPLE DATA

3. Click Next

7. Go back to your cPanel and remove the installation folder

8. Your Joomla is setup and ready to GO...

9. To log into the administration backend go to:

http://www.yourdomain.com/administrator

10. Change your user name and password from "admin"

HOW TO JUICE IT UP

This tutorial is going to be a bit different than the previous tutorial where Dreamweaver was used. Instead, I will be making all the changes via the cPanel and Joomla's administrator panel.

Why?

Well, not everyone has or wants to use Dreamweaver.  Furthermore, this tutorial demonstrates how simple and inexpensive it is to build and customize a Joomla powered website.

Enjoy!

This is the design we will be working towards.  Later, I will show you how to download the source files.

Designed by J.F. Herrera © 2010

Jungle Woman by iStockPhoto

Menu icons by WebDesignerDepot

Lets Get Started

THE BACKGROUND IMAGE

1. Log into your cPanel

1. Go to public_html/templates/foto_plazza/images

2. Upload the new background image

3. Log into your Joomla backend

1. Go to Extensions >> Template Manager >> foto_plazza
2. Click on the Style icon
3. Update the Background Image Path by changing only the file name
4. Change the Background color from #000000 to #FFFFFF
5. Change the Logo Text to your CUSTOM TEXT

4. Go back to your cPanel (*Optional - this is not necessary for all backgrounds. I did, so the design would show better)

1. /public_html/templates/foto_plazza/skeletons/skeleton1/style.php
2. Click "Code Editor" button to edit the php file

a. On line 36 change "no-repeat bottom fixed" to "no-repeat fixed left top"

E. Refresh your sites home page to make sure the new background loads correctly.

This is how my home page looks so far.

TOP MENU

The top menu was hard coded into the skeleton.php file, so we will have to edit file via our cPanel's Code Editor.

 

1. Upload your new menu image (e.g. top_menu2.png) to

/public_html/templates/foto_plazza/skeletons/skeleton1/images

TIP: You can view an image by double clicking the image icon, then select "Open with" and click OK when prompted.

2. Go Up One Level to

/public_html/templates/foto_plazza/skeletons/skeleton1

1. Select style.php and click Code Editor to edit the php file
2. Scroll down to line 191
3. Change bgtpshortcut.png to your new file name. In my case I will change it to top_menu2.png.
4. *Optional - Adjust the menu icon position. For example, in my case I changed the tpshortcut-7 position from -336px to -280px, on line 336
5. Delete #222 from lines 195, 198, 201, 204, 207, 210 and 213. Save Changes. Continue editing style.php
6. Remove the black border by deleting "border-right: 1px solid #000;" from line 182. Save Changes. Continue editing style.php

3. Upload your new menu hover image (e.g. top_menu2_hover.png) to

/public_html/templates/foto_plazza/skeletons/skeleton1/images

4. Continue editing style.php. This will show a new hover image when the mouse pointer hovers over the icon. Starting on line 214 replace the following:

#tpblock-horizontal-panelmenu li a.tpshortcut-1:hover,
#tpblock-horizontal-panelmenu li a.tpshortcut-2:hover,
#tpblock-horizontal-panelmenu li a.tpshortcut-3:hover,
#tpblock-horizontal-panelmenu li a.tpshortcut-4:hover,
#tpblock-horizontal-panelmenu li a.tpshortcut-5:hover,
#tpblock-horizontal-panelmenu li a.tpshortcut-6:hover,
#tpblock-horizontal-panelmenu li a.tpshortcut-7:hover {
background-color: #333;
}

with

#tpblock-horizontal-panelmenu li a.tpshortcut-1:hover {
background: url(http://cdn.templatejuice.com/skeletons/skeleton1/images/top_menu2_hover.png) 0 0 no-repeat;
}
#tpblock-horizontal-panelmenu li a.tpshortcut-2:hover {
background: url(http://cdn.templatejuice.com/skeletons/skeleton1/images/top_menu2_hover.png)-56px 0px no-repeat;
}
#tpblock-horizontal-panelmenu li a.tpshortcut-3:hover {
background: url(http://cdn.templatejuice.com/skeletons/skeleton1/images/top_menu2_hover.png) -112px 0 no-repeat;
}
#tpblock-horizontal-panelmenu li a.tpshortcut-4:hover {
background: url(http://cdn.templatejuice.com/skeletons/skeleton1/images/top_menu2_hover.png) -168px 0 no-repeat;
}
#tpblock-horizontal-panelmenu li a.tpshortcut-5:hover {
background: url(http://cdn.templatejuice.com/skeletons/skeleton1/images/top_menu2_hover.png) -224px 0 no-repeat;
}
#tpblock-horizontal-panelmenu li a.tpshortcut-6:hover {
background: url(http://cdn.templatejuice.com/skeletons/skeleton1/images/top_menu2_hover.png) -280px 0 no-repeat;
}
#tpblock-horizontal-panelmenu li a.tpshortcut-7:hover {
background: url(http://cdn.templatejuice.com/skeletons/skeleton1/images/top_menu2_hover.png) -336px 0 no-repeat;
}

5. Replace the "Click to scroll" image. Go back to

/public_html/templates/foto_plazza/skeletons/skeleton1/images

1. Upload click_to_scroll.png or your own image

6. Go back to style.php

1. Change line 238 from "background: url(http://cdn.templatejuice.com/skeletons/skeleton1/images/clicktoscroll.png) no-repeat;" to "background: url(http://cdn.templatejuice.com/skeletons/skeleton1/images/click_to_scrolll.png) no-repeat;" and save.

BOTTOM MENU

Now let's work on the bottom menu. The bottom menu has various css files to go along with its respective menu type. The demo setup uses dropxtd.css, which we will now modify.

1. Lets begin by editing the file by going to folder:

/public_html/templates/foto_plazza/skeletons/skeleton1/css/tpmenu

1. Select dropxtd.css and click Code Editor to edit the file

   TIP: You can use the search function available through the Code Editor or use Firefox search. Lets try the Code Editor search, just to stick with the tools available directly through your hosting account.

   

2. Go to lines 234, 238, 241, 244, 247, 250, 253, 256 and 259, and change from "background: #111;" to "background: url(http://cdn.templatejuice.com/skeletons/skeleton1/images/footer_menu_bkg.png) repeat-x;"
3. Delete line 235

2. Upload image footer_menu_bkg.png or your own image to

/public_html/templates/foto_plazza/skeletons/skeleton1/images

This image will repeat along the x axis of your menu

3. Now lets change the menu hover image

1. Start by uploading image footer_menu_hover_bkg.png to the previous image folder
2. Next modify line 270 of dropxtd.css. Change from " background-color: #000;" to "background: url(http://cdn.templatejuice.com/skeletons/skeleton1/images/footer_menu_hover_bkg.png) repeat-x;"
3. Save and check your work by reloading your site's home page

4. Second level list background color change on dropxtd.css

1. On line 43 change #0000 to #666
2. On line 375 replace "background:url('http://cdn.templatejuice.com/images/shadowblue75.png') #6B60C8;" with "background-color: #999999;"
3. Go to line 161 and change #cc0000 to #a4c639;

LOGO

Changing the logo is probably the easiest mod to do. The easiest way to do this is to simply name your image file logo.png so it replaces the current logo.png file when its uploaded.

1. Upload a new logo.png file

2. Go to line 275 of style.php and change 475px to 600px

Header Module Position (Box 1)

1. Log into you Joomla Admin panel and change the header position module by uploading a new banner or other image

2. Insert "border: solid 1px #dbdbdb;" into line 141 of style.php, to add a light border to the scrolling boxes.

4. Go to line 19 of the same page and change "color: #404040;" to "color: #666666;"

5. Go to line 553 and change the color to #333

Box 2

1. Using the Joomla backend, edit the current module contents. Click the image button below the text editor and upload photolog_banner.png to replace the current image photolog_banner.png. Click save to exit

Main Content - In Box 2

1. Upload the new bgleadarticle.png to

/public_html/templates/foto_plazza/images

This will replace the current image file that displays as the lead article background, from black to blue.

2. Go to

public_html/templates/foto_plazza/css

1. Open file joomla.css
2. Go to line 258 and change the color from #fff to #333
3. In the same file go to line 520 and change from #E9AE74 to #a4c639 This will change the authorline font color

3. Leading article background images. Go to

/public_html/templates/foto_plazza/images

1. Upload bgtitledate.png,
2. Go to

   public_html/templates/foto_plazza/skeletons/skeleton1

   1. Open file style.php
   2. Change line 372 from "padding: 5px 8px;" to "padding: 5px 9px;" this will add padding so the background image displays correct
3. Upload pdf_button.png, printButton.png, and emailButton.png to the previous images folder



This is how box 2 should look at this point

4. Contnue with style.php
   1. Change line 371 from "#fff" to "#333"
   2. Save
5. Change the "READ MORE..." background color

1. Go to line 332 of current style.php file and change "#333" to "a4c639"
2. Go to line 632 and change the background color to "#cffeff1"
3. On line 638 change the color to "#a4c639"

BOX 3

Because box 3 is a portfolio module I feel that it is important that it stays black. Any other color will detract from the featured images. For this reason we are only changing the banner, which is a custom module, so changing it is as easy as uploading your new image.

1. Via your joomla backend, find module position user1 "MyPortfolio" and upload the new image by clicking on the image icon that is just below the text editor. Upload and insert the image.
2. Save to exit.
3. Reload your site and double check your changes.
4. One more change. Go to

   public_html/modules/mod_tpgallery/assets/style.css

   1. On line 108 change "#fff" to "#666"
   2. On line 111 change "#cc0000" to "#cfeff1" This will change the hover color from red to light blue.

This is how it should look thus far...

BOX 4

1. Jump down to line 526 of

public_html/templates/foto_plazza/skeletons/skeleton1/style.php

1. Change the font color from #666 to #fff
2. On lines 527 and 530 change "#252525" to "#a4c639" This will change the title background from black to green
3. Button text - Go to line 553 and change from "#333" to "#fff"
4. Button background - Go to

   public_html/modules/mod_tploginxtd/assets/css/colorbox.css

1. On line 234 change from "#000" to "#666"
2. Hover color - On line 243 change from "#cc0000" to "#999"

1. Go to your module manager via your Joomla admin panel.
   1. Find the module titled "About Me"
      1. Upload author.png to replace the current file with the same name
      2. Save to exit

Here is a glimpse of how box 4 should look.

BOX 5 - Banner Slide

Other than uploading your own banners which should measure 640px X 382px, there is not much to do except change the red dot that indicates the active slide.

1. Via your cPanel go to

   /public_html/templates/foto_plazza/images

   1. Upload btpslideactive.gif. That's it!

BOX 7 - Other

1. Change the h3 font color
   1. Go to public_html/templates/foto_plazza/skeletons/skeleton1/style.php
   2. On line 484 change change the color from "#ccc" to "#666"

1. Go to /public_html/templates/foto_plazza/images
   1. Upload badgenew.png

Here is a snapshot of the updated module position

Content

"Before" screenshot of the content page before we modify it. The default skeleton is skeleton2

Top Menu

1. /public_html/templates/foto_plazza/skeletons/skeleton2/css/tpmenu/dropxtd.css
   1. Go to line 83 and change from "#000" to "#414141". Changes the second level dropdownl background color.
   2. Line 123 change from "#ffffff" to "#666"
   3. On lines 465, 471, 477, 483, 489, 495, 507 and 513, replace "background: #111; border-right: 1px solid #000;" with "background: url(http://cdn.templatejuice.com/skeletons/skeleton1/images/footer_menu_bkg.png) repeat-x;". This will change the background color from black to the green fade image background.
   4. Go to line 535 find "background-color: #000" and replace with "background: url(http://cdn.templatejuice.com/skeletons/skeleton1/images/footer_menu_hover_bkg.png) repeat-x;" This changes the hover color from black to a gray fade background button.
   5. Go to line 167 and change from "color:#cc0000" to "color:#fff". Also, change the font weight from "700" to "bold"
   6. Go to line 745 and replace "background:url('http://cdn.templatejuice.com/images/shadowblue75.png') #6B60C8;" with "background-color: #999999" This change affects the hover color of the dropdown menu items.
   7. Go down to line 841 and 843, replace "color:#feea08; font-weight:700;" with "color:#ffffff;
      font-weight:bold;" To change the active menu item text color to white.

   

   The updated top menubar

Logo

Surprisingly, we need to upload a second copy of the logo we used for skeleton1. Not sure why, but I will trust the developer TemplatePlazza on this.

1. Upload a copy of your logo (logo.png) to

   /public_html/templates/foto_plazza/images

   

   As you can see we need to make some adjustments to the logo position.

2. Fire up you Joomla admin panel, if you havent already. Go to

   Extensions >> Template Manager >> foto_plazza

   1. Click "Style"
      1. Select the "Left" radio button. This will float the logo left, like the home page.
      2. Change "Block HEAD Height" from 25 to 45
      3. Change "Logo Box Width" from 280 to 650
      4. Click save to update and exit
3. Log into your Cpanel and go to:

   public_html/templates/foto_plazza/skeletons/skeleton2/style.php

   1. On line 132 change the height from "100px" to "120px"

Here is the finished logo mod.

Breadcrumb

Almost done! Just a few more items to change and you will have a completely Juiced Up template!!!

1. Go to public_html/templates/foto_plazza/css/joomla.css
   1. On line 280 change from "background:#111;" to "background:#A4C639;" This modification changes the breadcrumb background from black to green.

   

   Updated breadcrumb.

Footer Menu

1. Go to public_html/templates/foto_plazza/skeletons/skeleton2/style.php
   1. On line 73 change "background:#111" to "background:#A4C639;"

   

Newsfeeds

Next, we will edit the newsfeeds (com_newsfeed) section.

1. Go to

   /public_html/templates/foto_plazza/skeletons/skeleton2/style.php

   1. On lines 420, 622, 624 and 627 channge "background:#212121" to "background:#A4C639" This edit changes the background color of the newsfeed header and right module box from black to green.

      

      All we need now is to change the grey text "RIGHT" to white

   2. Now lets change "color:#666" to "color:#fff" on line 623 This mod will change the text color of "RIGHT" from grey to white.

The News

Lets double check the other pages to make sure we haven't missed anything. Guess what! We have...

You will notice that the changes are similar to the changes we did to the skeleton1 css file.

Notice we need to fix the date text color.

1. Continue editing the same style sheet.
   1. Go to line 467 and change the text color "color:#fff" to "color:#333", just like we did to skeleton
2. Now lets edit the "READ MORE..." background color on this same page

1. Go to line 425 and change "background:#333" to "background:#A4C639" This mod will change the background color from black to green.

That's it! I hope you had fun and learned something!!!

TAKE A LOOK AT THE LIVE SITE

The source files should be up in the next few days.