更改闪亮仪表板中侧边栏的字体颜色答案

【问题标题】：changing the font color of the sidebar in shiny dashboard更改闪亮仪表板中侧边栏的字体颜色
【发布时间】：2016-07-06 23:39:45
【问题描述】：

我几乎没有 html/css 经验，因此我在以下方面寻求您的帮助。

我正在使用带有默认侧边栏的闪亮仪表板。我尝试使用dashboardBody中的以下代码行来更改侧边栏的背景颜色和字体颜色：

tags$head(tags$style(HTML('.skin-black .main-sidebar {color: #000000; background-color: #FFB6C1;}')))

发生的事情是新侧边栏的背景颜色为#FFB6C1，这是我的本意。但是侧边栏中的字体颜色并没有变成黑色，仍然是白色！有什么建议吗？

非常感谢圣

【问题讨论】：

标签： html css shiny

【解决方案1】：

我遇到了一个帮助我解决问题的示例。 http://journocode.com/2016/04/04/r-first-web-application-shiny/

据此，问题通过used解决了：

label = HTML('<p style="color:black;">Maximum number of suggestions</p>')

为了用黑色而不是仅使用时获得的白色来描述标签的颜色：

label = "Maximum number of suggestions"

当然，两者都是 selectInput 对象的参数。

感谢 KH 的帮助，当然也感谢 MARIE-LOUISE TIMCKE 的精彩帖子。

调

【讨论】：

【解决方案2】：

您的 CSS 选择器可能不是针对文本元素，而是侧边栏 div。假设您的文本元素在 .main-sidebar 类下，这应该/可能有效。只需将 ELEMENT 替换为包含您的文本的任何 HTML 标记，例如

.skin-black .main-sidebar ELEMENT {
color: #000000;

.skin-black .main-sidebar {
background-color: #FFB6C1;
}

空格无关紧要。

【讨论】：

嗨，KY，感谢您的建议。你的帖子现在帮助我更具体。我想更改边栏中 selectInput 元素标签的字体颜色。我试过`.skin-black .main-sidebar selectInput_id { color: #000000;但它没有用。你觉得呢？
好的，让我再添加一层特殊性：我想要的是更改dashboardSidebar中sidebarMenu中selectInput标签的字体颜色。似乎我对 .skin-black .main-sidebar ELEMENT {color: #000000;} 的放置位置以及如何引用 ELEMENT 感到困惑？我应该使用 selectInput id 来引用 ELEMENT 吗？
我的建议是，只需为包含您的文本的元素添加一个唯一的类，然后仅使用该类来更改颜色。提供 HTML codr 会很有帮助。
感谢 KH 的跟进：到目前为止，我尝试了以下每一行，但均未成功： tags$head(tags$style(HTML('.skin-black .main-sidebar sidebarMenu {color : #000000;}'))) tags$head(tags$style(HTML('.skin-black .main-sidebar selectInputid {color: #000000;}')))
我也对插入这些行的位置感到困惑。怎么才能具体到具体的selectInput的label的颜色改变也是另一个困惑的地方。

【解决方案3】：

类似于@Kasper 的回答，但直接嵌入到闪亮的代码中：

 dashboardBody(
      tags$head(        
        #in line styling
        tags$style(HTML(

        #siderbar background
        '.skin-blue .main-sidebar {
          background-color: white;}',

        #siderbar text color
        '.skin-blue .main-sidebar .sidebar{
          color: #red;}'
        )
       )
      )

注意

虽然改变了侧边栏的样式，但代码在dashboardBody()中。
根据您当前的仪表板皮肤颜色，您需要将“.skin-blue”（默认为蓝色）更改为例如根据需要“.skin-black”
要更改字体颜色，必须在“.main-sidebar”之后有“.sidebar”。 “.sidebar”基本上是@Kasper 提到的ELEMENT。（要找到此类元素，请在您的 chrome 浏览器中使用开发者工具，并检查所有内容，直到您可以找到准确的 html 代码块，并为此目的使用“class=”之后的 ELEMENT。）

【讨论】：