Custom CSS Styling

ShinyProxy
1

Hey everyone,

Shinyproxy is using Bootstrap 3, and I feel like some of the styling is kind of old and I’d like to apply some custom styling or Shinyproxy (not inside the containers, I understand that’s different).

If I just wanted to add another .css file to the of the page, or write some internal 's, how would I go about doing that?

Thank you!

2

Hi @Kalob,

If you use the develop branch of ShinyProxy on Github, you can give https://github.com/openanalytics/shinyproxy-config-examples/tree/master/04-custom-html-template a try.

Always interested in feedback!

Best,
Tobias

1 Like
3

I just noticed that version 1.1.1 is available to download, where the change log states:

  • ‘support for theming and customization of the ShinyProxy landing page’

Does this relate to the development branch? Or is this something else? I can’t find any additional details regarding the new version feature.

4

Hi @fifthace,

This is indeed the functionality that was in the develop branch: it is now in the master branch and hence included in the new release.
Documentation about this feature is forthcoming; for now please refer to the example that Tobias linked.

5

Hi @fifthace,

Documentation on the new template-path field is included under

https://www.shinyproxy.io/configuration/#general

Best,
Tobias

1 Like
6

Thanks @tverbeke, @fmichielssen. This is yet another useful feature.

I would like to remove the black navbar once signed in, to give my Shiny app a simpler (cleaner) look. I think this can be achieved by commenting out:
<div th:replace="../fragments/navbar :: navbar"></div>
in app.html.

This would require moving the log-out button into the Shiny app, which I think can be done as follows:
includeHTML("logoutbutton.html")
where logoutbutton.html contains:
<a class='btn btn-default action-button' th:href="@{/logout}">Log out</a>

The button appears fine, but it appears the Thymeleaf link doesn’t work. Is this because the Shiny app is in an iframe that can’t “see” its parent framework? Is there a way around this?

7

OK, I spoke too soon. A simple hack to add a log out button is:
<a class='btn btn-default action-button' onclick ="location.href='http//yourdomain.com/logout';">Log out</a>

Edit: actually, I spoke too soon again. Although the above hack does technically log you out, it does so in a crappy manner. The screen goes grey (as if the Shiny app crashed), rather than redirecting you to the Shiny proxy login screen, which is the default behaviour. I think this is because you are not escaping the iframe.

8

Hi @fifthace,

You are correct that Thymeleaf syntax won’t work inside the Shiny UI: the HTML generated by Shiny does not pass through the Thymeleaf engine; it is shown ‘as is’.

But you should still be able to control the location of the iframe’s parent using this approach:

window.top.location.href = 'http//yourdomain.com/logout';

9

I can’t get any styling changes to be recognised. I’ve edited some basic things in index.html and app.html, such as <title>Custom index html file</title> and deleting this line: <div th:replace="../fragments/navbar :: navbar"></div>

The top of my application.yml looks like this:

shiny:
  proxy:
    support:
      container-log-path: ./container-logs
    title: Test app
    logo-url: file:///var/www/html/logo.png
    landing-page: /
    heartbeat-rate: 10000
    heartbeat-timeout: 60000
    port: 8080
    template-path: ./templates/2col

I know the yml file gets read because the title changes no problem.

My file structure looks like this:
templates%20problem

I can’t see anything in the logs. Does anyone know how I can debug this?

10

Hi @fifthace,

If you launch shinyproxy and access the index page, can you open a debugger panel in your browser to check if the assets get loaded? E.g. there should be requests for 2-col-portfolio.css and the png files.

1 Like