ribbon_css: Build a GitHub Ribbon with CSS

In colearendt/ribbon: Add 'Git' Links to Your Web Based Assets

Description

A customizable CSS ribbon with a link to "Fork me on GitHub." CSS passed to the function will override the default CSS to give you the ultimate flexibility in customizing the ribbon to fit your needs.

Usage

ribbon_css(link, position = c("left", "right"), color = "white",
  font_color = "black", border_color = "white",
  text = "Fork me on GitHub", ..., fade = TRUE, link_css = list(),
  parent_css = list(), hover_css = list())

Arguments

link	The URL that the ribbon will link to
position	The position to place the ribbon in (either "left" or "right"). Default: right
color	Any css-valid color specification for the background of the ribbon
font_color	Any css-valid color specification for the text of the ribbon
border_color	Any css-valid color specification for the border of the ribbon
text	The text to show on the ribbon
...	key=value CSS passed along to the ribbon div
fade	boolean. Whether or not the default opacity should be set to < 1, but transition on hover. Default TRUE
link_css	A list of key=value CSS passed along to the link text
parent_css	A list of key=value CSS passed along to the parent div of the ribbon
hover_css	A list of key=value CSS passed along to the .ribbon:hover CSS

Details

The benefits of using CSS are:

- any color you can dream up

- any font / font color you want

- any text you want

- customizable size / location / etc.

- do not have to worry about DPI and image resolution

- link is only clickable on the banner itself

- fancy fade / hover CSS out of the box

Value

HTML that can be injected into any output

Examples

ribbon_css("https://github.com/colearendt/gitlink")
ribbon_css("https://github.com/colearendt/gitlink", position = "left", color = "#e4e4e4" )
ribbon_css("https://github.com/colearendt/gitlink", position = "left", color = "#eafffc")

# make default opacity 1
ribbon_css("https://github.com/colearendt/gitlink", fade = FALSE)

# customize the hover css
ribbon_css("https://github.com/colearendt/gitlink", hover_css = list("opacity" = "0.9"))

url <- "https://github.com/colearendt/gitlink"

# this one is particularly ugly, but proves a point
ribbon_css(url, parent_css = list("background-color" = "red"))

# modify the location for a flexdashboard
ribbon_css(url, parent_css = list(top = "50px", "z-index" = "10"))

colearendt/ribbon documentation built on Dec. 2, 2019, 4:25 a.m.