recherche

Maison  >  Questions et réponses  >  le corps du texte

Comment puis-je donner à ma boîte une couleur différente en HTML ?

P.S. J'ai mis à jour cet article pour que ce soit plus clair !

Comment attribuer différentes couleurs aux cases en html pour marquer les candidatures internes et externes ?

J'essaie d'étiqueter les boîtes de différentes couleurs comme marqueurs pour les applications internes et externes. Ce code HTML est ensuite transmis à une application rshiny.

Les candidatures internes sont liées par 内部有 astrazeneca 字样的网页链接定义的，外部链接是那些 没有 astrazeneca.

Voici un échantillon des fichiers html dont je dispose (j'ai environ 50 fichiers html mais je n'en fournirai qu'un) à titre d'exemple : 

<!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>

Comme vous pouvez le voir dans le html ci-dessus, j'ai quelques liens avec "astrazeneca" comme mot, comme "https://rstudio-connect.scp.astrazeneca.net/RStudio_FLAT/" et un autre sans, comme "www/bioturing.svg"

Voici le code rshiny, à des fins de contexte : 

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)

Et 2 modules : Outil 1

mod_tools_path_ui <- function(id){
  ns <- NS(id)
  tagList(
    
  )
}

Et le gène un :

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粉953231781P粉953231781261 Il y a quelques jours461

répondre à tous(1)je répondrai

  • P粉252423906

    P粉2524239062024-04-03 22:22:59

    D'après ce que j'ai compris de la question (pas sûr), vous demandez au CSS de définir des couleurs différentes pour certains liens.

    Vous pouvez utiliser deux classes pour la balise a : 

            <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>

    Ensuite, utilisez CSS comme ceci : 

            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;
        }

    Vous devez être prudent en utilisant des noms de classe comme container 和 box car ils peuvent déjà être utilisés dans Shiny (tableau de bord). 

    <!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>

    répondre
    0
  • Annulerrépondre