Changing color for corona business sample app

Hi,

If anyone who could help me, thank you and much appreciated.

I would like to change any orange color to a #ff3366 or {255, 51. 102}. I am having hard time changing it, how do i change it? Which code should i edit?`

 

https://coronalabs.com/blog/2013/10/09/a-look-inside-a-sample-corona-powered-business-app/

 

Hello @hhoh1151 and welcome to the forums!

Unfortunately there are going to be multiple places that you need to change the colors. In Corona colors are in the range of 0…1, so to convert your 0-255 colors you will need to divide by 255. In other words {255/255, 51/255, 102/255} or you can and compute them and use the decimal values.

Now where to change:

In main.lua, starting around line 213 will be a table called tabButtons. This is for the bottom tabBar widget. There is a labelColor with entries for “default” and “over” that will need changed from their current orange color to your desired color.

Each tab is constructed of Composer scenes. There is one for each tabBar: menu.lua, feed.lua, feed2.lua, photogallery.,lua, mapscene.lua and datatable.lua as well as scenes called from them like registration.lua, videoviewer.lua, webpage.lua, edituser.lua, data and datatable.lua. There may be a couple I’ve missed.

Each of them have a couple of different things you will need to update. Look for:

widget.newNavigationBar.  This isn’t in our standard widgets, it’s in a widget extras file in the project. It has a “backgroundColor” that will need changed.  menu.lua also has several widget.newButton()'s that will have “default” and “over” colors that need updated.

Once you have all of those changed, run each screen and see if there buttons or other things that I missed, though the above should be most of the app’s colors.

What you could also do, is use the myApp table to set your theme colors in and then change the various widgets to use values from that table.

myApp.icons = graphics.newImageSheet(“images/ios7icons.png”, iconInfo)

myApp.font = “fonts/Roboto-Light.ttf”

myApp.fontBold = “fonts/Roboto-Regular.ttf”

myApp.fontItalic = “fonts/Roboto-LightItalic.ttf”

myApp.fontBoldItalic = “fonts/Roboto-Italic.ttf”

– add this:

myApp.navBarColor = { 255/255, 51/255, 102/255 } myApp.buttonColor = { 255/255, 51/255, 102/255 } myApp.buttonOverColor = { 255/255, 71/255, 122/255 }

Then in a scene like menu.lua you the myData module should already be required, so you can change the widget like this:

 navBar = widget.newNavigationBar({ title = "Add new account", backgroundColor = myApp.navBarColor, --\<----- note using the value from the myApp table. titleColor = {1, 1, 1}, font = myApp.fontBold, leftButton = leftButton }) sceneGroup:insert(navBar)

I’ll probably get around to updating the sample to support this at some point since it would make life easy for people trying to use it, but I likely won’t get to it for a while. So I recommend just updating the app yourself for now.

Rob

Thanks, I have managed to change the color.

How do I upload it to my phone? Would like to test the app out on my phone and see if theres any problem. Do keep in mind, this is just a school project. I do not plan to upload it to google play. I am also using an android phone. Thank you!

When you press CMD-B to build the App for iOS, there is an option to Build and Copy to device. If you have your device plugged into your Mac via it’s USB/Lighting cable, Corona will install it on your device for you. 

If you want to do it manually, you can run Xcode. From the menu choose Windows->Devices. In the screen that pops up, click on your device. In the center pane you will see a small + sign. Click that, navigate to where you told Corona to output your app to and click on your app and let Xcode install it.

Rob

Hello @hhoh1151 and welcome to the forums!

Unfortunately there are going to be multiple places that you need to change the colors. In Corona colors are in the range of 0…1, so to convert your 0-255 colors you will need to divide by 255. In other words {255/255, 51/255, 102/255} or you can and compute them and use the decimal values.

Now where to change:

In main.lua, starting around line 213 will be a table called tabButtons. This is for the bottom tabBar widget. There is a labelColor with entries for “default” and “over” that will need changed from their current orange color to your desired color.

Each tab is constructed of Composer scenes. There is one for each tabBar: menu.lua, feed.lua, feed2.lua, photogallery.,lua, mapscene.lua and datatable.lua as well as scenes called from them like registration.lua, videoviewer.lua, webpage.lua, edituser.lua, data and datatable.lua. There may be a couple I’ve missed.

Each of them have a couple of different things you will need to update. Look for:

widget.newNavigationBar.  This isn’t in our standard widgets, it’s in a widget extras file in the project. It has a “backgroundColor” that will need changed.  menu.lua also has several widget.newButton()'s that will have “default” and “over” colors that need updated.

Once you have all of those changed, run each screen and see if there buttons or other things that I missed, though the above should be most of the app’s colors.

What you could also do, is use the myApp table to set your theme colors in and then change the various widgets to use values from that table.

myApp.icons = graphics.newImageSheet(“images/ios7icons.png”, iconInfo)

myApp.font = “fonts/Roboto-Light.ttf”

myApp.fontBold = “fonts/Roboto-Regular.ttf”

myApp.fontItalic = “fonts/Roboto-LightItalic.ttf”

myApp.fontBoldItalic = “fonts/Roboto-Italic.ttf”

– add this:

myApp.navBarColor = { 255/255, 51/255, 102/255 } myApp.buttonColor = { 255/255, 51/255, 102/255 } myApp.buttonOverColor = { 255/255, 71/255, 122/255 }

Then in a scene like menu.lua you the myData module should already be required, so you can change the widget like this:

 navBar = widget.newNavigationBar({ title = "Add new account", backgroundColor = myApp.navBarColor, --\<----- note using the value from the myApp table. titleColor = {1, 1, 1}, font = myApp.fontBold, leftButton = leftButton }) sceneGroup:insert(navBar)

I’ll probably get around to updating the sample to support this at some point since it would make life easy for people trying to use it, but I likely won’t get to it for a while. So I recommend just updating the app yourself for now.

Rob

Thanks, I have managed to change the color.

How do I upload it to my phone? Would like to test the app out on my phone and see if theres any problem. Do keep in mind, this is just a school project. I do not plan to upload it to google play. I am also using an android phone. Thank you!

When you press CMD-B to build the App for iOS, there is an option to Build and Copy to device. If you have your device plugged into your Mac via it’s USB/Lighting cable, Corona will install it on your device for you. 

If you want to do it manually, you can run Xcode. From the menu choose Windows->Devices. In the screen that pops up, click on your device. In the center pane you will see a small + sign. Click that, navigate to where you told Corona to output your app to and click on your app and let Xcode install it.

Rob