How to add color to your tiles

Discussions related to customizing hooks. Hooks are documented at http://bigprof.com/appgini/help/advanced-topics/hooks/
Post Reply
mdannatt
Veteran Member
Posts: 41
Joined: 2020-01-27 17:34

How to add color to your tiles

Post by mdannatt » 2021-07-28 17:26

Some of us long for the days when then the Metro Theme was still around. After all, who doesn't like a bit of colour? Or maybe you want to highlight a key table or two. Here's how you can add some extra color to your tiles on the index.php page.

1. FInd the name of the table whose tile colour you want to change. I'll use "my_table1" which has the Bootstrap info class (blue) in this example, but obviously, change the table name to meet your own requirements. To select the correct tile, build your query like this:

Code: Select all

$j('#my_table1-tile').find('.btn-info')
now use .removeClass to get rid of the existing colour, and replace it with the new colour using .addClass. In my example, I am replacing the Bootstrap info class (blue) with the Bootstrap danger class (red). If you want a color outside of bootstrap's defaults, you'll have to write some CSS and reference that.

You should now have this:

Code: Select all

$j('#my_table1-tile').find('.btn-info').removeClass('btn btn-info').addClass('btn btn-danger');
A couple of points:
1. Don't forget the #
2. That really is a space between 'button' and 'button-info'
3. Don't forget to use ' '

Now make it look like a jquery function and paste it into your header-extras.php file

Code: Select all

<script>
$j(document).ready(function(){
$j('#op_art-tile').find('.btn-info').removeClass('btn btn-info').addClass('btn btn-danger');
});
</script>


You're done!
Roses are red, Violets are blue, unexpected '}' on line 32

SkayyHH
Veteran Member
Posts: 425
Joined: 2015-04-27 21:18

Re: How to add color to your tiles

Post by SkayyHH » 2021-07-29 06:01

Hi, thank you very much for sharing. Wouldn't it be great if we created a thread here in the appgini forum which everyone can put in his css and javascript modifications? So that we can all participate. What do you all think?

Greetings, Kai

mdannatt
Veteran Member
Posts: 41
Joined: 2020-01-27 17:34

Re: How to add color to your tiles

Post by mdannatt » 2021-07-29 08:37

Good Idea! maybe Ahmad will consider a 'Look and Feel' subforum.
Roses are red, Violets are blue, unexpected '}' on line 32

SkayyHH
Veteran Member
Posts: 425
Joined: 2015-04-27 21:18

Re: How to add color to your tiles

Post by SkayyHH » 2021-07-29 16:13

That would be great. With a subforum it would all be a bit more structured and we can post every change as a separate thread. that makes it clearer. I have many CSS changes for user area and admin.

Advanced Customizations > Look and Feel :-)

Alisson
Veteran Member
Posts: 81
Joined: 2017-02-25 20:32

Re: How to add color to your tiles

Post by Alisson » 2021-08-13 14:47

+1

AhmedBR
AppGini Super Hero
AppGini Super Hero
Posts: 327
Joined: 2013-09-19 10:23

Re: How to add color to your tiles

Post by AhmedBR » 2022-07-27 22:34

Thanks for sharing, I used that today
AppGini 22.14 - xampp 3.3.0 - PHP 7.4.30 - Summary reports - Calendar - Mass update - Messages - AppGiniHelper

AhmedBR
AppGini Super Hero
AppGini Super Hero
Posts: 327
Joined: 2013-09-19 10:23

Re: How to add color to your tiles

Post by AhmedBR » 2022-07-27 22:40

In case you need more colors, use .css({'background-color': 'COLOR NAME'}); this way you can use a lot of colors as you need!

Code: Select all

<script>
$j(document).ready(function(){
$j('#op_art-tile').find('.btn-info').removeClass('btn btn-info').css({'background-color': 'silver'}); 
});
</script>
Happy coding
AppGini 22.14 - xampp 3.3.0 - PHP 7.4.30 - Summary reports - Calendar - Mass update - Messages - AppGiniHelper

AhmedBR
AppGini Super Hero
AppGini Super Hero
Posts: 327
Joined: 2013-09-19 10:23

Re: How to add color to your tiles

Post by AhmedBR » 2022-07-27 23:32

By the way, the button will turn text with link
you can also use the following to change text color

Code: Select all

<script>
$j(document).ready(function(){
$j('#op_art-tile').find('.btn-info').removeClass('btn btn-info').addClass('btn text-danger');
});
</script>
AppGini 22.14 - xampp 3.3.0 - PHP 7.4.30 - Summary reports - Calendar - Mass update - Messages - AppGiniHelper

Post Reply