Utilizing a CSS file within a YAML configuration in R Quarto

Is there a way to reference a css file from a yaml file in my R Quarto Book? The css file defines the theme for my Quarto document, and I want all our Quarto docs to have the same appearance. When I directly call the css file, I can customize aspects like font and size as needed. However, I encounter an error when trying to organize the css file within a directory structure.

ERROR: TypeError: Path must be a string. Received {"value":"here::here("one_care_custom.scss")","tag":"!expr"}

The file my_custom_theme.css is currently located in the root directory of my R project. The following code highlights what works and what doesn't:

format:
  html:
    theme:
      - cosmo
      #- !expr here::here("my_custom_theme.scss") # This fails
      - here::here("my_custom_theme.scss") # This fails
      #- my_custom_theme.scss # this works

I've reviewed a post that I'm struggling to implement How to include a css file using R code in the yaml header?, and also looked for guidance at https://github.com/rstudio/rmarkdown/issues/2470. Can anyone provide any helpful tips?

Essentially, I aim to reference my_custom_theme.css from a specific directory visible to the team, but I seem to be stuck on this initial step.

Thank you, Phil,

Answer №1

Is this solution suitable for your needs?

---
format:
  html:
    theme:
      - cerulean
      - "`r here::here('my_custom_style.scss')`"
---

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The Bootstrap nav-justified feature fails to utilize the entire width available

Have you heard of the bootstrap-4 class called nav-pill? It's meant to make links have equal width and occupy all horizontal space. To achieve equal-width elements, simply use .nav-justified, as suggested. This will ensure that nav links take up al ...

Display overlay objects specifically focused around the mouse cursor, regardless of its position on the screen

I am currently working on a project using SVG files and processing.js to develop a unique homepage that incorporates both animation and static elements. The concept is to maintain the overall structure of the original homepage but with varying colors, esse ...

Tips on updating a specific value within an element stored in an array

I'm currently in the process of setting up a table where each row contains unique values. Using a for loop, I am able to generate these rows and store them in an array. Now, my question arises when I consider modifying a particular value with the id " ...

Mastering the art of changing text color based on element class name in CSS3

Is it possible to dynamically set the text color of a list item based on the class name of its nested span element? For example, if the span has a class of "green", the text color of the parent li should also be green. How can this be achieved? Demo:https ...

Setting up a global CSS and SASS stylesheet for webpack, TypeScript, Phaser, and Angular: A step-by-step guide

A manual configuration has been set up to accommodate all the technologies mentioned in the title (webpack, typescript, phaser, and angular). While it works perfectly for angular component stylesheets, there seems to be an issue with including a global st ...

Transitioning backgrounds in a slideshow

I am attempting to create a unique slideshow effect for my page background by changing the image URL at specific intervals with a smooth fade in and fade out transition. However, I am faced with the challenge of figuring out the best way to achieve this. ...

Exploring Rate Variable Regression in R

My task involved creating a regression model to analyze student enrollment across various programs. The dataset used for this analysis was exceptionally clean and displayed a strong fit with a Poisson distribution for the enrollment counts. I conducted the ...

Aligning with the parent element and adjusting slightly towards the left side

.parent-div { box-sizing: border-box; min-width: 0px; padding: 1rem; min-height: 1px; margin: 0; border: solid 1px; } .child-div-one { box-sizing: border-box; margin: 0; min-width: 0px; min-height: 400px; display: flex; border: sol ...

What is the best way to display a div in Chrome without allowing any user interactions?

I currently have a <div> placed on top of my webpage that follows the mouse cursor. Occasionally, users are able to move the mouse quickly enough to enter the tracking <div>. Additionally, this <div> sometimes prevents users from clicking ...

sliderInput combined with renderUI results in a NULL output in a modularized R Shiny application

In my modularized R Shiny app, I have a unique setup where a sliderInput() is generated within renderUI() to ensure that the value can be properly passed for further processing (specifically, to a renderPrint()). Initially, I tested this configuration in a ...

CSS styling failing to meet desired expectations

Two different elements from different panels are using the same CSS styles, but one displays the desired text while the other does not. The CSS file in question is named grid.css. To see the issue firsthand on my live website, please visit: I am uncertai ...

Aligning text at the center of the page, stacked on top of each other

I am struggling with creating a responsive main page for a website. I am new to this and feeling lost on how to proceed. My goal is to stack text on top of each other in a readable way while also ensuring it looks good on mobile devices. However, my curren ...

Tips for making a sidebar sticky when scrolling

In order to keep the right-side bar fixed, I have implemented this javaScript function: <script type="text/javascript> $(document).ready(function () { var top = $('#rightsidebar-wrapper').offset().top - parseFloat($('#rightsideb ...

Despite using twitter bootstrap, the elements on my webpage are still overlapping one another

While implementing Twitter Bootstrap on my website, I encountered a problem where elements start overlapping if the window size is reduced. This issue does not look appealing, and I expected Twitter Bootstrap to ensure that my website is fully responsive a ...

How can I ensure my custom CSS stylesheet takes precedence over Inline CSS when working with Bootstrap?

Looking to enhance the visual appeal of my website by incorporating CSS properties for background changes. Take a peek at my code: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta ...

Achieving a centered Title while aligning Nav all the way to the right using flexbox: tips and tricks

I am currently using flexbox to align the h1 and nav on the same line with display:flex. I want the title to be centered and the navigation to be on the right side. However, I am struggling to figure out how to move the navigation all the way to the right. ...

Ensure that the dropdown menu remains visible even after the mouse no longer hovers over it

Looking to create a main menu with dropdown items that appear when the user hovers over them? You may have noticed that typically, the dropdown disappears once the hover event is lost. But what if you want the menu to stay visible and only disappear upon c ...

Identify when a browser tab is closed and determine which specific tab out of all the open tabs was closed

Is there a way to identify when a browser or tab is closed in Angular/JavaScript? I would like to know if there are specific events that can be used for detecting these actions. Any advice, information, or code examples on this topic would be greatly app ...

Sliding divider across two div containers with full width

Seeking a JavaScript/jQuery function for a full page slider functionality. The HTML structure I'm working with is as follows: My objectives are twofold: Both slide1 and slide2 should occupy the full width of the page. Additionally, I am looking for ...

Locate the closing anchor tag following the image

I need to locate the closing anchor tag that wraps an image with the class name "cat-image" in order to move a div right after it. However, I am unable to modify the HTML by adding IDs or classes to the anchor or image tags. Below is an example of the HTM ...