PS I've updated the post to make it clearer!
How to specify different colors for boxes in html to mark internal and external applications?
I'm trying to mark the boxes in different colors as markers for internal and external applications. This html is then passed into a rshiny application.
Internal applications are defined by internal links to web pages with the words astrazeneca, external links are those without the words astrazeneca.
Here is a sample of the html files I have (I have about 50 html files but will only provide one) as an example:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.box {
width: 200px;
height: 200px;
margin: 10px;
padding: 10px;
border: 2px solid black;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.box img {
max-width: 50%;
height: auto;
margin-bottom: 10px;
}
.heading {
font-size: 24px;
font-weight: bold;
text-align: center;
margin-top: 50px;
}
</style>
</head>
<body>
<h2 class="heading">Gene Expression Analysis</h2>
<div class="container">
<div class="box">
<a href= "https://rstudio-connect.scp.astrazeneca.net/RStudio_FLAT/", target=”_blank” >
<img src= "www/FluidigmAnalysisToolkit.v2.png" alt="Box 1">
<p>Fludigm_Browser</p>
<p>Perform Fluidigm data analysis</p>
</a>
</div>
<div class="box">
<a href="https://gtexportal.org/home", target=”_blank”>
<img src="www/gtex.png" alt="Box 2">
<p>GTEx Portal</p>
<p>Gene expression in normal tissue</p>
</a>
</div>
<div class="box">
<a href="https://azcollaboration.sharepoint.com/sites/AZ208/SitePages/BioTuring.aspx?OR=Teams-HL&CT=1670593304007&clickparam =eyJBcHBOYW1lIjoiVGVhbXMtRGVza3RvcCIsIkFwcFZlcnNpb24iOiIyOC8yMjExMzAwNDEwMCIsIkhhc0ZlZGVyYXRlZFVzZXIiOmZhbHNlfQ%3D%3D", target=”_blank”>
<img src="www/bioturing.svg" alt="Box 3">
<p> BioTuring </p>
<p>Platform for single-cell analysis and spatial transcriptomics exploration</p>
</a>
</div>
<div class="box">
<a href="http://informatics.medimmune.com/shiny/scope/", target=”_blank”>
<img src="www/scope.svg" alt="Box 4">
<p>SCOPE</p>
<p>Explore available single cell RNA-Seq studies</p>
</a>
</div>
</div>
<h2 class="heading">Pathway Analysis</h2>
<div class="container">
<div class="box">
<a href="https://clarivate.com/cortellis/learning/clarivate-for-astrazeneca1796/", target=”_blank”>
<img src="www/clarivate.png" alt="Box 1">
<p>Clarivate</p>
<p>Pathway analysis tools from Cortellis including MetaCore</p>
</a>
</div>
<div class="box">
<a href="https://analysis.ingenuity.com/pa/launch.jsp">
<img src= "www/ipa.png" alt="Box 2">
<p>Ingenuity Pathway Analysis</p>
<p>Analyze data using manually curated gene sets</p>
</a>
</div>
<div class="box">
<a href="https://astrazeneca.onramp.bio", target=”_blank”>
<img src= "www/onramp.png" alt="Box 3">
<p>OnRamp - Rosalind</p>
<p>Interactively explore RNA-seq and ChIP-Seq data</p>
</a>
</div>
<div class="box">
<a href="http://software.broadinstitute.org/gsea/msigdb/index.jsp", target=”_blank”>
<img src="www/gsea.png" alt="Box 4">
<p>GSEA</p>
<p>Gene set enrichment analysis</p>
</a>
</div>
</div>
As you can see in the html above, I have almost no links that have "astrazeneca" as the word, like "https://rstudio-connect.scp.astrazeneca.net/RStudio_FLAT/" and another without it, such as "www/bioturing.svg"
Here is the rshiny code, for context purposes:
library(shiny)
ui <- shiny::fluidPage(
theme = shinythemes::shinytheme("united"),
tags$head(tags$style(".navbar {margin-bottom: 0px;}")),
tags$head(
tags$style(".container-fluid {padding-right: 0px; padding-left: 0px;}")
),
navbarPage(
title = div(
img(src = "www/bftb_logo_v8_bare.png", height = "30px"),
"AZ Oncology Bioinformatics Toolbox"
),
windowTitle = "BFTB Landing Page",
tabPanel("Toolbox", icon = icon("wrench"), disable = TRUE,
shinydashboard::dashboardPage(
header = shinydashboard::dashboardHeader(title = " ", titleWidth = 300, disable = TRUE),
shinydashboard::dashboardSidebar(
width = 300 ,
textInput("search_term", "Search for apps:"),
actionButton("search_button", "Search"),
shinydashboard::sidebarMenu(
shinydashboard::menuItem(
"Tools",
tabName = "tools_app",
icon = icon("wrench")
),
shinydashboard::menuSubItem(
"Gene Expression/Signature/Pathways",
tabName = "gene_app",
icon = icon("chart-line")
)
)
),
shinydashboard::dashboardBody(
shinydashboard::tabItems(
shinydashboard::tabItem("tools_app", mod_tools_path_ui("tools_path_ui_1")),
shinydashboard::tabItem("gene_app", mod_gene_expressions_sign_path_ui("gene_expression_sign_path_ui"))
)
)
)
)
)
)
server <- function(input, output){
}
shinyApp(ui = ui, server = server)
And 2 modules: Tool 1
mod_tools_path_ui <- function(id){
ns <- NS(id)
tagList(
)
}
Hegene 1:
mod_gene_expressions_sign_path_ui <- function(id){
ns <- NS(id)
tagList(
shinydashboard::tabItem(
tabName = "gene_app",
fluidRow(
shiny::headerPanel(h3()),
br(),
htmltools::htmlTemplate("www/gene.html")
)
)
)
}
P粉2524239062024-04-03 22:22:59
From what I understand about this question (not sure), you are asking CSS to set different colors for certain links.
You can use two classes for a tags:
<div class="box">
<a class="internal" href="https://rstudio-connect.scp.astrazeneca.net/RStudio_FLAT/" target=”_blank”>
<img src="www/FluidigmAnalysisToolkit.v2.png" alt="Box 1">
<p>Fludigm_Browser</p>
<p>Perform Fluidigm data analysis</p>
</a>
</div>
<div class="box">
<a class="external" href="https://gtexportal.org/home" target=”_blank”>
<img src="www/gtex.png" alt="Box 2">
<p>GTEx Portal</p>
<p>Gene expression in normal tissue</p>
</a>
</div>
Then use CSS like this:
a.internal:link {
color: green;
background-color: transparent;
text-decoration: none;
}
a.internal:visited {
color: pink;
background-color: transparent;
text-decoration: none;
}
a.internal:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}
a.internal:active {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
a.external:link {
color: crimson;
background-color: transparent;
text-decoration: none;
}
a.external:visited {
color: cyan;
background-color: transparent;
text-decoration: none;
}
a.external:hover {
color: midnightblue;
background-color: transparent;
text-decoration: underline;
}
a.external:active {
color: lime;
background-color: transparent;
text-decoration: underline;
}
You should be careful using class names like container and box as they may already be used in Shiny(dashboard).
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.box {
width: 200px;
height: 200px;
margin: 10px;
padding: 10px;
border: 2px solid black;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.box img {
max-width: 50%;
height: auto;
margin-bottom: 10px;
}
.heading {
font-size: 24px;
font-weight: bold;
text-align: center;
margin-top: 50px;
}
a.internal:link {
color: green;
background-color: transparent;
text-decoration: none;
}
a.internal:visited {
color: pink;
background-color: transparent;
text-decoration: none;
}
a.internal:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}
a.internal:active {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
a.external:link {
color: crimson;
background-color: transparent;
text-decoration: none;
}
a.external:visited {
color: cyan;
background-color: transparent;
text-decoration: none;
}
a.external:hover {
color: midnightblue;
background-color: transparent;
text-decoration: underline;
}
a.external:active {
color: lime;
background-color: transparent;
text-decoration: underline;
}
</style>
</head>
<body>
<h2 class="heading">Gene Expression Analysis</h2>
<div class="container">
<div class="box">
<a class="internal" href="https://rstudio-connect.scp.astrazeneca.net/RStudio_FLAT/" target=”_blank”>
<img src="www/FluidigmAnalysisToolkit.v2.png" alt="Box 1">
<p>Fludigm_Browser</p>
<p>Perform Fluidigm data analysis</p>
</a>
</div>
<div class="box">
<a class="external" href="https://gtexportal.org/home" target=”_blank”>
<img src="www/gtex.png" alt="Box 2">
<p>GTEx Portal</p>
<p>Gene expression in normal tissue</p>
</a>
</div>
</div>
</body>
</html>