How to change the font of some textOutput elements?
You can add CSS to elements with style tags. (Or include them as a CSS file, see here.) I think this can guide you in the right direction:
ui <- shinyUI(
fluidPage(
tags$style("#x1_current_week {font-size:20px;
color:red;
display:block; }"),
tags$style("#x1_previous_week {font-size:15px;
display:block;
bottom: 12px;
position:absolute;
width: 100%;
left:0px;}"),
div(style="text-align:center;
box-shadow: 10px 10px 5px #888888;
width:200px;
height:200px;
padding-top:70px;
position:relative;",
textOutput("x1_current_week"),
textOutput("x1_previous_week")
)
)
)
server <- function(input,output)
{
output$x1_current_week <- renderText("x1 this week")
output$x1_previous_week <- renderText("x1 prev week")
}
shinyApp(ui,server)
Hope this helps!
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.
How to change the font family of verbatimTextOutput to be the same as the input in Shiny and Shinydashboard?
Try font-family: 'Source Sans Pro','Helvetica Neue',Helvetica,Arial,sans-serif;
So your tags$head will be:
tags$head(
tags$style(
HTML(
"#Number_out {
font-family: 'Source Sans Pro','Helvetica Neue',Helvetica,Arial,sans-serif;
font-size: 14px;
}"
)
)
)
EDIT
In Chrome, if you right click and click on Inspect then scroll down to find relevant style elements:
And on bottom right you can see:
Change colour of text output as text value changes when invalidated with reactiveTimer in shiny
Sure. In summary we store the price, get the new price, if the price is down make the text red, then we quickly run again to produce the flash effect.
For testing I added buttons to simulate the price going up and down. I also made it check for changes more frequently.
The flash length can be changed at this line: invalidateLater(1200).
library(quantmod)
library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
library(shinyWidgets)
ui <- dashboardPage(
dashboardHeader(title = "Example"),
dashboardSidebar(
sidebarMenu(
ID = "tabs",
menuItem(text = "Naspers", tabName = "tabNaspers", icon = icon("chart-line"))
)
),
dashboardBody(
tags$head(tags$style(HTML('.fas { font-size: 36px; }.fas {vertical-align: middle;} #'))),
tabItems(
tabItem(tabName = "tabNaspers",
fluidRow(
column(
width = 7,
boxPlus(title = span("ALL SHARE", style = "color: rgb(128,128,128); font-size: 22px"),
collapsible = TRUE,
closable = FALSE,
enable_dropdown = TRUE,
dropdown_icon = "NULL",
status = 'success',
valueBoxOutput('npn_price', 12),
valueBoxOutput('npn_day_change', 12),
width = 4
)
)
),
#Buttons to simulate stock going up, so that we don't have to wait for the stock to actually go up or down
actionButton('btn_stockgoesup', 'Simulate Stock Going Up'),
actionButton('btn_stockgoesdown', 'Simulate Stock Going Down')
)
)
)
)
npn_close <- 203059.00
server <- function(input, output, session){
autoInvalidate <- reactiveTimer(intervalMs = 6000)
#Buttons to simulate stock going up, so that we don't have to wait for the stock to actually go up or down
observeEvent(input$btn_stockgoesup, {npn_last_stored <<- 0 ; print('At the next update the stock will simulate going up')})
observeEvent(input$btn_stockgoesdown, {npn_last_stored <<- Inf; print('At the next update the stock will simulate going down')})
output$npn_price <- renderUI({
autoInvalidate()
npn_last <- getQuote("NPN.JO", what=yahooQF("Last Trade (Price Only)"))[, 2]
#Handle when app first starts and there is no stored value to compare against
if(exists('npn_last_stored') == FALSE) {npn_last_stored <<- npn_last}
if(npn_last < npn_last_stored) {
#Stock went down
print('stock went down')
npn_color <- 'rgb(220, 50, 20)'
invalidateLater(1200)
} else {
#Stock went up / not changed
print('stock went up / not changed')
npn_color <- 'rgb(0, 0, 0)'
}
#Update stored value
npn_last_stored <<- npn_last
npn_change <- round((npn_last - npn_close) / npn_close, 4) * 100
arrow_color <- ifelse(npn_change > 0, 'rgb(15, 157, 88)' ,'rgb(226, 74, 26)')
npn_diff <- npn_last - npn_close
npn_diff <- ifelse(npn_diff < 0, paste0('-', npn_diff), paste0('+', npn_diff))
tags$div(HTML(paste0('<span style="color:', npn_color, '; font-size: 24px"><strong>', npn_last, '</strong></span>', '<span style="color:', arrow_color, '; font-size: 14px">', npn_diff, '</span>')))
})
output$npn_day_change <- renderUI({
autoInvalidate()
npn_last <- getQuote("NPN.JO", what=yahooQF("Last Trade (Price Only)"))[, 2]
npn_change <- round((npn_last - npn_close) / npn_close, 4) * 100
npn_change <- paste0(npn_change, "%")
arrow_color <- ifelse(npn_change > 0, 'rgb(15, 157, 88)' ,'rgb(226, 74, 26)')
arrow_icon <- ifelse(npn_change < 0, '"fas fa-caret-down"', '"fas fa-caret-up"')
tags$div(HTML(paste0('<i class=', arrow_icon, ' style = "color:', arrow_color,';"></i><span style="color:', arrow_color,'; font-size: 24px"><strong>',npn_change, '</strong></span>')))
})
}
shinyApp(ui, server)
Change font family throughout entire R Shiny App: CSS/HTML
You can put the font-family you want in a body selector
body { font-family: Arial;}Font color for single text element in Shiny bsPopover
As an alternative you can use dropMenu from shinyWidgets, and directly use HTML tags inside it:
library(shiny)
library(shinydashboard)
library(shinyWidgets)
ui <- dashboardPage(
title = 'My Title',
###### Header ####
header=dashboardHeader(
title = 'Title'
),
sidebar=dashboardSidebar(
disable = TRUE
),
###### Body ####
body = dashboardBody(
fluidRow(
dropMenu(
actionButton(
inputId = "attend",
label = "",
icon = icon('info')
),
tags$div(
tags$span(style = "color: #22a783;", "green"),
tags$span(style = "color: red;", "Red"),
tags$span(style = "color: green;", "Green"),
"Black"
),
placement = "bottom",
trigger = "mouseenter"
)
)
)
)
#################### SERVER ####################
server = function(input, output, session) {
}
# Run the application
shinyApp(ui = ui, server = server)
textOutput aligned with selectInput element
One way is to wrap your textOutput(outputId = "outputText1") with a tags$div and add a top padding.
library(shiny)
u <- fluidPage(
titlePanel("Simple Selectable Reactive Function"),
sidebarLayout(
sidebarPanel(),
mainPanel(
h2("Results"),
fluidRow(column(2,
selectInput("aa", "Choose a function", choices=c("sin","cos","exp"))
),
column(2,
tags$div(textOutput(outputId = "outputText1"), style = "padding-top:30px;")
)
)
))
)
s <- function(input,output){
output$outputText1 <- renderText({
paste("Sample text")
})
}
shinyApp(ui=u,server=s)
Alternative use two fluidRow to make it more responsive.
In this case the label of the selectInput is set to NULL and e.g. a h5 element is used instead.
library(shiny)
u <- fluidPage(
titlePanel("Simple Selectable Reactive Function"),
sidebarLayout(
sidebarPanel(),
mainPanel(
h2("Results"),
fluidRow(column(2, h5(tags$b("Choose a function")))),
fluidRow(column(2, selectInput("aa", label = NULL, choices=c("sin","cos","exp"))),
column(2,textOutput(outputId = "outputText1")))
)
)
)
s <- function(input,output){
output$outputText1 <- renderText({
paste("Sample text")
})
}
shinyApp(ui=u,server=s)
Related Topics
Chrome Incorrectly Rendering Pixels as Fractions
Sass Image CSS Cache Busting (Via Compass)
Equal Height Divs (Two Column)
4 Columns Elastic CSS with Top-Left Box Spanning 2 Columns. How
Doctype and Quirk Modes and HTML 5
Will Whitespace or Wrap Be Ignored Between Two Block Elements in HTML
Remove Element for Certain Screen Sizes
Issue on Ie7 When Page Is Scrolling.Text Is Not Proper
CSS3 Transform: Translate3D Doesn't Affect The Z-Axis
How to Make a Div Grow in Height While Having Floats Inside
Conditional CSS in CSS Not Working
How to Change a Div Padding Without Affecting The Width/Height
Fixed Div Does Not Go Beyond The Screen's Right Edge
How to Use Tick/Checkmark Symbol (✓) Instead of Bullets in Unordered List