How to style shimymanager login screen with CSS only?

Question

I tried to style the shinymanager login screen with CSS but it didn't work.

I need to change the following class:

.panel-auth {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #FFF;
opacity: 1;
z-index: 99997;
overflow-x: hidden;
overflow-y: scroll;
}

I desired:

.panel-auth {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #008cba;
opacity: 1;
z-index: 99997;
overflow-x: hidden;
overflow-y: hidden;
}

But, my www/folder.css doesn't work for shinymanager screen.

When I log in, CSS is normally applied to the dashboard. The problem is with shinymanager's login screen.

Code:

library(shiny)
library(shinydashboard)
library(shinymanager)

# Credentials as data.frame
credentials <- data.frame(
  user = c("shiny", "shinymanager"), # mandatory
  password = c("azerty", "12345"), # mandatory
  stringsAsFactors = FALSE
)

# Change labels
set_labels(
  language = "en",
  "Please authenticate" = "Bitte authentifizieren",
  "Username:" = "Benutzername:",
  "Password:" = "Passwort:",
  "Login" = "Anmeldung"
)

# Classic shinydashboard
ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(),
  title = "Dashboard example"
)


# Wrap your UI with secure_app
ui <- secure_app(
  ui = ui,
  tags_top = 
    tags$div(
      tags$h4("Demo", style = "align:center"),
      tags$img(
        src = "https://www.r-project.org/logo/Rlogo.png", width = 100
      )
    ),
  # add information on bottom ?
  tags_bottom = tags$div(
    tags$p(
      "For any question, please  contact ",
      tags$a(
        href = "mailto:someone@example.com?Subject=Shiny%20aManager",
        target="_top", "administrator"
      )
    )
  )
)

# Server
server <- function(input, output, session) {
  
  # With creadentials data.frame (for the example)
  res_auth <- secure_server(
    check_credentials = check_credentials(credentials)
  )
  # If you have a SQLite database, you can use:
  # res_auth <- secure_server(
  #   check_credentials = check_credentials(
  #     "path/to/database.sqlite",
  #     passphrase = "mypassphrase"
  #   )
  # )

  # your classic server logic
  
}

shinyApp(ui, server)

score 2 · Accepted Answer · answered Sep 13 '21 at 23:28

So you need to apply the style to the secure_app, if you apply the style to the normal dashboard UI, it will not be effective, because this part is only loaded after the users logged in. Also, try add the stylesheet to the head tag will help too. Here is the working example:

library(shiny)
library(shinydashboard)
library(shinymanager)

# Credentials as data.frame
credentials <- data.frame(
    user = c("shiny", "shinymanager"), # mandatory
    password = c("azerty", "12345"), # mandatory
    stringsAsFactors = FALSE
)

# Change labels
set_labels(
    language = "en",
    "Please authenticate" = "Bitte authentifizieren",
    "Username:" = "Benutzername:",
    "Password:" = "Passwort:",
    "Login" = "Anmeldung"
)

# Classic shinydashboard
ui <- dashboardPage(
    dashboardHeader(),
    dashboardSidebar(),
    dashboardBody(),
    title = "Dashboard example"
)


# Wrap your UI with secure_app
ui <- secure_app(
    ui = ui,
    tags_top = 
        tags$div(
            tags$head(
                tags$link(rel = "stylesheet", href ="folder.css")
            ),
            tags$h4("Demo", style = "align:center"),
            tags$img(
                src = "https://www.r-project.org/logo/Rlogo.png", width = 100
            )
        ),
    # add information on bottom ?
    tags_bottom = tags$div(
        tags$p(
            "For any question, please  contact ",
            tags$a(
                href = "mailto:someone@example.com?Subject=Shiny%20aManager",
                target="_top", "administrator"
            )
        )
    )
)

# Server
server <- function(input, output, session) {
    
    # With creadentials data.frame (for the example)
    res_auth <- secure_server(
        check_credentials = check_credentials(credentials)
    )
    # If you have a SQLite database, you can use:
    # res_auth <- secure_server(
    #   check_credentials = check_credentials(
    #     "path/to/database.sqlite",
    #     passphrase = "mypassphrase"
    #   )
    # )
    
    # your classic server logic
    
}

shinyApp(ui, server)

How to style shimymanager login screen with CSS only?

1 Answers1

Linked