TV-customization (Part 6): Custom CSS classes

AppGini

In Part 5 of this Series (Part 1, Part 2, Part 3, Part 4) we have seen different built-in CSS classes, provided by Bootstrap framework. Today I am going to create my own custom CSS class and attach it to TV cell values.

Current Code

// file: hooks/machines.php
function machines_init(&$options, $memberInfo, &$args)
{
    $options_old = $options->QueryFieldsTV;
    $options_new = [];

    $css_class = 'my-custom-class-1';

    foreach ($options_old as $sql => $column) {
        if ($column == 'year_of_manufacture') {
            $new_value = "concat('<span class=\"{$css_class}\">', 'Built: ', year_of_manufacture, '</span>')";
            $options_new[$new_value] = $column;
        } else {
            $options_new[$sql] = $column;
        }
    }
    $options->QueryFieldsTV = $options_new;
    return true;
}

Please note the small change in line 7. I am attaching my-custom-class-1 to the cell-value.

Next we have to define the style for that class, named my-custom-class-1.

Defining custom CSS class

There are different places for defining custom CSS classes, for example:

  • Standard hook
    hooks/header-extras.php
    Place your styles inside a <style>...</style> tag of hooks/header-extras.php
    Note: When doing it this way you will have to wrap your CSS styles in <style>...</style> tag
  • Custom css file
    hooks/header-extras.css
    First, in hooks/header-extras.php add a stylesheet-reference like this:
    <link rel="stylesheet" href="hooks/header-extras.css" />
    Next, create a new file hooks/header-extras.css and place your styles there.
    Note: When doing it with way you have to put your styles right into the .css file and don't wrap it in <style>-tag

Usually I have an extra .css file (2nd option). For simplicity reasons, in this tutorial I'm just adding my styles inside a <style>-tag to hooks/header-extras.php

<!-- file: hooks/header-extras.php -->
<style>
.my-custom-class-1 {
    background-color: darkgreen;
    padding: 10px;
    color: white;
    border-radius: 4px;
    display: inline-block;
    
}

.my-custom-class-1::before {
    content: '✔ ';
}
</style>

Result

Let's save both files and check the result:

Now our cell-value das a darkgreen background-color, white text-color and a few more style settings according to our CSS definition.

Please note the checkmark character before. This is not part of the cell-value but has been rendered dynamically using CSS' ::before pseudo element.

That's fine, here is another sample using CSS' ::before pseudo element:

.my-custom-class-1 {
  /* nothing here */
}

.my-custom-class-1::before {
    content: '✔';
    background-color: darkgreen;
    color: white;
    padding: 4px;
    width: 24px;
    height: 24px;
    border-radius: 100%;
    display: inline-block;
    margin-right: 4px;
}

And this is the result after saving and reloading the browser:

I ❤ CSS!

What’s next?

That's it for now. Right now all (!) rows have the same class and styling. In next part we are going to add flexibility, which means we are going to change the CSS-class depending on database values. This requires some more SQL knowledge. So, continue with Part 7 now, if you like.

If you like the way I try to help you, please consider following me on Twitter, purchasing our products or donating a coffee. All of this will help me, helping you in the future.

Kind regards,
Jan

Do you like it?