Footer: Colour & Positioning

[shakamoushie]

I tried all combinations of this code to:

1. Centre the footer text across the footer
2. Change the colour of the links to white (as the footer has a dark background colour)

from nicegui import ui

with ui.footer().style('position: fixed; width: 100%; background-color: #7B2869; color: white;').classes('content-center h-1'):
    with ui.row().classes('text-white text-center'):
        ui.link('NiceGUI', 'https://nicegui.io/').style('color: white;')
        ui.label('Version 1.0')

ui.run()

But it does not work.

Thanks in advance

[falkoschindler]

1. For centering the footer you can use the class justify-center.
2. For the link color you can use !text-white. With "!" you set this style as "important". This is necessary because Quasar set color: #2196f3!important;.

So your code might look as follows:

from nicegui import ui

with ui.footer().classes('justify-center'):
    ui.link('NiceGUI', 'https://nicegui.io/').classes('!text-white')
    ui.label('Version 1.0')

ui.run()

[falkoschindler]

In 4cf7466 I changed the way we define the initial link color. Now the exclamation mark is not necessary anymore since CSS as well as Tailwind classes can simply overwrite the default class text-blue-500.

[shakamoushie]

Thanks @falkoschindler, this works as required. However, I still need to put the class '!text-white' even after updating my NiceGUI version.

Nevertheless, I have a workable solution, and for such a nice python library.

Cheers

[falkoschindler]

The need for the "!" will be gone with the next release of version 1.1.4.