Question

我正在尝试自定义闪亮页面。

我的问题：如何更改整个标题栏和标签中的颜色。

下面介绍了我想要获得的内容以及我尝试过的内容（我在下面的示例中添加了一些不同的内容，以防任何这些因素对自定义方法产生负面影响）。

左侧的图像（大小合理）：使用How can I insert an image into the navbar on a shiny navbarPage() 工作但不知道如何调整大小
图像后面的标题 :(使用下面的标题左对齐标题）
右对齐多个页面标签：使用R shiny navbarPage right aligned tabs我能够右对齐标签
更改文字和背景的颜色：使用Background color of tabs in shiny tabPanel

所以主要的突出问题是颜色定制 - 请参见下图。标题文本和背景颜色已更改，但颜色的变化不会延伸到整个标题栏（中间仍为灰色）。未选中时，我无法更改选项卡文本颜色或背景颜色。为此，我尝试在下面添加代码，以及更改.navbar .navbar-nav中的颜色。

.tabbable > .nav > li > a                    {background-color: aqua;  color:black}
.tabbable > .nav > li > a[data-value='One'] {background-color: red;   color:white}

这是下面代码的当前输出。

（正如你从代码中看到的那样，我通过从SO获取Q＆amp; A的各个部分来创建Frankenstein的怪物，所以如果有更好的方法我会非常感激。）

兆瓦

library(shiny)    

 ui <- fluidPage(

  list(
  tags$head(HTML('<link rel="icon", href="Rplot.png", type="image/png" />')),

  tags$style(HTML("
      .navbar .navbar-nav {float: right; 
                           color: #ff3368; 
                           font-size: 38px; 
                           background-color: #FFFF00 ; } 
      .navbar .navbar-header {float: left; } 
      .navbar-default .navbar-brand { color: #ff3368; 
                                      font-size: 38px; 
                                      background-color: #FFFF00 ;} 

  "))),

   navbarPage(
              title=div(img(src="Rplot.png"), "My Title in the Navbar"),
              tabPanel("One"),
              tabPanel("Two")
                    ))


server <- function(input, output, session) { }

shinyApp(ui, server)

Answer 1

您似乎成功地为部件着色，但不是整行。因此，您应该检查元素（右键单击 - 检查元素）并查找父元素。

你可以看到：

<nav class="navbar navbar-default navbar-static-top" role="navigation">

您可以通过.navbar.navbar-default.navbar-static-top通过css解决，然后设置颜色。

代码应添加到：tags$style(HTML("..."))，例如：

.navbar.navbar-default.navbar-static-top{background-color: #FFFF00 ;}

以下工作示例：

library(shiny)    

ui <- fluidPage(

  list(tags$head(HTML('<link rel="icon", href="Rplot.png", 
                       type="image/png" />'),

                 tags$style(HTML("
      .navbar .navbar-nav {float: right; 
                           color: #ff3368; 
                           font-size: 38px; 
                           background-color: #FFFF00 ; } 
      .navbar.navbar-default.navbar-static-top{ color: #ff3368; 
                                      font-size: 38px; 
                                      background-color: #FFFF00 ;}
      .navbar .navbar-header {float: left; } 
      .navbar-default .navbar-brand { color: #ff3368; 
                                      font-size: 38px; 
                                      background-color: #FFFF00 ;} 

  ")))),

  navbarPage(
    title=div(img(src="Rplot.png"), "My Title in the Navbar"),
    tabPanel("One"),
    tabPanel("Two")
  ))


server <- function(input, output, session) { }

shinyApp(ui, server)

在闪亮的

1 个答案: