How to use .css file to customize a css default property ?

[ThierryM]

Hi,
Sorry but I don't understand how to change a default .css property. I found this discussion #320 but I have questions.
Here the code I would want to use:

table-responsive {
text-align : center ;
}

Where the .css file has to be stored ?
How to force this customization in an .sql file ?

Thanks for your help, regards.

[lovasoa]

Hello !
You should have a look at this example: https://github.com/lovasoa/SQLpage/tree/main/examples/using%20react%20and%20other%20custom%20scripts%20and%20styles

It has a file called style.css at the root of the project.

Then in the .sql web pages, the file is included as a part of the shell component:

SELECT 'shell' AS component, '/style.css' as css;

[lovasoa]

Here is a replit example illustrating how to center text in table columns:
https://replit.com/@pimaj62145/SQLPage-table-from-tuples#style.css

[lovasoa]

And if you want a very terse layout, you can use this instead:

#my_colrow_table th {
  writing-mode: vertical-rl;
  text-orientation: upright;
}

[ThierryM]

Thanks a lot Ophir for the explanations and the examples provided !
Now, I've an error message because I use yet an other shell component on my page:
There cannot be more than a single shell per page. You are trying to open the "shell" component, but a shell component is already opened for the current page. You can fix this by removing the extra shell component, or by moving this component to the top of the SQL file, before any other component that displays data.

I tried to move the line at the top but this error message is still displayed. Here my code in the sql file :

-- Permet de personnaliser le tableau de synthèse
SELECT 'shell' AS component, '/style.css' as css;
--Menu
SELECT 'dynamic' AS component,
    CASE WHEN $group_id=1
        THEN sqlpage.read_file_as_text('index.json')
        ELSE sqlpage.read_file_as_text('menu.json')
        END    AS properties;

How can I resolve this conflict for applying the css customisation for this specific sql file ?
Regards.

[lovasoa]

Two things:

• It is possible to have a general shell for the entire website and a customization that is applied just on a certain page. See the example below.
• I wouldn't recommend it in your case. Just include the style.css on all pages of your website, by adding it yo your index.json and menu.json files. You will waste a few milliseconds of page loads, but it will be much easier to manage when you will have multiple pages requiring similar styling rules.

If you want to do it anyway

You can have a look at how we do it on the offical site: https://github.com/lovasoa/SQLpage/blob/main/examples/official-site/examples/layouts.sql#L1-L3

In your case it would look like this

--Menu
SELECT 'dynamic' AS component,
  json_patch(
    CASE WHEN $group_id=1
          THEN sqlpage.read_file_as_text('index.json')
          ELSE sqlpage.read_file_as_text('menu.json')
     END,
    '{"style": "/style.css"}' -- Permet de personnaliser le tableau de synthèse
  ) AS properties;