在 R Shiny 中更改侧边栏菜单项颜色

•浏览 1

Change sidebar menu item color in R Shiny

谁能告诉我标签名称来改变蓝线的颜色(参考Shiny Dashboard中menuItem中的图像。这是改变侧边栏菜单项bg颜色的代码。

.skin-blue .main-sidebar .sidebar .sidebar-menu .active a{

background-color: rgb(107,194,0);

color: rgb(255,255,255);font-weight: bold;font-size: 18px;

}
library(shiny)

library(shinydashboard)



ui <- dashboardPage(



dashboardHeader(

),



dashboardSidebar(



sidebarMenu(

 menuItem("Folder", tabName ="root", icon = icon("folder")),

 menuItem("My Home", tabName ="home", icon = icon("home")),

 menuItem("Document", tabName ="document", icon = icon("document"))

)



),

dashboardBody(



tags$head(tags$style(HTML('

             /* logo */

             .skin-blue .main-header .logo {

             background-color: rgb(255,255,255); color:    rgb(0,144,197);

             font-weight: bold;font-size: 24px;text-align: Right;

             }



             /* logo when hovered */



             .skin-blue .main-header .logo:hover {

             background-color: rgb(255,255,255);

             }





             /* navbar (rest of the header) */

             .skin-blue .main-header .navbar {

             background-color: rgb(255,255,255);

             }



             /* main sidebar */

             .skin-blue .main-sidebar {

             background-color: rgb(255,125,125);;

             }



             # /* main body */

             # .skin-blue .main-body {

             # background-color: rgb(0,144,197);

             # }



             /* active selected tab in the sidebarmenu */

             .skin-blue .main-sidebar .sidebar .sidebar-menu .active a{

             background-color: rgb(107,194,0);

             color: rgb(255,255,255);font-weight: bold;font-size: 18px;

             }



             /* other links in the sidebarmenu */

             .skin-blue .main-sidebar .sidebar .sidebar-menu a{

             background-color: rgb(255,125,125);

             color: rgb(255,255,255);font-weight: bold;

             }



             /* other links in the sidebarmenu when hovered */

             .skin-blue .main-sidebar .sidebar .sidebar-menu a:hover{

             background-color: rgb(232,245,251);color: rgb(0,144,197);font-weight: bold;

             }



             /* toggle button color */

             .skin-blue .main-header .navbar .sidebar-toggle{

             background-color: rgb(255,255,255);color:rgb(0,144,197);

             }



             /* toggle button when hovered */

             .skin-blue .main-header .navbar .sidebar-toggle:hover{

             background-color: rgb(0,144,197);color:rgb(255,255,255);

             }



#              ')))



))





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



})



shinyApp(ui, server)

.skin-blue .sidebar-menu > li.active > a {

 border-left-color: #ff0000;

}

.skin-blue .sidebar-menu > li.active > a,

.skin-blue .sidebar-menu > li:hover > a {

 border-left-color: #ff0000;

}

同样，希望自定义蓝线的颜色。关于 css：在 R Shiny 中更改侧边栏菜单项颜色

编辑：添加完整代码 - 除蓝线外，所有其他部件颜色均已自定义。

.skin-blue .main-sidebar .sidebar .sidebar-menu .active a{

background-color: rgb(107,194,0);

color: rgb(255,255,255);font-weight: bold;font-size: 18px;

}
library(shiny)

library(shinydashboard)



ui <- dashboardPage(



dashboardHeader(

),



dashboardSidebar(



sidebarMenu(

 menuItem("Folder", tabName ="root", icon = icon("folder")),

 menuItem("My Home", tabName ="home", icon = icon("home")),

 menuItem("Document", tabName ="document", icon = icon("document"))

)



),

dashboardBody(



tags$head(tags$style(HTML('

             /* logo */

             .skin-blue .main-header .logo {

             background-color: rgb(255,255,255); color:    rgb(0,144,197);

             font-weight: bold;font-size: 24px;text-align: Right;

             }



             /* logo when hovered */



             .skin-blue .main-header .logo:hover {

             background-color: rgb(255,255,255);

             }





             /* navbar (rest of the header) */

             .skin-blue .main-header .navbar {

             background-color: rgb(255,255,255);

             }



             /* main sidebar */

             .skin-blue .main-sidebar {

             background-color: rgb(255,125,125);;

             }



             # /* main body */

             # .skin-blue .main-body {

             # background-color: rgb(0,144,197);

             # }



             /* active selected tab in the sidebarmenu */

             .skin-blue .main-sidebar .sidebar .sidebar-menu .active a{

             background-color: rgb(107,194,0);

             color: rgb(255,255,255);font-weight: bold;font-size: 18px;

             }



             /* other links in the sidebarmenu */

             .skin-blue .main-sidebar .sidebar .sidebar-menu a{

             background-color: rgb(255,125,125);

             color: rgb(255,255,255);font-weight: bold;

             }



             /* other links in the sidebarmenu when hovered */

             .skin-blue .main-sidebar .sidebar .sidebar-menu a:hover{

             background-color: rgb(232,245,251);color: rgb(0,144,197);font-weight: bold;

             }



             /* toggle button color */

             .skin-blue .main-header .navbar .sidebar-toggle{

             background-color: rgb(255,255,255);color:rgb(0,144,197);

             }



             /* toggle button when hovered */

             .skin-blue .main-header .navbar .sidebar-toggle:hover{

             background-color: rgb(0,144,197);color:rgb(255,255,255);

             }



#              ')))



))





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



})



shinyApp(ui, server)

.skin-blue .sidebar-menu > li.active > a {

 border-left-color: #ff0000;

}

.skin-blue .sidebar-menu > li.active > a,

.skin-blue .sidebar-menu > li:hover > a {

 border-left-color: #ff0000;

}

可以使用以下 CSS 更改颜色

.skin-blue .main-sidebar .sidebar .sidebar-menu .active a{

background-color: rgb(107,194,0);

color: rgb(255,255,255);font-weight: bold;font-size: 18px;

}
library(shiny)

library(shinydashboard)



ui <- dashboardPage(



dashboardHeader(

),



dashboardSidebar(



sidebarMenu(

 menuItem("Folder", tabName ="root", icon = icon("folder")),

 menuItem("My Home", tabName ="home", icon = icon("home")),

 menuItem("Document", tabName ="document", icon = icon("document"))

)



),

dashboardBody(



tags$head(tags$style(HTML('

             /* logo */

             .skin-blue .main-header .logo {

             background-color: rgb(255,255,255); color:    rgb(0,144,197);

             font-weight: bold;font-size: 24px;text-align: Right;

             }



             /* logo when hovered */



             .skin-blue .main-header .logo:hover {

             background-color: rgb(255,255,255);

             }





             /* navbar (rest of the header) */

             .skin-blue .main-header .navbar {

             background-color: rgb(255,255,255);

             }



             /* main sidebar */

             .skin-blue .main-sidebar {

             background-color: rgb(255,125,125);;

             }



             # /* main body */

             # .skin-blue .main-body {

             # background-color: rgb(0,144,197);

             # }



             /* active selected tab in the sidebarmenu */

             .skin-blue .main-sidebar .sidebar .sidebar-menu .active a{

             background-color: rgb(107,194,0);

             color: rgb(255,255,255);font-weight: bold;font-size: 18px;

             }



             /* other links in the sidebarmenu */

             .skin-blue .main-sidebar .sidebar .sidebar-menu a{

             background-color: rgb(255,125,125);

             color: rgb(255,255,255);font-weight: bold;

             }



             /* other links in the sidebarmenu when hovered */

             .skin-blue .main-sidebar .sidebar .sidebar-menu a:hover{

             background-color: rgb(232,245,251);color: rgb(0,144,197);font-weight: bold;

             }



             /* toggle button color */

             .skin-blue .main-header .navbar .sidebar-toggle{

             background-color: rgb(255,255,255);color:rgb(0,144,197);

             }



             /* toggle button when hovered */

             .skin-blue .main-header .navbar .sidebar-toggle:hover{

             background-color: rgb(0,144,197);color:rgb(255,255,255);

             }



#              ')))



))





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



})



shinyApp(ui, server)

.skin-blue .sidebar-menu > li.active > a {

 border-left-color: #ff0000;

}

.skin-blue .sidebar-menu > li.active > a,

.skin-blue .sidebar-menu > li:hover > a {

 border-left-color: #ff0000;

}

请注意，如果您更改仪表板的皮肤主题，您可能还需要在此处更改 CSS，因为它引用了 .skin-blue 主题。另请注意，将鼠标悬停在菜单项上时，这不会改变蓝条的颜色。为此，请将上面的 CSS 更改为

.skin-blue .main-sidebar .sidebar .sidebar-menu .active a{

background-color: rgb(107,194,0);

color: rgb(255,255,255);font-weight: bold;font-size: 18px;

}
library(shiny)

library(shinydashboard)



ui <- dashboardPage(



dashboardHeader(

),



dashboardSidebar(



sidebarMenu(

 menuItem("Folder", tabName ="root", icon = icon("folder")),

 menuItem("My Home", tabName ="home", icon = icon("home")),

 menuItem("Document", tabName ="document", icon = icon("document"))

)



),

dashboardBody(



tags$head(tags$style(HTML('

             /* logo */

             .skin-blue .main-header .logo {

             background-color: rgb(255,255,255); color:    rgb(0,144,197);

             font-weight: bold;font-size: 24px;text-align: Right;

             }



             /* logo when hovered */



             .skin-blue .main-header .logo:hover {

             background-color: rgb(255,255,255);

             }





             /* navbar (rest of the header) */

             .skin-blue .main-header .navbar {

             background-color: rgb(255,255,255);

             }



             /* main sidebar */

             .skin-blue .main-sidebar {

             background-color: rgb(255,125,125);;

             }



             # /* main body */

             # .skin-blue .main-body {

             # background-color: rgb(0,144,197);

             # }



             /* active selected tab in the sidebarmenu */

             .skin-blue .main-sidebar .sidebar .sidebar-menu .active a{

             background-color: rgb(107,194,0);

             color: rgb(255,255,255);font-weight: bold;font-size: 18px;

             }



             /* other links in the sidebarmenu */

             .skin-blue .main-sidebar .sidebar .sidebar-menu a{

             background-color: rgb(255,125,125);

             color: rgb(255,255,255);font-weight: bold;

             }



             /* other links in the sidebarmenu when hovered */

             .skin-blue .main-sidebar .sidebar .sidebar-menu a:hover{

             background-color: rgb(232,245,251);color: rgb(0,144,197);font-weight: bold;

             }



             /* toggle button color */

             .skin-blue .main-header .navbar .sidebar-toggle{

             background-color: rgb(255,255,255);color:rgb(0,144,197);

             }



             /* toggle button when hovered */

             .skin-blue .main-header .navbar .sidebar-toggle:hover{

             background-color: rgb(0,144,197);color:rgb(255,255,255);

             }



#              ')))



))





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



})



shinyApp(ui, server)

.skin-blue .sidebar-menu > li.active > a {

 border-left-color: #ff0000;

}

.skin-blue .sidebar-menu > li.active > a,

.skin-blue .sidebar-menu > li:hover > a {

 border-left-color: #ff0000;

}
赞 (0)
« 上一篇
下一篇 »

相关推荐

  • Spring部署设置openshift

    Springdeploymentsettingsopenshift我有一个问题让我抓狂了三天。我根据OpenShift帐户上的教程部署了spring-eap6-quickstart代码。我已配置调试选项，并且已将Eclipse工作区与OpehShift服务器同步-服务器上的一切工作正常，但在Eclipse中出现无法消除的错误。我有这个错误：cvc-complex-type.2.4.a:Invali…
    2025-04-161

  • 检查Java中正则表达式中模式的第n次出现

    CheckfornthoccurrenceofpatterninregularexpressioninJava本问题已经有最佳答案，请猛点这里访问。我想使用Java正则表达式检查输入字符串中特定模式的第n次出现。你能建议怎么做吗？这应该可以工作：MatchResultfindNthOccurance(intn,Patternp,CharSequencesrc){Matcherm=p.matcher…
    2025-04-161

  • 如何让 JTable 停留在已编辑的单元格上

    HowtohaveJTablestayingontheeditedcell如果有人编辑JTable的单元格内容并按Enter，则内容会被修改并且表格选择会移动到下一行。是否可以禁止JTable在单元格编辑后转到下一行？原因是我的程序使用ListSelectionListener在单元格选择上同步了其他一些小部件，并且我不想在编辑当前单元格后选择下一行。Enter的默认绑定是名为selectNext…
    2025-04-161

  • Weblogic 12c 部署

    Weblogic12cdeploy我正在尝试将我的应用程序从Tomcat迁移到Weblogic12.2.1.3.0。我能够毫无错误地部署应用程序，但我遇到了与持久性提供程序相关的运行时错误。这是堆栈跟踪：javax.validation.ValidationException:CalltoTraversableResolver.isReachable()threwanexceptionatorg.…
    2025-04-161

  • Resteasy Content-Type 默认值

    ResteasyContent-Typedefaults我正在使用Resteasy编写一个可以返回JSON和XML的应用程序，但可以选择默认为XML。这是我的方法：@GET@Path("/content")@Produces({MediaType.APPLICATION_XML,MediaType.APPLICATION_JSON})publicStringcontentListRequestXm…
    2025-04-161

  • 代码不会停止运行，在 Java 中

    thecodedoesn'tstoprunning,inJava我正在用Java解决项目Euler中的问题10，即"Thesumoftheprimesbelow10is2+3+5+7=17.Findthesumofalltheprimesbelowtwomillion."我的代码是packageprojecteuler_1;importjava.math.BigInteger;importjava…
    2025-04-161

  • Out of memory java heap space

    Outofmemoryjavaheapspace我正在尝试将大量文件从服务器发送到多个客户端。当我尝试发送大小为700mb的文件时，它显示了"OutOfMemoryjavaheapspace"错误。我正在使用Netbeans7.1.2版本。我还在属性中尝试了VMoption。但仍然发生同样的错误。我认为阅读整个文件存在一些问题。下面的代码最多可用于300mb。请给我一些建议。提前致谢publicc…
    2025-04-161

  • Log4j 记录到共享日志文件

    Log4jLoggingtoaSharedLogFile有没有办法将log4j日志记录事件写入也被其他应用程序写入的日志文件。其他应用程序可以是非Java应用程序。有什么缺点？锁定问题？格式化？Log4j有一个SocketAppender，它将向服务发送事件，您可以自己实现或使用与Log4j捆绑的简单实现。它还支持syslogd和Windows事件日志，这对于尝试将日志输出与来自非Java应用程序…
    2025-04-161
手机版技术脚本