Currently implementing this Jekyll theme, and I am interested in adjusting the vibrant yellow hue to a different color option (such as gray).
Despite altering the CSS color value, it seems that the background color persists unchanged.
https://github.com/patdryburgh/hitchens/blob/master/_sass/_variables.scss#L1
$brand-color: #fede00;
Where have I made an error? As a newcomer to Jekyll, should I modify other components as well?
The $brand-color sass variable dictates the background color of the body.
Simply altering the color value proved effective for me without any complications.
Here is my process:
Duplicated the project
Modified the color value from $brand-color: #fede00; to $brand-color: #6e6e6c; in the _sass_variables.scss file
Stopped and restarted the Jekyll server
Upon duplicating your project, I encountered some difficulties building it locally. After removing the gemspec file and rectifying your Gemfile, I observed that the color remained consistent, functioning properly in a local environment.
Identifying the cause of the stagnant color on GitHub pages required time and effort. Ultimately, I discovered that the CSS URL mentioned in the index.html file was linked to the original page author's site:
<link rel="stylesheet" href="https://patdryburgh.github.io/assets/css/main.css?1672179035996506134">
The issue stemmed from the fact that the CSS URL in the default layout utilized an absolute URL (refer to here).
To address the absolute URL problem, I modified the baseurl and URL keys in the _config.yml file:
baseurl: "0xtetus.GitHub.io"
url: "https://cadamini.github.io"
In your scenario, update the _config.yml file as shown below:
baseurl: ""
url: "https://0xtetus.github.io"
Greetings! I've been struggling for hours to display a sidenav using Angular 2, with links listed as rows. Here is what my current setup looks like: https://i.sstatic.net/fmmAR.jpg Here is the code I've been working on: <md-sidenav-containe ...
I am looking to create a simulated loading icon that gives the illusion of loading for some calculations, but in reality, it loads quickly. My plan is to increment the animation every second until it appears "complete". I am using CSS3 animations, with a h ...
Here is my current folder structure: development{ core{index.php} css{index.css} } The document root in Apache is set to be development/core/. However, when I try to link the CSS file using a link tag with the path ../css/index.css, it doe ...
Currently, on my to-do list website, I am facing an issue with displaying long event titles in a div on the home screen. The text overflows, and even though I have set the x-overflow to hidden, it's not providing the desired result. I have tried using ...
Just getting started with my first responsive design project, and I'm wondering if it's possible to achieve something like this using Bootstrap 3. The goal is to switch from the current layout: https://i.stack.imgur.com/lABXp.jpg To https://i. ...
Working on a website for a gaming community, known as http://www.quad-gaming.com/. All is running smoothly except for the dropdown menu under "Login" on the right side of the navigation bar. It behaves properly in Chrome and Safari, but in IE and Firefox, ...
Here is the HTML code I am working with: <h4 class="milestonehead" style="cursor: pointer;" onclick="editFun('35');"> Some Header <img src="/images/delete.gif" style="float: right;" onclick="deletefun('35');"> < ...
When visiting the emberjs.com homepage, you will find an example of a todo list using Ember.js and Handlebars.js. Within the todo list, there is an extension for a .hbs file. I am curious - what exactly is a .hbs file? And how can I include a .hbs script ...
Utilizing FastClick on a page with oversized links to eliminate the 300ms delay for taps in mobile browsers has been successful. The "highlight" style for the links' :active states is triggering quickly, thanks to FastClick. However, a challenge aris ...
Looking to rearrange list items by clicking either move up or move down. <div> <ul> <li>Item A <a class="moveUp">Move Up</a> <a class="moveDown">Move Down</a></li> <li>Item B <a class="m ...
On my ASP.NET MVC page, I have a checkbox that I create like this: <div> @Html.CheckBoxFor(m => m.allUsers, new { Name = "allUsersCheck" }) @Html.LabelFor(m => m.allUsers) </div> Additionally, I have a listbox created u ...
I'm having an issue where the right side of all the text on my website is being cut off. I've tried using Firebug to inspect the element, but it's always a paragraph text and they have different parent divs. I'm not sure what CSS adjust ...
I have been searching for a solution to this problem on various forums, but I couldn't find one that fits my needs. My challenge is to create a foreach loop for 12 elements, with 3 of them having a different class applied to them. This is the code I ...
I stumbled upon this fascinating jsfiddle on this website that almost completely addresses my concern, solving up to 90% of it. Check out the JSFiddle Nevertheless, I am keen to incorporate margins within the inner divs. Despite attempting to modify the ...
I recently integrated a plugin on my website to add a shop section (). However, I noticed that it causes my header to shift downwards only on that particular page. Upon receiving some advice, it seems that the issue might be related to the following code ...
I'm encountering some challenges with a project that involves a JS file for a Bootstrap modal popup and an HTML5 video player. The issue I'm facing is that I am unable to link the class for the video player theme. Can anyone here assist me in ide ...
Is there a way to notify users that the site is loading while a function with noticeable execution time is running? I have an associated change function which is connected to a drop down filter used for sorting through data on the page. $("#job_group").ch ...
In the scenario where I have the following HTML and CSS code: .something{ width: 200px; } .display-block { display: block; } .req-field{ float: right; font-size: 5px; } <div class="something"> <span class="display-block">First name ...
I'm currently developing a NextJS application that utilizes PurgeCSS. It's quite frustrating because every time I tweak the classname of a component, I have to restart the server. Here is a snippet from my postcss.config.js: plugins: [ [ ...
I am looking for a way to display specific information from a Facebook event on my webpage. This includes details such as time, location, creator, additional information, and even the thumbnail image. The event was not created by me, but I do have the URL ...