Set options for the styling of the Rmarkdown theme to use on the page
theme to use for the page
primary color for the theme
make header sticky, TRUE or FALSE
include image such as logo in the header
color for the title of the page
set a list group icon
set the font family
set the global text color
styles for themeing the page
More examples and demo pages for are located at this link - https://github.com/oobianom/sciRmdTheme.
set.theme("wide")
#> <style>body {margin: 0;font-family: -apple-system,BlinkMacSystemFont,fontfamilyplaceholder,"Times New Roman", Times;font-weight: 400;line-height: 1.5;color: fontcolorplaceholder!important;text-align: left;background-color: #fff;}.tocify .list-group-item {border-radius: 10px!important;}*, ::after, ::before {-webkit-box-sizing: border-box;box-sizing: border-box;}div {display: block;}.row-fluid{display: -ms-flexbox;display: -webkit-box;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;margin-right: -15px;margin-left: -15px;}body > .row-fluid:first-child{margin-top: 100px;}.row-fluid:first-child > div:first-child{background: -o-linear-gradient(left, #fff 50%, #f8f8f8 100%);background: -webkit-gradient(linear, left top, right top, color-stop(50%, #fff), to(#f8f8f8));background: linear-gradient(to right, #fff 50%, #f8f8f8 100%);border:0px solid gray;border-right:1px solid #ccc;-webkit-box-shadow: 1px 1px 10px 1px rgb(0 0 0 / 23%);box-shadow: 1px 1px 10px 1px rgb(0 0 0 / 23%); /* right and left only */-webkit-box-shadow: 5px 1px 11px -5px rgb(0 0 0 / 23%);box-shadow: 5px 1px 11px -5px rgb(0 0 0 / 23%); /* right only */-webkit-box-shadow: 0px 0px 0px 0px rgb(0 0 0 / 23%);box-shadow: 0px 0px 0px 0px rgb(0 0 0 / 23%); /* none */}a:hover{color:gray!important;}.list-group-item {position: relative;display: block;padding: 10px 15px;margin-bottom: -1px;background-color: transparent;border: 0px solid #ddd;}.tocify ul, .tocify li {line-height: 20px;}.tocify ul, .tocify li {list-style: none;margin: 0;padding: 0;border: none;line-height: 30px;}.tocify-header {text-indent: 10px;}.list-group {padding-left: 0;margin-bottom: 20px;}.list-group-item.active, .list-group-item.active:focus, .list-group-item.active:hover {z-index: 2;color: #fff;background-color: gray;border: 0px solid;}#header{background-color: #fff;border-bottom: 1px solid #ccc;padding-top: 10px;}#header .title{color: headercolorplaceholder!important;}.yellow{background-color:yellow;}.red{background-color:red;}.green{background-color:green;}#header {position: sticky;top: 0;z-index: 999;}#headerx:before {background-image: url(headerximgurl);content: "";float: right;width: calc(100%/4);margin-top: 10px;height: 100px;background-size: cover;}.list-group-item.active:hover {opacity:0.7;}.list-group-item.active::before, .list-group-item::before {display: inline-block;font-style: normal;font-variant: normal;text-rendering: auto;-webkit-font-smoothing: antialiased;float:left;}#TOC {margin: 25px 0px 20px 0px;}div.tocify {width: 20%;max-width: 260px;max-height: 85%;}.tocify {width: 20%;max-height: 90%;overflow: auto;margin-left: 2%;position: fixed;border: 0px solid #ccc;border-radius: 6px;}.container-fluid {}.main-container{}@media (min-width: 1200px).container, .container-lg, .container-md, .container-sm, .container-xl {max-width: unset!important;}@media (min-width: 992px).container, .container-lg, .container-md, .container-sm {max-width: unset!important;}@media (min-width: 768px).container, .container-md, .container-sm {max-width: unset!important;}@media (min-width: 576px).container, .container-sm {max-width: unset!important;}div.main-container {max-width: unset!important;}.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl {width: 100%;padding-right: 15px;padding-left: 15px;margin-right: auto;margin-left: auto;}h1, .h1 {font-size: 30px!important;}h2, .h2 {font-size: 24px!important;}h3, .h3 {font-size: 18px!important;}h4, .h4 {font-size: 14px!important;}h5, .h5 {font-size: 12px!important;}h6, .h6 {font-size: 10px!important;}h4, .h4, h5, .h5, h6, .h6 {margin-top: 10px;margin-bottom: 10px;}h1, .h1, h2, .h2, h3, .h3 {margin-top: 20px;margin-bottom: 10px;}h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {font-family: inherit;font-weight: 500;line-height: 1.1;color: inherit;}h1 {margin: 0.67em 0;font-size: 2em;}.sliderimageinput,.slidertableinput, .slidertablefont {accent-color: gray;display: inline-block!important;width: 40%!important;}.slidertableinput, .slidertablefont {width: 100%!important;}.d-flex{ display: flex; }.slidertable {border-collapse: collapse;margin: 25px 0;box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);}.slidertable th,.slidertable td {padding: 12px 15px;}.slidertable tbody tr, .slidertable tr {border-bottom: 1px solid #dddddd;}.slidertable tbody tr:nth-of-type(even), .slidertable tr:nth-of-type(even) {background-color: #f3f3f3;}.slidertable tbody tr:last-of-type, .slidertable tr:last-of-type {border-bottom: 2px solid gray;}.slidertable thead tr, .slidertable > tr {background-color: gray;color: #ffffff;text-align: left;}.font-weight-bold{font-weight:bold!important;}div.tocify {width: 23%!important;max-width: unset!important;max-height: 85%!important;}</style><script>$(window).load(function () { $('.list-group-item').prepend('<b>⚈ </b>'); /*elements with images*/ $( "p:has(img)" ).each(function(index,item){ $(this).addClass( "sliderimagep"+index); $(this).prepend('<div class="d-flex font-weight-bold">Resize image:  <input class="sliderimageinput" type="range" min="1" max="100" value="50"></div>'); }); $(".sliderimageinput").on('input',function(){ let newwidth = $(this).val(); $(this).parent().parent().children("img").each(function(index,val){ $(this).attr('width',newwidth+"%"); }); }); /*elements with tables*/ $( "table" ).each(function(index,item){ $(this).addClass( "slidertable slidertable"+index); $('<div class="d-flex font-weight-bold"><div>Resize table size: <input class="slidertableinput" data="'+"slidertable"+index+'" type="range" min="1" max="100" value="100"></div>'+ '<div>Resize table font: <input class="slidertablefont" type="range" min="9" data="'+"slidertable"+index+'" max="50" value="12"></div></div>').insertBefore(this); }); $(".slidertableinput").on('input',function(){ let newwidth = $(this).val(); $("."+$(this).attr("data")).css("width",$(this).val()+"%"); }); $(".slidertablefont").on('input',function(){ let newwidth = $(this).val(); $("."+$(this).attr("data")).css("font-size",$(this).val()+"px"); });});</script>
set.theme(
theme = "default",
color = "purple",
header.sticky=TRUE,
header.image="logo.png",
list.group.icon = "arrow",
font.family = "Arial",
font.color = "#333333",
header.color = "darkblue"
)
#> <style>body {margin: 0;font-family: -apple-system,BlinkMacSystemFont,Arial,"Times New Roman", Times;font-weight: 400;line-height: 1.5;color: #333333!important;text-align: left;background-color: #fff;}.tocify .list-group-item {border-radius: 10px!important;}*, ::after, ::before {-webkit-box-sizing: border-box;box-sizing: border-box;}div {display: block;}.row-fluid{display: -ms-flexbox;display: -webkit-box;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;margin-right: -15px;margin-left: -15px;}body > .row-fluid:first-child{margin-top: 100px;}.row-fluid:first-child > div:first-child{background: -o-linear-gradient(left, #fff 50%, #f8f8f8 100%);background: -webkit-gradient(linear, left top, right top, color-stop(50%, #fff), to(#f8f8f8));background: linear-gradient(to right, #fff 50%, #f8f8f8 100%);border:0px solid purple;border-right:1px solid #ccc;-webkit-box-shadow: 1px 1px 10px 1px rgb(0 0 0 / 23%);box-shadow: 1px 1px 10px 1px rgb(0 0 0 / 23%); /* right and left only */-webkit-box-shadow: 5px 1px 11px -5px rgb(0 0 0 / 23%);box-shadow: 5px 1px 11px -5px rgb(0 0 0 / 23%); /* right only */-webkit-box-shadow: 0px 0px 0px 0px rgb(0 0 0 / 23%);box-shadow: 0px 0px 0px 0px rgb(0 0 0 / 23%); /* none */}a:hover{color:purple!important;}.list-group-item {position: relative;display: block;padding: 10px 15px;margin-bottom: -1px;background-color: transparent;border: 0px solid #ddd;}.tocify ul, .tocify li {line-height: 20px;}.tocify ul, .tocify li {list-style: none;margin: 0;padding: 0;border: none;line-height: 30px;}.tocify-header {text-indent: 10px;}.list-group {padding-left: 0;margin-bottom: 20px;}.list-group-item.active, .list-group-item.active:focus, .list-group-item.active:hover {z-index: 2;color: #fff;background-color: purple;border: 0px solid;}#header{background-color: #fff;border-bottom: 1px solid #ccc;padding-top: 10px;}#header .title{color: darkblue!important;}.yellow{background-color:yellow;}.red{background-color:red;}.green{background-color:green;}#header {position: sticky;top: 0;z-index: 999;}#header:before {background-image: url(logo.png);content: "";float: right;width: calc(100%/4);margin-top: 10px;height: 100px;background-size: cover;}.list-group-item.active:hover {opacity:0.7;}.list-group-item.active::before, .list-group-item::before {display: inline-block;font-style: normal;font-variant: normal;text-rendering: auto;-webkit-font-smoothing: antialiased;float:left;}#TOC {margin: 25px 0px 20px 0px;}div.tocify {width: 20%;max-width: 260px;max-height: 85%;}.tocify {width: 20%;max-height: 90%;overflow: auto;margin-left: 2%;position: fixed;border: 0px solid #ccc;border-radius: 6px;}.container-fluid {}.main-container{}@media (min-width: 1200px).container, .container-lg, .container-md, .container-sm, .container-xl {max-width: 1140px;}@media (min-width: 992px).container, .container-lg, .container-md, .container-sm {max-width: 960px;}@media (min-width: 768px).container, .container-md, .container-sm {max-width: 720px;}@media (min-width: 576px).container, .container-sm {max-width: 540px;}div.main-container {max-width: 1200px!important;}.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl {width: 100%;padding-right: 15px;padding-left: 15px;margin-right: auto;margin-left: auto;}h1, .h1 {font-size: 30px!important;}h2, .h2 {font-size: 24px!important;}h3, .h3 {font-size: 18px!important;}h4, .h4 {font-size: 14px!important;}h5, .h5 {font-size: 12px!important;}h6, .h6 {font-size: 10px!important;}h4, .h4, h5, .h5, h6, .h6 {margin-top: 10px;margin-bottom: 10px;}h1, .h1, h2, .h2, h3, .h3 {margin-top: 20px;margin-bottom: 10px;}h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {font-family: inherit;font-weight: 500;line-height: 1.1;color: inherit;}h1 {margin: 0.67em 0;font-size: 2em;}.sliderimageinput,.slidertableinput, .slidertablefont {accent-color: purple;display: inline-block!important;width: 40%!important;}.slidertableinput, .slidertablefont {width: 100%!important;}.d-flex{ display: flex; }.slidertable {border-collapse: collapse;margin: 25px 0;box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);}.slidertable th,.slidertable td {padding: 12px 15px;}.slidertable tbody tr, .slidertable tr {border-bottom: 1px solid #dddddd;}.slidertable tbody tr:nth-of-type(even), .slidertable tr:nth-of-type(even) {background-color: #f3f3f3;}.slidertable tbody tr:last-of-type, .slidertable tr:last-of-type {border-bottom: 2px solid purple;}.slidertable thead tr, .slidertable > tr {background-color: purple;color: #ffffff;text-align: left;}.font-weight-bold{font-weight:bold!important;}div.tocifyx {width: 23%!important;max-width: unset!important;max-height: 85%!important;}</style><script>$(window).load(function () { $('.list-group-item').prepend('<b>❱ </b>'); /*elements with images*/ $( "p:has(img)" ).each(function(index,item){ $(this).addClass( "sliderimagep"+index); $(this).prepend('<div class="d-flex font-weight-bold">Resize image:  <input class="sliderimageinput" type="range" min="1" max="100" value="50"></div>'); }); $(".sliderimageinput").on('input',function(){ let newwidth = $(this).val(); $(this).parent().parent().children("img").each(function(index,val){ $(this).attr('width',newwidth+"%"); }); }); /*elements with tables*/ $( "table" ).each(function(index,item){ $(this).addClass( "slidertable slidertable"+index); $('<div class="d-flex font-weight-bold"><div>Resize table size: <input class="slidertableinput" data="'+"slidertable"+index+'" type="range" min="1" max="100" value="100"></div>'+ '<div>Resize table font: <input class="slidertablefont" type="range" min="9" data="'+"slidertable"+index+'" max="50" value="12"></div></div>').insertBefore(this); }); $(".slidertableinput").on('input',function(){ let newwidth = $(this).val(); $("."+$(this).attr("data")).css("width",$(this).val()+"%"); }); $(".slidertablefont").on('input',function(){ let newwidth = $(this).val(); $("."+$(this).attr("data")).css("font-size",$(this).val()+"px"); });});</script>