I want my CSS file to be shared by several Quarto R presentations, so this CSS file should be placed in a top directory. But Quarto seems to allow CSS files only in the same directory, or in a child directory. I have tried all these configurations without success, starting with the css option in the YAML header:
---
title: "my title"
author: "my name"
format:
revealjs:
css: ...
---
../styles.css
"../styles.css"
..\styles.css
"..\styles.css"
symlink 'style.css'
https://raw.githubusercontent.com/zoometh/thomashuet/master/teachings/stats/styles.css
"https://raw.githubusercontent.com/zoometh/thomashuet/master/teachings/stats/styles.css"
https://github.com/zoometh/thomashuet/blob/main/teachings/stats/styles.css
C:/styles.css
"C:/styles.css"
But also outside the YAML, in the narrative parts and code chunks
<link href="../styles.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="C:/Rprojects/thomashuet/teachings/stats/styles.css">
<link href="https://raw.githubusercontent.com/xxx/xxx/master/teachings/stats/styles.css" rel="stylesheet">
``{css}
<link href="https://raw.githubusercontent.com/zoometh/thomashuet/master/teachings/stats/styles.css" rel="stylesheet" type="text/css">
``
<link rel="stylesheet" type="text/css" href="C:/Rprojects/thomashuet/teachings/stats/styles.css">
So relative paths, absolute paths (local or GitHub), symbolic links, calls outside the YAML header, nothing works.
To share a common CSS stylesheet among several RevealJs presentations, using a CSS stylesheet stored in a GitHub repo seems a good idea.
But using raw.githubusercontent to link the stylesheet will not work, because raw.githubusercontent makes all files use the text/plain MIME type, even if the file is a CSS or JavaScript file. Therefore, the following will not work.
<link href="https://raw.githubusercontent.com/zoometh/thomashuet/master/teachings/stats/styles.css" rel="stylesheet" type="text/css">
One possible solution to this problem is to use jsDelivr.net (A free CDN for open-source projects). We can follow the steps described in this answer,
Steps:
Find your link on GitHub, and click to the "Raw" version.
Copy the URL. In your case which is, https://raw.githubusercontent.com/zoometh/thomashuet/main/teachings/stats/styles.css.
Change raw.githubusercontent.com to cdn.jsdelivr.net.
Insert /gh/ before your username.
Remove the branch name (main in this case).
So the final URL would look like, https://cdn.jsdelivr.net/gh/zoometh/thomashuet/teachings/stats/styles.css. Now you can use this URL within a link tag in a html file and then include the html file using the include-in-header yaml key in the qmd file.
style.html
<link href="https://cdn.jsdelivr.net/gh/zoometh/thomashuet/teachings/stats/styles.css" rel="stylesheet" type="text/css">
presentation.qmd
---
title: "my title"
author: "my name"
format:
revealjs:
include-in-header: style.html
---
Another good solution to this problem is to use Github pages which will host your repo at a special URL like https://‹your_github_userName›.github.io/‹repo›. And you can use this URL to point to a specific folder/files in your repo.
Related
I looked over some of the same questions on stack overflow and tried all the best answers. None of them worked.
I am learning html5 with CSS stylesheet. I looked over a website tutorial of building a web page with login form by flask.
So it has this base.html file which has some code links to a css file:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>RELAX AND WORKOUT</title>
<link rel="stylesheet" href="bulma.css" />
</head>
Originally, followed by 'href' was a http link and it worked. But I downloaded the same css file and put it in the same folder as the base.html file so I can play with this css file.
They are both at ./project/templates/the_file
This is the link to download the css file: https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.css
It was also originally the tutorial author put after 'href='. But when I changed it to my local file name 'bulma.css', it does not load the stylesheet at all.
I also tried absolute path and relative path. Neither of them worked.
I'm running it on Windows 10. Using Python 3.7 and flask.
So in my case, how do I make the html load this local css file?
Edit:
Ok, I made it work eventually.
I made a new folder called "static" and put the css file inside it. Then I changed the path to this:
<link rel="stylesheet" href="../static/bulma.css" />.
Does it mean flask treats the "templates" folder as a special folder only for html templates, it does not recognize other file formats?
But I saw a question which the person put his css file in the same directory. The answer is to just add a dot and it worked. That was why I put it with all the other html templates in my templates folder. But it never worked in my case.
From flask docs:
Flask automatically adds a static view that takes a path relative to the flaskr/staticdirectory and serves it. The base.htmltemplate already has a link to the style.cssfile:
{{ url_for('static', filename='style.css') }}
You need to create a folder called static inside your flask app directory with your static files inside, ex.: CSS, images, etc.
In your html code use:
<head>
<link rel="stylesheet" href= {{ url_for('static', filename='bulma.css') }}>
</head>
Try changing your href="bulma.css" to href="./bulma.css" and see if it works.
Are you sure you don't have to go into the templates folder? "/templates/bulma.css"
Hit F12 to open up the development pane. Go to the network tab. Refresh the page. Is the file listed in that list? You may have to refresh your cache to have it take effect. To do that: CTRL+SHIFT+R. If the file is listed in there you can view the preview to make sure it's current, if not you will still need to do a force refresh on the cache.
As for URL's you can also use an absolute file path starting at the root with href="../project/templates/filename.css" (use 2 periods). The following is a website for more info on this:
https://www.w3schools.com/html/html_filepaths.asp
Problem:
In my HTML file, I have:
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
I want the font to be available to users who can't access fonts.googleapis.com but can access my website.
Solution I went with:
I provide a locally-hosted alternative by following the steps here in google-webfonts.helper. To be specific:
I've created a file roboto.css under my /assets folder and pasted the code in step 3 in the link above.
Downloaded the fonts under /assets/fonts.
Added to index.html: <link href="/assets/roboto.css" rel="stylesheet">
To confirm: I still have the initial google fonts. I.e., my index.html has:
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
<link href="/assets/roboto.css" rel="stylesheet">
Question(s):
(1) Is double-importing that way harmful in anyway?
(2) Is what I'm doing right?
(3) Is there a better way to achieve what I want?
I am doing a project which is building a website for my CS 205 class. I have made it using Notepad++ for the HTML files and Notepad for the CSS files. My site has an index.html page as well as other content pages. I created each each page in Notepad++, with each page having its own CSS file.
I'm having trouble with code that has one CSS file that maintains all headers and footer. And this main CSS file with name "global.css" is placed in the "main css" folder with file index.html. When I try to link the global.css file with other pages, it doesn't work. But it works with index.html... Other pages are in a separate folder named "pages". What should I do?
<head>
<meta charset="utf-8">
<title>Games</title>
<link rel="stylesheet" href="main css\global.css">
<link rel="stylesheet" href="game.css">
</head>
You can use double dot and forward slash, "../", to go one folder out. Also as mentioned in the comments, do not use spaces in the folder names. Use underscores, "_", instead.
For example, your inner pages which are in another folder will have the style page URL like below (please remove the spaces from the folder names):
<link rel="stylesheet" href="../main_css/global.css">
You could also change your HTML file in PHP and just link them with your index... For example, you got an index file where all your CSS links are included like this:
<link rel="stylesheet" type="text/css" href="cssFolder/global.css" />
<link rel="stylesheet" type="text/css" href="cssFolder/game.css" />
And just link all your files with your index like this:
<li>htmlFile</li>
<li>anotherFile</li>
I have the following folders projectCss and inside it i have the folder languageReference,*css* and js.Inside the css folder i have the file style.css.
Inside the languageReference i have the three folders namely iframes,*docs* and cssFiles.Inside the iframes folder,i have the folders codeSamples and htmlFiles.Inside the htmlFiles folder,i have a html file called index.html.
My project setup looks like this visually.
projectCss
*css - style.css
*langugeReference
*docs
*cssFiles
*iframes
*codeSamples
*htmlFiles
*index.html
I am trying to figure out how my path will look like but nothing works.Can i get the path without resulting to serving the page on a web server?.
As Charlie said in the comments, you need to go "up" three folders (../../../) then select the folder and file like so:
<link href="../../../css/style.css" ... />
Alternatively, you could go from the "root", assuming your layout is the root, the following would work too:
<link href="/css/style.css" ... />
Use relative paths :
<link rel="stylesheet" type="text/css" href="../../../css/style.css">
When SharePoint's content editor CSS file (HtmlEditorCustomStyles.css) is customized how can I get the updated css file updated on the client browser?
In testing I've found the updated version is ignored in favor of the browser cached version and I've only been able to get the updated version by deleting the CSS file from the browser cache (or just deleting the cache completely).
If you figure out where the CSS file is being included, you can add a URL parameter to the end of the include. For example if you find the include is:
<link type="text/css" rel="stylesheet" href="[some path]HtmlEditorCustomStyles.css">
You can add:
<link type="text/css" rel="stylesheet" href="[some path]HtmlEditorCustomStyles.css?revision=1">