在闪亮的仪表板上修改字体颜色

时间:2020-03-26 13:59:44

标签: html css r shiny shinydashboard

在闪亮的仪表板中,我发现this链接用于修改边栏和标题中的颜色。但是我找不到修改侧边栏项目字体颜色的方法!默认字体颜色为白色,如果您为侧边栏选择浅色,则无法读取。如果有人可以提供CSS代码来修复字体颜色,我将不胜感激!

enter image description here

ui = dashboardPage(
  dashboardHeader(
    title = "Example of a long title that needs more space",
    titleWidth = 450

  ),
  dashboardSidebar(
    br(),


    menuItem("Dashboard", tabName = "dashboard", icon = icon("dashboard"),
             checkboxGroupInput("selectVar", "",choices = c('A','B','C'),selected = 'A' )),

    menuItem("Widgets", icon = icon("th"), tabName = "widgets",
             selectInput("select1",label ="Select :",choices = c('A','B','C'),multiple = TRUE))
  ),
  dashboardBody(
    # Also add some custom CSS to make the title background area the same
    # color as the rest of the header.
    tags$head(tags$style(HTML('
        /* logo */
        .skin-blue .main-header .logo {
                              background-color: #7E59A4;
                              }

        /* logo when hovered */
        .skin-blue .main-header .logo:hover {
                              background-color: #7E59A4;
                              }

        /* navbar (rest of the header) */
        .skin-blue .main-header .navbar {
                              background-color: #7E59A4;
                              }        

        /* main sidebar */
        .skin-blue .main-sidebar {
                              background-color: #FFFFFF;
                              }


        /* other links in the sidebarmenu */
        .skin-blue .main-sidebar .sidebar .sidebar-menu a{
                              background-color: #FFFFFF;
                              color: #000000;
                              }

        /* other links in the sidebarmenu when hovered */
         .skin-blue .main-sidebar .sidebar .sidebar-menu a:hover{
                              background-color: #FFFFFF;
                              }
        /* toggle button when hovered  */                    
         .skin-blue .main-header .navbar .sidebar-toggle:hover{
                              background-color: #FFFFFF;
         }
       /* toggle button when hovered  */                    
         .skin-blue .main-header .navbar .sidebar-toggle:hover{
                              background-color: #FFFFFF;
                              }
                              ')))
  )


)

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

shinyApp(ui = ui , server = server)

3 个答案:

答案 0 :(得分:2)

我认为这就是您要寻找的东西

.content-wrapper, .right-side {
background-color: #FFFFFF;
}

答案 1 :(得分:1)

通过在闪亮的应用浏览器上单击f12,您的页面将具有背景HTML语法。一次可以滚动找到应更改的部分名称。在这种情况下,它称为.treeview-menu

enter image description here

因此,您所需要做的就是添加:

.skin-blue .treeview-menu {
                              background-color: #FFFFFF;
                              color: #000000;
                              }

答案 2 :(得分:-1)

我按照您的指示更新了项目符号字体大小和颜色,但是这也会导致我更改侧边栏中的menusubitem字体大小和颜色也发生了变化,请提出解决方法。我浏览了所有google页面,没有找到类似的解决方案,谢谢

我也尝试将标签样式放在顶部和内部,但不起作用。

require("config.php");
require("dbconnect.php");
$sth = $dbh->prepare('SELECT * FROM users WHERE email=?');
$sth->bindParam(1, $_POST["test"], PDO::PARAM_STR);
$sth->execute();
$user = $sth->fetch();