interactive document not reading css file/ metadata document-css: false?

[robinvt]

Hello,
I am creating an interactive html/shiny document. The css is not being read, and I get no errors, however the render output (below) states document-css: false. This YAML/ css works fine when we publish just to html. Does anyone have any ideas?
I followed the instructions here:External Resources – Quarto The css is in a separate folder called css. There is a subfolder with the image called images. I also tried this with a subfolder www and also tried the regular html way of having the css in the working directory. My yaml is :

title: "TITLE"
format: html
toc: true
server: shiny
title-block-banner: "#85af74"
theme: theme.scss
css: style.css

The CSS is

.quarto-title-block .quarto-title-banner {
  background-image: url(images/logofull.png);
  background-size: 65px;
  background-position: left;
  background-repeat: no-repeat;
  padding-left: 10px;
  background-origin: content-box;
  text-align: center;
}

The render notes are:

Loading required namespace: shiny


processing file: TITLE.qmd
                                                                                                             
output file: TITLE.knit.md

pandoc 
  to: html
  output-file: TITLE.html
  standalone: true
  section-divs: true
  html-math-method: mathjax
  wrap: none
  default-image-extension: png
  toc: true
  css:
    - style.css
  
metadata
  document-css: false
  link-citations: true
  date-format: long
  lang: en
  title: TITLE
  server:
    type: shiny
  title-block-banner: '#85af74'
  theme: theme.scss

Thanks in advance for any insight.

[cderv]

Please to format your question correctly to help any readers help you.

FAQ: How to format your code

Formatting Code: the Basics All code or console output you include in your posts should be formatted properly. Luckily, this is very easy to do! Just use the code formatting button at the top of the post editing box: [image] Select some code Click the </> button! The code formatting button automatically adds special Markdown formatting symbols to whatever you selected. If you check the preview pane to the right of your post, you'll see that the forum software now outputs nicely formatted code . [04] The code formatting button is pretty smart! It can tell the difference between snippets of code that are part of a sentence and blocks of code that stand alone. S…

[nickfredy]

@robinvt

I am creating an interactive html/shiny document. The css is not being read, and I get no errors, however the render output (below) states document-css: false. This YAML/ css works fine when we publish just to html. Does anyone have any ideas?

I followed the instructions here:External Resources – Quarto The css is in a separate folder called css. There is a subfolder with the image called images. I also tried this with a subfolder www and also tried the regular html way of having the css in the working directory. My yaml is :

title: "TITLE"

format: html
toc: true
server: shiny
title-block-banner: "#85af74"
theme: theme.scss
css: style.css

Since the CSS works when publishing to HTML, have you verified if the issue is specific to the Shiny format? Does the CSS load correctly in other Shiny applications?

[robinvt]

Apologies, thank you for the correction.

[robinvt]

Hello,
Thank you for the suggestion to try it just on a Shiny app. I did and it still did not work. I followed the suggestions here: Shiny - Using custom CSS in your app for external css files. I tried the file based css option and the includeCSS(). I think it did not work because the css is using quarto language (quarto-title-block .quarto-title-banner ) which works in a regular quarto html document, but perhaps not in these interactive documents using shiny. I'll play around with some shiny language in the css and see if that helps. Thanks for the suggestion which may lead to an answer !

[nickfreedy]

@robinvt

Thank you for the suggestion to try it just on a Shiny app. I did and it still did not work. I followed the suggestions here: Shiny - Using custom CSS in your app for external css files. I tried the file based css option and the includeCSS(). I think it did not work because the css is using quarto language (quarto-title-block .quarto-title-banner ) which works in a regular quarto html document, but perhaps not in these interactive documents using shiny. I'll play around with some shiny language in the css and see if that helps. Thanks for the suggestion which may lead to an answer !

Have you considered whether the CSS classes you are using are compatible with Shiny’s rendering?

[robinvt]

I'm a statistician, not a CSS person. I'm just trying to put the orgs logo on the title banner in an interactive document. None of the solutions for Shiny placement of logos seem to be relevant, the shiny portion of the documents are about midway down. and the the html solution doesn't work for this application.