How to add color to your tiles
Posted: 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:
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:
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
You're done!
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')You should now have this:
Code: Select all
$j('#my_table1-tile').find('.btn-info').removeClass('btn btn-info').addClass('btn btn-danger');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!
