2017-02-10 5 views
0

Shiny 앱의 색상을 사용자 정의하려고했습니다. 이 코드R Shiny : 브라우저 크기에 따라 배경색이 변경되었습니다.

library(shinydashboard) 
library(shiny) 

header <- dashboardHeader() 
sidebar <- dashboardSidebar() 
body <- dashboardBody(
tags$head(
    tags$style(
     HTML(
      '.skin-black .main-sidebar {color: #FFFFFF; background-color: #9A373C;} 
      .skin-black .main-header .navbar { background-color: #ffffff;} 
      .skin-black .span12 { background-color: #ffffff;}' 
     ) 
    ) 
) 
) 

ui <- dashboardPage(header, sidebar, body,skin = "black") 
server <- function(input, output) {} 
shinyApp(ui, server) 

와 최소한 예에서는 브라우저 윈도우가 작은 경우, 브라우저 윈도우는 블랙/화이트 헤더가 클 때 흰색 헤더가 응용 프로그램을 생성한다. 내가 위해 할 수있는 일

enter image description here

은 항상 흰색 얻으려면?

로고를 왼쪽 상단에 배치했기 때문에 누군가가 더 작은 창에서 앱을보고 있기 때문에 배경색이 검은 색으로 변하면 두려운 것처럼 보입니다.

답변

1

나는 이것이 당신이 원하는 곳을 찾는다 고 생각하지만, 관련 요소의 스타일을 검사하여이 모든 것을했는데, 나는 그것이 당신이이 상황에서해야 할 일인가 두렵다. 대답은 단지 시행 착오보다 ...

희망이 있습니다!

library(shinydashboard) 
library(shiny) 

header <- dashboardHeader() 
sidebar <- dashboardSidebar() 
body <- dashboardBody(
    tags$head(
     tags$style(
      HTML(
      '.skin-black .main-sidebar {color: #FFFFFF; background-color: #9A373C;} 
      .skin-black .span12 { background-color: #ffffff;} 
      .skin-black .main-header .navbar { background-color: #ffffff;} 
      .skin-black .main-header > .logo { background-color: #ffffff;} 
      .skin-black .main-header > .logo:hover { background-color: #ffffff;} 
      .skin-black .main-header .logo, .skin-black .main-header .navbar { transition: color 0s; }' 
      ) 
     ) 
    ) 
) 

ui <- dashboardPage(header, sidebar, body,skin = "black") 
server <- function(input, output) {} 
shinyApp(ui, server) 
+0

고맙습니다! 이것은 완벽하게 작동합니다. 나는이 정보를 어디에서 얻을 수 있는지 궁금 할뿐입니다. Shiny 웹 사이트에는 많은 자습서가 있지만 피상적입니다. –

+0

물론! 예, 샤이니 웹 사이트는 HTML CSS 또는 JS를 사용하여 웹 사이트를 사용자 지정하는 방법을 찾는 위치가 아닙니다 ... 반짝이는 몇 가지 훌륭한 솔루션을 제공하지만 나중에 좋은 오래된 수동 조정으로 돌아갑니다. 빠른 온라인 검색에서 [모양이 나올 때까지] 페이지를 검사하고 조정하는 방법을 알려주는 [이 유용한 자습서] (https://zapier.com/blog/inspect-element-tutorial/)를 발견했습니다. 그런 다음'tags $ head (tags $ style (HTML) ...))'태그를 사용하여 해당 CSS를 앱에 삽입하십시오. –