From 03105db2f0ab46c4050024aef0e80e8652cebd89 Mon Sep 17 00:00:00 2001 From: Dean Attali Date: Sat, 12 Sep 2020 03:59:24 +0000 Subject: [PATCH] add custom.css template to make it easier for users to add their own CSS --- CHANGELOG.md | 1 + README.md | 4 ++++ _layouts/base.html | 1 + assets/css/custom.css | 1 + 4 files changed, 7 insertions(+) create mode 100644 assets/css/custom.css diff --git a/CHANGELOG.md b/CHANGELOG.md index 0e5d5e9..aa35e12 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -14,6 +14,7 @@ One of the major changes in this version is that a lot of time was spent on reth - Added `full-width` YAML option to allow having full-width pages - Added `feed_show_excerpt` config option to show/hide the post excerpts on the feed page - Added `feed_show_tags` config option to show/hide the list of tags on post previews on the feed page +- Added a blank template CSS file `assets/css/custom.css` that's automatically included in all pages that can be used to overwrite any default Beautiful Jekyll ruless - When `nav-short` is turned on, the avatar will also be shorter - Fixed rendering issues with `nav-short` option that caused the body of the page to start too low - Improved the `footer-extra` YAML option to support multiple files instead of only a single file diff --git a/README.md b/README.md index f57a034..0ff2c22 100644 --- a/README.md +++ b/README.md @@ -253,6 +253,10 @@ Beautiful Jekyll is used by 50,000+ people with wildly varying degrees of web sk You can set default values for YAML parameters in the config file. Open the `_config.yml` file, scroll down to the line `defaults:` and that's the section you can use. For more information, see the [official jekyll documentation about default values](https://jekyllrb.com/docs/configuration/front-matter-defaults/). +- ### How do I make small modifications to how my website looks? + + If you want to make any visual changes that are not in `_config.yml`, you'll need to add your own CSS rules to the file `assets/css/custom.css` in order to overwrite the default Beautiful Jekyll style. If you don't know how to use CSS, I highly recommend spending 30 minutes to [learn the basics](https://www.w3schools.com/css/). + - ### How do I use a custom domain for my site? GitHub lets you have your website for free using their `github.io` domain. If you want your own domain (such as `https://myname.com`), it's easy and will cost about $10-$15 per year. First you need to buy a domain name (I recommend [Namecheap](https://namecheap.pxf.io/daattali)) and then follow the [instructions GitHub provides](https://docs.github.com/en/github/working-with-github-pages/managing-a-custom-domain-for-your-github-pages-site). diff --git a/_layouts/base.html b/_layouts/base.html index 7b0dc08..53cbdd2 100644 --- a/_layouts/base.html +++ b/_layouts/base.html @@ -2,6 +2,7 @@ common-css: - "/assets/css/bootstrap-social.css" - "/assets/css/beautifuljekyll.css" + - "/assets/css/custom.css" common-ext-css: - href: "https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" sri: "sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" diff --git a/assets/css/custom.css b/assets/css/custom.css new file mode 100644 index 0000000..54b7b58 --- /dev/null +++ b/assets/css/custom.css @@ -0,0 +1 @@ +/* Add your own CSS rules here to overwrite any Beautiful Jekyll defaults */