Monday, February 5, 2018

Gibbon 15 Installation and Customization

Are you having trouble getting Gibbon working as a localhost? (If you are not doing a local installation, the I suggest you find a web-hosting provider that has Softaculous which can automatically install Gibbon.) I find most of the online helps and explanations too difficult. Often they assume you know something that you don't. I will attempt to go through the process here in detail of how to get Gibbon 15 up-and-running on a windows 7 computer system. Please let me know if you try this and find I have left something out of if some steps are not clear or confusing.

Prerequisites- What you need!
There are different choices but I will go with XAMPP.
I went to: https://www.apachefriends.org/index.html
Here is a screen shot:


I clicked on XAMPP for Windows 7.2.1 (122.67MB) and it took about 3 minutes for me to download it. I then opened it and followed the install instructions, using the defaults. Finally open XAMPP and click start on Apache and MYSQL. For me, everything looks OK and working.

Next we need to open drive C: (your windows installation) and you should see XAMPP near the bottom. Open that folder, then open the htdocs folder. Copy your Gibbon folder into that folder. I renamed it to Gibbon15 in my case.


Next you may open your browser. I am using Google Chrome. Go to this address: http://localhost/phpmyadmin/index.php   
This should open:


Now the tricky part... if there is an easier way to do this, I don't know it. I am not sure why this process has not been made easier.
You need to setup your password permissions. (the root password for MYSQL in XAMPP)
After I had lots of trouble I found a web page that helps. If my instructions confuse you or don't work, you can read this! (link)
Here is what I did:
Click on the SQL Tab as in the window above. You will get this window. Copy the following text and paste it CTRL+V in the window.
UPDATE mysql.user SET Password=PASSWORD('password') WHERE User='root'; FLUSH PRIVILEGES;
replace 'password' with your password, example 12345
UPDATE mysql.user SET Password=PASSWORD('12345') WHERE User='root'; FLUSH PRIVILEGES;

Click GO
You should see a successful response as:


Next we have to modify phpMyAdmin configuration file.
Open C;
Open XAMPP folder
Open phpMyAdmin folder
Open config.inc.php in a test editor like wordpad
Search for the string $cfg
In the line $cfg\['Servers'\]\[$i\]['password'] = '';  enter your password, the same one you just used. Put it between the quotes
click SAVE
restart the XAMPP server program


IN your browser, go to : http://localhost/Gibbon15      (replace Gibbon15 with the name of your folder in htdocs)
ENTER
You should see this:


Change the language to your preference and click submit
You should see this:


You must enter localhost and your login information which is root and whatever password you used. You must also give a name for your database.. such as gibbon15


Success!? However.....
I had errors showing up after I clicked on the screen as well as in the trining area like this:


I found a note about this online and it seems to be about changes in XAMPP 7.2 to show errors. The easiest fix is to just change your install to production. I used development when I installed. Here is where you change it:
Go to  Admin > Sys Admin in your Gibbon interface, and under install type choose production. At the bottom click save and now it is OK!
OOPS! It has returned! While working on the logo under Admin > SYSAdmin this error showed up again but now it is gone when I return to HOME. I find this a reoccuring problem I will come back to write more about this once I find the permanent solution.

I received a fix for the problem from Sandra on the forum here. I think this is caused by some new error reporting in XAMPP 7.2 The fix is to enter a line of code in the config.php file in your Gibbon15 folder inside of htdocs. The line of text should be entered at the end of the file just before the ?> 

ini_set('display_errors', 0);

 Here is a screenshot:



CUSTOMIZING GIBBON 15
We will start with changing the logo to your own.
First we need to find where the Gibbon logo is stored. Here is the default logo in Gibbon:


I will be using photoshop. If you don't have photoshop, use another graphic editing program.
I found it stored as "logo" in the themes folder in the sub-folder default which is in the install folder you put in XAMPP>htdocs
I will open it in Photoshop and delete it and fill the file with my own design. Make sure you save it as a .png file so that transparency works

Here it is in Photoshop:
The size is 400 pixels wide by 100 pixels high
Select>all   delete
Select > Deselect
now you have a blank, sized, empty document

save it in place of the current logo file - I had trouble with this. It did not work. I ended up having to go to  Admin > SysAdmin
under Organization Settings > Logo   Put in the path. Note: It is the path only from your folder in htdocs! example: images/logo.png  I used this because I put my new logo in a folder called "images" inside the Gibbon15 folder

THEMES
Unfortunately, I think the themes for earlier versions of Gibbon will not work in Gibbon 15. At least I was unsuccessful with the attempt below. I will instead try customizing the default theme.
You can download several themes designed for Gibbon here. Once you have downloaded them, you must extract them, then drop them in the themes folder inside of your Gibbon15 folder inside of htdocs.
Next, go to Admin > Sys Admin and click Manage Themes in the right column
Select the new theme you want. (does not work- they must not be compatible with v15!)

Solution! I asked this question on the forum. There is an error in 15. You can fix it by updating the file       theme_manage.php      
It is found in this directory: modules/System Admin/theme_manage.php
You can get a copy of the fixed contents of the file here

Also ....If you extract a theme after downloading, make sure you get to the root folder. For example the theme Darkness v1.4.01. You must copy-over the folder "Darkness" inside the folder or it will not be recognized.

Then, go to Admin > System Admin . Click Manage Themes on the right menu. You should see your new theme listed. Click the + sign to install.


Finally, set the new theme to active by clicking the button under active .. and click Submit.

Notice: Any customization you made will not carry -over tot he new theme.

Next changing to a custom background (your own)

Go to preferences on the home screen and enter a URL for the new background.
Alternately I tried to replace the backgroundPage file inside the default themes folder but still not working... until I restarted my computer or cleared my browsing data in Chrome.




Next we will change the bottom text.

The bottom text which starts with "Powered by Gibbon" can be changed by opening the index.php file found in your Gibbon15 folder inside of htdocs. Open it with Wordpad, do a search for the word "powered" then play with modifying the text...
Here is the original text:
</div>
<div id="footer">
<?php echo __($guid, 'Powered by') ?> <a target='_blank' href="https://gibbonedu.org">Gibbon</a> v<?php echo $version ?><?php if ($_SESSION[$guid]['cuttingEdgeCode'] == 'Y') { echo 'dev';} ?> | &#169; <a target='_blank' href="http://rossparker.org">Ross Parker</a> 2010-<?php echo date('Y') ?><br/>
<span style='font-size: 90%; '>
<?php echo __($guid, 'Created under the') ?> <a target='_blank' href="https://www.gnu.org/licenses/gpl.html">GNU GPL</a> at <a target='_blank' href='http://www.ichk.edu.hk'>ICHK</a> | <a target='_blank' href='https://gibbonedu.org/about/#ourTeam'><?php echo __($guid, 'Credits'); ?></a><br/>

Legally I don't know what you are supposed to keep from this. I am going to just add the name of my system at the begiing for now. To do that I just added what I wanted before the word Powered, then save it and refresh your site.

Changing the Bottom LOGO

There is a Gibbon logo at the bottom right. The way to do this is similar to what you did to change the top logo. The original file is found at: 
C:\xampp\htdocs\Gibbon15\themes\Default\img
It may look invisible to you because it is a white monkey on a white background. I suggest the same or replace it with a  .png file of your design or choice.
I am having the same problem as with changing the background. Even though I replaced the file and restarted the server.. the change does not show up until I restart my computer or cleared my browsing data in Chrome.