Change/Add Metro Theme colours

The recommended method of customizing your AppGini-generated application is through hooks. But sometimes you might need to add functionality not accessible through hooks. You can discuss this here.
Post Reply
User avatar
shasta59
AppGini Super Hero
AppGini Super Hero
Posts: 231
Joined: 2013-01-08 19:40
Location: Calgary, Alberta, Canada

Change/Add Metro Theme colours

Post by shasta59 » 2013-01-19 22:17

While the default colors in Metro are fine you may wish something different to more align with your situation.

Here is how I edit the metro.css file and the home.php file to change the colours. (Yes this is sort of in the last forum but I am covering off both the css and php file here).

The metro.css file is where the colours are stored. In order to have new colours you have to edit this file by adding more colours. Open up metro.css using your favourite text editor. Look for the following in the metro.css file:

.whitebg{background-color:#fff} - this should be around line 15. The bg letter at the end tell you it is a background file.

After the last } press return to create a new line and add in your own colours. It is important you have a '.' at the beginning of the line. For a listing of the colour for the common crayons go to:

http://www.colourlovers.com/web/blog/20 ... -fun-facts

You will see a listing of the colour name, then the colour value in Hex. Copy or record the hex value and the colour name and then create a new line like the following: (make sure you put in the bg so it matches the other code line to be consistent)

.shamrockbg{background-color:#45cea2}

Case is not important but again, to be consistent I would recommend keeping it lower case. Add as many as you wish and save the file. Make sure each one is on a new line. You will need to upload this file to your webserver to replace the existing metro.css file. (In case you make a mistake backup all files before changing.)

You are just about done. All that is left is to add your colour to the home.php file.

Open up home.php and look for the following lines starting around line 13

$classesFirstBlock = 'two-v orangebg';
$classesFirstBlockText = 'white';
// class(es) of other blocks
$classesOtherBlock = 'one bluebg';
$classesOtherBlockText = 'lightgray';


Above this is a list of background colours and text colours. You can add your new colours in if you wish, to this list, for easy reference.

If we wish to use the new background colour shamrock.bg we just need to change the above to the following as seen below: (changes are in red)

$classesFirstBlock = 'two-v orangebg';
$classesFirstBlockText = 'white';
// class(es) of other blocks
$classesOtherBlock ='one
shamrockbg';
$classesOtherBlockText = 'lightgray';


Make sure you save your file and then upload it to your server. Again, make backups before making any changes.

If the text colour does not look right you may need to change that also. If you are not sure how to do that post a note and I will put up instructions. However if you look at how the background colour is changed the same thinking is used for the text colour.

I have one site that changes themes on its own based upon date. For Christmas it had a red/green/white theme and will switch that out for a Valentine's day theme on Feb 1 then after that a spring based colour theme etc. I have added code to check the date and then pick a theme based upon the date. I cannot upload those instructions as a client paid for just that look and as a result my agreement with him gives him exclusive to the code for about another 1.5 years. But I am sure others can easily figure it out.

Enjoy

Alan
Calgary, Alberta, Canada - Using Appgini 5.50 -

luisymari
Posts: 1
Joined: 2013-01-22 04:38

Re: Change/Add Metro Theme colours

Post by luisymari » 2013-01-22 04:46

Hi Can you clue me in as to how to change the text color as you've mentioned in this post?

benzoD
Veteran Member
Posts: 69
Joined: 2013-01-31 21:16

Re: Change/Add Metro Theme colours

Post by benzoD » 2013-02-06 17:29

Just a quick thanks for the tip and to add that I LOVE colourlovers!

Post Reply