| Fruit Basket |
| Club Template Tutorials |
|
Below is a list of tutorials that will instruct you on how to install and use the FruitBasket template from JoomlaPraise. This tutorial covers how to change pre configured Template Themes for the FruitBasket template.
OverviewFruitBasket is the March template from JoomlaPraise. The template is like most JoomlaPraise templates and focuses on design more than web tricks. This template features PraiseSlides, the JoomlaPraise module that utilizes Mootools function to display content as a Newsflash module would but presents it in a more attractive fashion. You have the option to choose from any section or category of content items. Installation 1.0To install the FruitBasket template go to http://yourdomainname.com/administrator
Once your here enter your username and password and login to the back end of your site.
After logging in you should see the control panel.
Once your here use the top menu and navigate to Installers>Templates Site
Next, browse for the jp_fruitbasket_1.0.zip file you downloaded from JoomlaPraise and click Upload File & Install.
You will be taken to the Template Manager of the back end and will now see that jp_fruitbasket_1.0 is a template option.
Parameters 1.0.xTo change the template parameters for Joomla! 1.0.x install simply use the top menu and navigate to Site>Template Manager>Site Templates
Next you will see the list of templates you have to choose from.
Click the radio button to the left of the template named jp_fruitbasket_1.0 and click the Edit HTML found in the top of the back end.
Next you will see a list of 8 variables that you can change.
Customizing Themes 1.0.xTo change the template theme for Joomla! 1.0.x install simply use the top menu and navigate to Site>Template Manager>Site Templates
Next you will see the list of templates you have to choose from.
Click the radio button to the left of the template named jp_fruitbasket_1.0 and click the Edit HTML found in the top of the back end.
Next you will see a list of 8 variables that you can change. In the $default_style variable change "theme1" to "theme2".
Refresh your site from the frontend and you will see that the template is now the "Pineapple" theme.
Customizing Width 1.0.xTo change the template width for Joomla! 1.0.x install simply use the top menu and navigate to Site>Template Manager>Site Templates
Next you will see the list of templates you have to choose from.
Click the radio button to the left of the template named jp_fruitbasket_1.0 and click the Edit HTML found in the top of the back end.
Next you will see a list of 8 variables that you can change. In the $custom_width variable change "" to "90%".
Refresh your site from the frontend and you will see that the template now has 90% width.
Show/Hide the Top Banner 1.0.xTo show/hide the top banner area for Joomla! 1.0.x install simply use the top menu and navigate to Site>Template Manager>Site Templates
Next you will see the list of templates you have to choose from.
Click the radio button to the left of the template named jp_fruitbasket_1.0 and click the Edit HTML found in the top of the back end.
Next you will see a list of 8 variables that you can change. In the $showBanner variable change "yes" to "no".
Refresh your site from the frontend and you will see that the template hides the top banner area. You can also accomplish this by not publishing modules in the "user4" module position.
Custom Colors 1.0.xTo customize colors for Joomla! 1.0.x install simply use the top menu and navigate to Site>Template Manager>Site Templates
Next you will see the list of templates you have to choose from.
Click the radio button to the left of the template named jp_fruitbasket_1.0 and click the Edit HTML found in the top of the back end.
Next you will see a list of 8 variables that you can change. In the $heading_color, $font_color, $link_color, $linkhover_color, and $background_color variables enter hexadecimal values. Remember that their is no need to type the pound(#) sign.
Refresh your site from the frontend and you will see that the template colors have changed for the headings, links, font, and background.
For more information on changing graphics for the template click here. Sample Client UsageIn this portion of the tutorial we will explain how to customize the entire template using a fictitious company. Our fictitious company has supplied us with a logo and a style guide to help us in the creation of their new website.
First thing we want to do is edit the colors of the website. We'll start by changing the custom color variables in the backend of the template. In your index.php file you want to edit the html and change the colors to match the style guide that has been supplied.
I've changed the custom color variables to match more closely to the style guide provided.
The resulting changes should look like this. The background, font, heading, and link colors have all changed.
Next we need to modify the graphics to solidify the site. Our first step is to change the background image for both the header and the footer. Open up the "header_source-bg.png" and "footer_source-bg.png" files provided in the template downloads area. You will need Adobe Fireworks to change these files. Edit these accordingly and you should have resulting files "header-bg.gif" and "footer-bg.gif".
Overwrite the files on your Joomla website and refresh the page. Were almost done!
Next, open the source file named "fruitBasket_source.png". You will have a file with slices already named for exporting.
Change the file accordingly and export your new images. Once you overwrite on your Joomla site you will be one step closer to finishing.
Finally we need to change some css. Navigate to the css file in templates/jp_fruitbasket_1.0/css/theme1.css we are using theme 1 but make sure you edit which theme you specify in the index.php file. For our example we edited the css file from this..... #header-border{ To this... #header-inner{ Of course their are several other ways of changing the css to your own specifications. So do what suits your needs.
|
