communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Comment puis-je donner à ma boîte une couleur différente en HTML ?
P粉953231781
P粉953231781 2024-04-02 23:21:49
0
1
463

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粉953231781
P粉953231781

répondre à tous(1)
P粉252423906
P粉2524239062024-04-03 22:22:59 1 plancher

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>
Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal