Configuring global stylesheets for Github pages using _config.yml

I have been utilizing Github pages with one of the available themes (automatically generated by Github, not locally). I am looking to make global CSS tweaks without having to add import statements to each individual page.

To achieve this, I created a stylesheet within my project located at: /assets/css/nbstyle.css, and then included the following in my _config.yml file:

defaults:
  -
    scope:
      path: ""
    values:
      stylesheet: "css/nbstyle.css"

However, it appears that my custom stylesheet is being disregarded. What is the proper method for specifying a custom style sheet through _config.yml? Will this override the theme's CSS entirely, or will both stylesheets be imported?

(Or perhaps this functionality is not feasible at all?)

cssgithub-pages

Answer №1

After spending some time delving into the documentation and examples, everything finally clicked for me.

All I needed to do was create a new file: /assets/css/style.scss

Then, within that file, include:

---
---

@import "{{ site.theme }}";

From there, I could easily add any additional (s)css styling I wanted without touching _config.yml.

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

"Looking to modify a style within an iframe with React? Here's how you can do it

I want to include an iframe in my react component, but I need to hide a specific element within it. The iframe source comes from an external domain. Is there a way to add custom CSS to the iframe so that I can achieve this? Below is the code for my compo ...

javascripthtmlcssreactjsiframe

How can we ensure our wrapper/container design is responsive?

Having some difficulties creating a wrapper for a responsive image slider. I want it to resize as the window is resized, but it's not working properly. Can anyone help me figure out what I'm doing wrong? Note* I only need it to be responsive on ...

htmlcsscontainerswrapper

The vertical dimension of an element does not increase

Currently, I am working on a webpage with a header, page content, and footer sections. The issue I'm facing is that I set the page's height to height :auto;, but it's not functioning as expected. I actually need the page to automatically ex ...

htmlcssheight

Guide on adding dual horizontal scroll bars to a v-data-table (Vue / vuetify)

Currently, I am working on Vue / Vuetify and experimenting with the v-data-table component. While creating a table, I noticed that it has a horizontal scroll bar at the bottom. https://i.stack.imgur.com/noOzN.png My goal now is to implement two horizontal ...

htmlcssvue.jsvuetify.js

Images on web pages are automatically resized to fit into a smaller preview window

Currently, I am facing an issue with the display of images in my grid windows on my website . The images are appearing as partial representations instead of rescaled versions where the whole picture is resized to fit the grid window. I have attempted mod ...

javascripthtmlcssweb

How can jQuery be utilized to enlarge specific <li> elements that are aligned with the right side of the page?

I'm encountering issues with expanding list elements using jQuery. The lists consist of social media icon links that I would like to enlarge upon mouseover. The problem arises when enlarging the width of the li element, causing the ul to also expand. ...

jquerycss

I need assistance with displaying this array either using CSS styling or in table format. Can someone please

Seeking assistance to display this data in table format using tables, css, or bootstrap. Can anyone help? Utilized PHP Code: $url = "http://some-website.com/api/message"; $ch = curl_init($url); curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); $content = cur ...

phphtmlcssarrayshtml-table

Achieve equal height for two v-flex sections placed side by side in Vuetify framework

desired appearance: https://i.sstatic.net/aPrrP.png current appearance: https://i.sstatic.net/JNH2W.png In an attempt to ensure two tables have a consistent and responsive height using Vuetify features, I have implemented the following code: <templa ...

htmlcssvue.jsfrontendvuetify.js

switching the image source by selecting different options from a dropdown menu and leveraging JavaScript

I have been attempting to change the src of an image using JavaScript's addEventListener, but for some reason it is not working. Here is an example to illustrate my issue: let bulbImage = $.querySelector(".bulb-image"); let turnOnOption = $.querySele ...

javascripthtmlcssfrontend

What is the best way to use jQuery to apply CSS only to elements with a specific attribute set?

Currently, I am attempting to utilize jQuery to apply specific CSS styles to elements, but only those that possess a particular attribute. The rationale behind not resorting solely to CSS is due to the immense amount of content on the site, making it impr ...

jquerycssthisattr

Bespoke animated angular material tabs

Having an issue with Angular Material tabs. I have managed to remove the "slide" effect, but I can't figure out how to modify or remove the black effect behind my tab. Can anyone offer some assistance? black effect 1 black effect 2 Here is a snippe ...

cssangularangular-material

Is there a way to enable scrolling on a page without editing the HTML? I have a table inside a div that is overflowing, and I want the page to scroll,

I'm facing an issue with a DIV that is 600px wide and contains a table. Due to long email addresses, the wrapping isn't working properly even after using word-wrap: break-word. I've experimented with changing the width, adding !important, a ...

csshtml-tableoverflow

JavaScript layout: Thymealf

I have a unique thymeleaf template like so: <body> <div id="layout"> <!-- Menu toggle --> <a href="#menu" id="menuLink" class="menu-link"> <!-- Hamburger icon --> <span>& ...

javascriptcsshtmlthymeleaf

Limiting overflow:visible to input and select fields only

I'm currently facing an issue with a Lightning Web Component in Salesforce, however, I believe the root cause of this problem is not specific to this platform. Within my container div, I have row divs displaying select/combobox fields that need to ex ...

cssscrollbaroverflow

Ways to shorten text on mobile screens using CSS

Is it possible to use CSS to truncate text based on the current screen size or media queries? For example, consider this paragraph: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porta tortor vitae nisl tincidunt varius. Lorem ipsum dolor ...

cssresponsive-designtruncate

Is the font style utilized in the Yik Yak application part of the CSS font-family library?

Simply put, I am on a quest to discover the font utilized by the Yik Yak app. Additionally, I am curious if this font can be applied to a website through the implementation of the font-family CSS class. ...

cssfontssocial-media

Tips for converting numerical values to visual elements in a JQUERY slider for images

I am looking to incorporate a similar image slider on my website, like the one showcased here: . However, I want the bottom content numbers to be replaced with smaller versions of the images in the slider instead. Does anyone have any suggestions on how I ...

jqueryhtmlcss

Tips for dynamically retrieving a CSS file for an HTML page

With multiple html pages containing the same navbar, I made the decision to place the navbar in its own file called navbar.html and use ajax with jquery.get() to dynamically load it onto each page. This prevents redundant code across all pages. Currently, ...

htmlcssajax

Using Material-UI with ReactJS: Implementing color alternation in Material-UI <Table/>'s <TableRow/>

I am currently utilizing Material-UI's <Table/> component and I would like to alternate row colors between blue and purple. The first row will be blue, the second row will be purple, and so on for every additional row added. How can I dynamical ...

javascripthtmlcssreactjsmaterial-ui

Apply CSS to a dynamically generated class

My system allows users to create multiple unordered lists (<ul>) with custom class names pulled from a database. Users can add or delete these lists and assign a color to each one. While I can save the color information in the database, I am unsure h ...

javascriptphpjquerycss