Hello all,

I am developing a web application and have created a footer web block for all my screens.  The footer contains a number of links (Terms of Use, About Us, etc), each with its own screen.

Whenever the user is on a page related to a footer link I want to display that link in a different colour in the same way that the active top menu links are.

How do I do this ?

Cheers, Richard.

Hi Richard,

I notice you have some questions regarding customizing CSS for your applications.

Did you already the following training?

https://www.outsystems.com/learn/courses/21/master-class-on-css-in-outsystems/

Maybe it will help you better understand how you can customize the look and feel of your application by yourself.

To see how the top menu is styled you can use chrome Dev tools, than try to mimic that for your footer.

Regards,

Daniel

Hello Richard,

You can achieve this by the same way as menu links exists.  Create a block which comprises the links enclosing in the Richwidgets/Dropdownmenu. Create a static entity with the records for each link.  And add an input parameter in the block, datatype as "created staticentity identifier".

And in the isActive property of the Richwidgets/Dropdownmenu make a condition as: "inputparameter=Entities.Staticentity.Recordforlink".

Now use this block in the footer section of the screens by giving the input parameter value as: Entities.Staticentity.Recordforlink.


Regards,

Porselvan G.

Daniël Kuhlmann wrote:

Hi Richard,

I notice you have some questions regarding customizing CSS for your applications.

Did you already the following training?

https://www.outsystems.com/learn/courses/21/master-class-on-css-in-outsystems/

Maybe it will help you better understand how you can customize the look and feel of your application by yourself.

To see how the top menu is styled you can use chrome Dev tools, than try to mimic that for your footer.

Regards,

Daniel

Hi Daniel,

Yes I had already completed that training course, but it wasn't a great course and it didn't answer the particular questions that I had.

Cheers, Richard.

Solution

PORSELVAN.G GNANAVELU wrote:

Hello Richard,

You can achieve this by the same way as menu links exists.  Create a block which comprises the links enclosing in the Richwidgets/Dropdownmenu. Create a static entity with the records for each link.  And add an input parameter in the block, datatype as "created staticentity identifier".

And in the isActive property of the Richwidgets/Dropdownmenu make a condition as: "inputparameter=Entities.Staticentity.Recordforlink".

Now use this block in the footer section of the screens by giving the input parameter value as: Entities.Staticentity.Recordforlink.


Regards,

Porselvan G.

Thanks Porselvan,

You provided one half of the solution that I needed, the other half was to customise the CSS.  To do this I copied all the existing properties for the '.header .Menu_TopMenu' class to create a '.footer .Menu_TopMenu' class in the application theme and change these for the specific properties I wanted in the footer.  Lastly in a top level container enclosing all the Richwidget/DropDownMenu items for the footer links I added the 'Menu_TopMenu' class.

Worked like a charm and thanks for you help and sending me in the right direction.

Cheers, Richard.

Solution