I am trying to override the "forkme" banner on my github.io page to get a better understanding of how Jekyll, HTML, CSSand GitHub works.
For that purpose, I created my ./assets/css/style.css file as mentioned in the readme of the official documentation on how to customize the CSS of the officially supported GitHub themes. I added the following CSS to it:
#forkme_banner { display: none; }
However, no luck, the banner doesn't disappear. Even adding fictitious elements to the CSS file like #test {testing: testtest;} doesn't add the line to my CSS file.
rename assets/css/style.css to style.scss
and change your scss code to :
---
---
#import "{{ site.theme }}";
#footer_wrap {display: none;}
#forkme_banner {display: none;}
#downloads {display: none;}
#whocares {haha: hehe;}
First and foremost thing is that the CSS changes takes time to update because it will be cached at their servers.
It usually takes 15-45 minutes for me but for few, it is taking 3 hours. I think it depends on the server location that Github pages are hosed if I am not wrong.
Coming to issue
`./assets/css/style.css
// change to
./assets/css/style.scss`
it should be changed to .scss.
Another troubleshoot that I encountered is
---
---
#import "{{ site.theme }}";
/* "{{ site.theme }}" = Your theme name */
/* Eg: #import 'jekyll-theme-cayman'; */
/* Your css rules goes after this */
.page-header {
background: #191c20;
}
Related
I am using marp-cli to create lecture slides.
In order to fine tune the slide content, I have created a custom-css that extends some style rules implemented in the marp default css template.
My objective:
I want to externalize the css rules in acustom-theme.css file and remove them from the .md-document in which the slide's content resides.
The problem:
When calling the custom-theme.css using marp-cli with the --theme-set option, I can not specify that my css "extends" the style rules of the default template.
The question:
How can I specify that my custom-theme.css is defined on the basis of the marp default template?
Thanks in advance for the support.
In case other users experience the same issue, the solution to the problem is stated here in form of an example – provided by Yuki Hattori (the main developer of the marp toolset):
Marp: Markdown.md
---
theme: custom-theme
---
# Hello, world!
/* custom-theme.css */
/* #theme custom-theme */
#import 'default';
section {
/* Override default background */
background: #def;
}
Marp-cli:
marp --engine ./engine.js --bespoke.progress --watch --theme-set custom-theme.css -- mymarkdo
see also:
https://github.com/marp-team/marp-cli/issues/266
There is an on-the-fly theme rendering in VS Code without the need of the CLI.
install the marp-team.marp-vscode extension
paste the below snippet into .vscode/settings.json
change your *.css paths and styles accordingly
// Please put `.vscode/settings.json` on your workspace
{
"markdown.marp.themes": [
"https://example.com/foo/bar/custom-theme.css",
"./themes/your-theme.css"
]
}
I read about using a child theme to make it fast and easy to modify a WordPress theme. I followed directions and created a directory with a file style.css containing the following
/*
Theme Name: IBD Page
Description: IBD Page is based on Twenty Sixteen
Template: twentysixteen
*/
#import url(../twentysixteen/style.css);
article header h1 {font-size:3em}
article header h1 {color:blue}
However, the element only partly changes. The color changes to blue, but the font-size does not. I tried a few different font sizes.
Why didn't that work?
======= :-) ======= :-) ======= :-) =======
Arthur gave the correct answer, below. For those that get here, the following works for this problem when using a child of the Twenty Sixteen theme.
/*
Theme Name: IBD Page
Description: IBD Page is based on Twenty Sixteen
Template: twentysixteen
*/
#import url(../twentysixteen/style.css);
/* Making the article titles 20 point */
.content-area .site-main article header h1,
article .entry-header .entry-title a
{ font-size: 20pt; }
Twenty Sixteen sets the font size itself, and its CSS selectors are probably more specific than yours. If you make your selectors more specific, your rules will override the parent theme's rules.
See developer.mozilla.org/en-US/docs/Web/CSS/Specificity for more detail on specificity.
your statements should end with a semi-colon
and because both statements relate to the same tag I would put both of them together _
try this
article header h1 {
color : blue;
font-size: 3em;
}
I decided to combine my CSS by including other CSS files withing a single one.
mystyles.css
#charset "utf-8";
#import url("font-awesome.min.css");
#import url("bootstrap.css");
#import url("bootstrap-theme.css");
html {
position: relative;
min-height: 100%;
overflow-y: scroll
}
It seems it includes CSS but font awesome stopped showing icons, because it also references fonts as in:
#font-face{font-family:'FontAwesome';src:url('../fonts/fontawesome-webfont.eot?v=4.7.0');
My file structure is
/incl/css/mystyles.css
/incl/fonts/font files
How do I fix icons?
Consider using FontAwesome's CDN, it would prevent this kind of problem.
Besides, this way you can update it quickly.
Register and get your embed code at http://fontawesome.io/get-started/
Or directly at (check the version): https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
In Jekyll, when I set the Markdown converter to kramdown and bundle exec jekyll serve, this fenced code block
```javascript
function hey(name) {
return 'Hey ' + name;
}
console.log(hey('Brienna'));
```
renders like this:
This happens no matter what I do. I've tried setting the input: GFM option, but it doesn't make a difference whether or not it's included.
However, when I set the Markdown converter to Redcarpet, the same code block renders like this:
This is what I want to see! But I don't want to use Redcarpet. I want to use kramdown.
As you can see from the rendered HTML below, the code block gets highlighted. I'm using a CSS stylesheet for Pygments, which Rouge is supposed to be able to work with. I noticed that the div's class changed between Markdown converters. With kramdown, its class is .highlighter-rouge, whereas with Redcarpet, its class is just highlight. Do I need to manually modify the CSS if switching between Markdown converters?
Kramdown:
Redcarpet:
Your Pygments CSS file looks like this:
.highlight { font-size: 13px; }
div.highlight, div.highlight code, div.highlight pre { background: #29281e; }
div.highlight code { padding: 0; }
div.highlight .c { color: #75715e } /* Comment */
In the Kramdown output, the .highlight block is no longer a <div>, so simply removing all "div" instances from the CSS would restore syntax highlighting.
Bonus: without specifically targeting <div>, your CSS now works with output of both Markdown processors.
For the fenced code blocks to work in Kramdown, you need to turn on recognition of GitHub Flavored Markdown:
kramdown:
input: GFM
Note that Jekyll reads _config.yml only once at execution time. You need to restart jekyll serve for further changes to apply.
I'm using Jekyll to host a site on Github pages. The problem lies in referencing file paths within css files.
I'd like to do something like this:
body { {background: #FFF url('{{ site.baseurl}}/images/page_bg.JPG') center 0 no-repeat; background-attachment: fixed; color: #4b595f; }
But it doesn't seem that Jekyll process the css files, so site.baseurl never gets swapped out.
There are other situations where I can't just change it to an inline style, so assume that's not a possibility.
Using the trick from Brian Willis' answer won't work with SASS in #import-ed files.
Instead, you can do this:
main.scss
---
---
$baseurl: "{{ site.baseurl }}";
#import "myfile";
_sass/_myfile.scss
myclass {
background: url($baseurl + "/my/image.svg");
}
Don't forget
the quotes around "{{ site.baseurl }}" (important in case of empty site.baseurl, and probably more robust) and
the plus sign with $baseurl + "/my/image.svg".
Jekyll processes all files that have YAML front matter. Stick a front matter section (even if it's empty) at the beginning of your file, and Jekyll will transform it correctly. Try using this at the start of the file:
---
title: CSS stylesheet
---