How to Change CSS in Rmarkdown Cell & Shiny

How to change css in rmarkdown cell & shiny?

I think your CSS selector is correct, but I'd personally find it easier to just specify that in the typical Shiny way, i.e.,

library(shiny)
library(leaflet)

ui <- fluidPage(
    tags$head(tags$style(HTML(".leaflet-container {background: none;}")))
    leafletOutput("map")
)

server <- function(input, output, session) {
    output$map <- renderLeaflet({
        leaflet(quakes) %>%
            addTiles()
     })
}

shinyApp(ui, server)

For R markdown, you can embed a CSS code chunk as you would an R code chunk, e.g.,

```{css, echo = FALSE}
.leaflet-container {
    background: none;
}
```

```{r}
library(leaflet)

leaflet(quakes) %>%
    addTiles()
```

How do I add css style element to Rmd shiny renderImage?

OK - so I found the answer. And simplicity is the route...

Instead of doing this in shiny renderImage, I learned a lot about how shiny and flexdashboard and markdown work together !!!

I used img html tag as part of the markdown section with direct display tags

<img src="http://www.richpat.com/wp-content/uploads/2019/04/logov5.png"
 alt="Markdown Monster icon"
 style="ftext-align:center; display: center;" />

And I removed the complete shiny renderImage r-code section

As a bonus - and just to show a bit more of what I learned, here is my revised yaml

title: 'Br F A'
output: 
  flexdashboard::flex_dashboard:
    logo: logov5s.png
    theme: readable
    css: BRstyle.css
    navbar: 
    - { title: "About", href: "http://www.richpat.com", align: left }
    source_code: embed
    orientation: columns
runtime: shiny

Shiny: Format tables differently

You dont need a seperate css file. You can have multiple styling in the same file targetting different elements.
You would target the table using its unique id. In CSS id is designated using # so #mytable refers to styling for the element with id=mytable. In your CSS style file you could have for example:

#mytable tr td { 
someattribute: somevalue;
}

this would style the table cells of the table with id=mytable

Referencing HTML-Style Checkboxes in a RMarkdown / Shiny Document

With a few changes you can do it. Introduce a reactive variable to reference your table values.
Add a class to your checkboxes and remove the id.

## make reactive variable
myZ <- reactive({
    addCheckboxButtons <- paste0('<input class = "mycheckbox" type="checkbox" name="row', data$id, '" value="op', data$id, '">',"")
  #Display table with checkbox buttons
  z <- cbind(Pick=addCheckboxButtons, data)
  z
})

Add a callback for your table. When a row is clicked the checkboxes status is checked and returned as a string.

## create table w/ checkboxes
output$mytable = renderDataTable({
  myZ()
},
    callback = "function(table) {
    table.on('click.dt', 'tr', function() {
    Shiny.onInputChange('rows',$('.mycheckbox').map(function(){return this.checked*1;}).get().join(\",\"))
    });
}")

## display table
dataTableOutput({"mytable"})
```

Manipulate the returned string of 0,1 's indicating whether boxes are checked and use it to select from table.

### Total bill
```{r, echo=FALSE}
my_sum <- reactive({
  myZ()$price[myZ()$Pick=="TRUE"]
  })
output$mytext <- renderText({idx <-strsplit(input$rows, ",")[[1]] == "1"
                             sum(myZ()$price[idx])
                             }
                            )
textOutput("mytext")
```

Change the color and font of text in Shiny App

You can use css as @jbaums indicated

library(shiny)
runApp(list(
  ui = bootstrapPage(
    numericInput('n', 'Number of obs', 100),
    textOutput('text1'),
    tags$head(tags$style("#text1{color: red;
                                 font-size: 20px;
                                 font-style: italic;
                                 }"
                         )
              )
  ),
  server = function(input, output) {
    output$text1 <- renderText({ paste("hello input is",input$n) })
  }
))

Normally you would include this in a styles.css file but it is shown inline here to be self contained. #text1 refers to the DOM element with id=text1 and the contents of the curly brackets are the relevant styles.

Change the background color of specific part of shinydashboard body

This could be achieved by adding the CSS rule

#info {
    background-color: white;
}

info is the id of the div tag which contains the content of your Rmd.

---

Related Topics