, including the background, click the download button at the end of this tutorial.
Lets start by thanking nattu for making this beautiful picture available on Flickr.
After a little Photoshop magic, we arrive at the following background for this template.
Before we go on let me mention that there is a minor typo in the templateDetails.xml file.
The TPF should not be capitalized. Once you do that, it everything should work just fine. If you access the file via your cPanel's html editor it should be line 67. Except for this change, I will be editing the files with Dreamweaver. The lines referenced in these instructions should be right on or within a line or two.
Change it to
LOGO
I prefere to upload my images using the Joomla backend. In this example the logo will be uploaded to images/stories/ folder.
To do this you need to add a few "../" and stories/ to the background image location. I entered the following to make it work:
../../../../../images/stories/pier.jpg
If you decided to upload to the images folder included with the template, just change the name of the file and that should work.
Next change the background color to #0099ff
Edit Menu
Upload the tjblue_box.png to the images folder
Then update the skeleton2, skeleton2, or skeleton3.css.php file by replacing bgtpblock-head.png with tjblue_block.png. You can update all three files if you like, in case you decide to change the skeleton in the future. The quickstart file uses skeleton3 as the default skeleton.
You can find the mentioned php files in templates >> hotel_plazza >> skeletons
Replace Logo
Next we will replace the current logo with one of our own. Upload your logo to the previously mentioned images folder found in the hotel_plazza folder. Make sure you name the file logo.png, so no further editing is required.
Changing the menu font and color
This should be straight forward. This can be done via your Joomla backend template manager. However, if your current Joomla install is located in a sub-folder, you will need to edit the params.ini file directly by loging into your cpanel's Code Editor.
The juiced up template uses Liberation Sans.
To edit the active menu item color edit line line 797 of the dropxtd.css file located in
templates >> framework >> dynamic >> css >> menu
Change to #EEEEEE
Next change the color of the dropdown menu by replacing the shadow75.png. This file can be found in the template's images folder
Note the dark image has been renamed to shadow75_2.png. If you decide to go back to dark, remember to rename it to shadow75.png
Next lets change the menu dropdown hover color. In this case lets edit the css file.
Update the current entry found on line 709 of the dropxtd.css file. Change it to shadowblack75.png and upload the corresponding image file. Also change the background color to #666666.
<< Just to the left of this text is an image sized 2x2 named shadowblack75.png it looks like a comma
Next change the link hover color on the dropdown menu
Update lines 165, 315 and 603 - change from #CC0000 to #99CC00
BODY
Lets begin by editing the breadcrumb background.
background: url(../../images/green60.png) repeat;
Also, change line 553 from color: #FFF: to color: #333;
Almost forgot to change the tag line that is front and center, which states "We have the best room rates"
First upload a new banner to the banners folder via your admin backend. Then go Components >> Banners, find the slide1 slide and update it so it displays the correct banner. You also have an option of creating a new banner, but for now this is faster and easier.
First box "Find Locations" (user11)
Go to skeleton3.css.php line 1207 and replace the current entry with this "url(../../images/shadow50.png) repeat;"
Room Types Box Module (user12)
Update line 1213 of skeleton3.css.php to "background: url(../../images/fuschia60.png) repeat;"
Upload image fuschia60.png to the images folder in the hotel_plazza folder
TESTIMONIALS
Change the color from #CCC to #333
Update the current entry on line 1107 of skeleton3.css.php to " background: url(../images/badgetop60.png) bottom center no-repeat;"
Change line 1087 to "padding:10px 0 20px 0px;"
Upload badgetop60.png to the template's images folder
Shown here with a #CCC background and scaled down to fit this page
Next
Update line 1137 of skeleton3.css.php to "background: url(../../images/white60.png) repeat;"
Upload white60.png to the template's images folder
Shown here with a #CCC background
Add "margin-bottom:15px;" to skeleton3.css.php line 1109;
FOOTER
Change "background:#5B5497;" on line 97 of skeleton3.css.php to "background: url(../../images/shadow50.png) repeat;"
There is no need to upload shadow50.png because it was uploaded earlier.
Update the footer copyright info
Go to templates >> hotel_plazza >> skeletons >> css >> skeletons and edit skeleton3.php
You will find the current content at about line 809
To change the current icon, just update the name of the currennt icon to whatever you name your icon. Upload your icon image to the template's images folder.
To change the current link color to green enter "color: #99CC00;" on line 130 of skeleton3.css.php
RIGHT FLOATING MENU
The only thing we will change here is the hover color. Lets change it from red to # 99cc00.
Go to modules >> mod_tploginxtd >> assets >> css and edit colorbox.css
On line 485 change #CC0000 to #99CC00
BLUE BOX
Back to skeleton3.css.php line 1222 update it from "background: #8193ed;" to "background: url(../../images/blue60.png) repeat;"
Upload blue60.png
INNER PAGES
To change the modify date link color go to joomla.css found in skeletons >> css. Change line #1089 to #333
OTHER LINKS
To change the link color of the newsfeed and other section links go to line 1041 of joomla.css and change "color: #E9AE74;" to "color:#333;"
Hover Links
Now lets change the hover link color corresponding to the links we just modified. Continue with joomla.css, change lines 865, 975 and 1057 to #99CC00
Lets not forget to change the component heading background color, currently set to a deep red #B00303. Go to line 783 of skeleton3.css.php and update it to "background: transparent url(../../images/blue60.png) repeat;"
Leading Article
Update the leading article background color, text color and link colors.
Start by changing the current background color from #CA0909 to something softer like #EFEFEF on line 485 of joomla.css.
515 of joomla.css from #FFF and delete
959 of skeleton3.css.php from #FFF to delete
