Ways to adjust color schemes in a grav template

Struggling with what should be a simple task. I have a website on Grav, utilizing a theme based on antimatter. The theme is mainly inherited and works perfectly fine.

My goal is to make some color adjustments, specifically altering the background color of the footer. It seems like a straightforward task. In themes\antimatter\scss\template, I locate _footer.scss containing background: $footer-bg;, which appears to be the key. I find instances where $footer-bg is defined in both _colors.scss within the directories of scss configuration for the antimatter theme and my custom theme inheriting from it. After running scss --watch scss:css-compiled on both themes, clearing the cache, and refreshing the page, the old background color persists.

Both of my _colors.scss files contain:

$footer-bg: #c7254e;

(a reddish shade, but the display shows an outdated dark grey)

Seems like I've covered all bases, so what am I overlooking?

I even attempted adding this to mytheme\css\custom.css:

footer {
    background: white;
}

But unfortunately, no change occurred.

The version of Grav I'm using is v1.7.46, powered by PHP Version 8.1.2-1ubuntu2.17.

Answer №1

Shoutout to @passerby for the motivation to dive back into the custom.css file, and lo and behold, it actually does work! Why it didn't cooperate earlier is still a mystery to me. My best guess is that pesky caching was causing all the trouble, resulting in none of my changes taking effect as expected. I thought I had double-checked that, but perhaps I got confused. For anyone stumbling upon this quandary: Yes, altering custom.css within the inherited theme does indeed make a difference. However, if you find it stubbornly unchanged, be sure to investigate your caching situation. A simple trick like holding down shift while hitting refresh (works on FF at least) or experimenting with an anonymous/private browsing window might do the trick.

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

Concealing a division at the conclusion of a <section>

Is there a way to toggle the visibility of a div based on scrolling? When reaching section 2; The 'banner' div should appear at the start of section 2 and disappear when section 2 ends. But how can I determine when section 2 is finished in this c ...

Firefox experiencing trouble handling flexbox overflow

Having some trouble with a test project that involves using flexbox. The task at hand is to create a dashboard with multiple lists of cards arranged side-by-side with infinite overflow. I was able to achieve this layout, however, the issue arises when eac ...

Feature for jotting down notes, creating a break between lines without any information present

I'm currently working on implementing a note-taking feature for my web application. However, I have encountered two issues: Firstly, I am struggling to identify line breaks within the text. While I can hardcode text with line breaks, when a user clic ...

The Less compiler (lessc) encounters an issue on a fresh operating system. ([TypeError: undefined is not a function])

After setting up my new development environment on Windows 10, I encountered an issue with less. Following the instructions on lesscss.org, I installed less using: npm install -g less The installation process completed without any errors. However, when ...

The CSS syntax definition for list styles

Inside the body of my site is this code: Here is the HTML: <ul id="navlist"> <li class="first"> <a href="/" id="current">Home</a> </li> <li> <a href="/Store/">Store</a> </ ...

Create an element that spans the entire width of the page

Having trouble adjusting the width of the .navbar? It seems to only grow to one side and setting it to 100% width doesn't expand it to fill the whole page. Can anyone provide some guidance or assistance? Here's the code: return ( <div cla ...

Aligning a picture with a heading

I'm currently working on a website header design where I am struggling to align the logo and site title horizontally. As someone who is new to CSS, any guidance or tips would be greatly appreciated! The logo image has the following styling: .logo { ...

Utilizing jQuery for animating SVG elements with dynamic color changes and scaling effects upon hover

Seeking assistance from coding experts! I have created an icon and am attempting to modify it so that the color changes when hovered over. Additionally, I want the white square to scale down by 50% starting from the top-left corner of its current position. ...

What is the best way to ensure that my top menu remains fixed while scrolling?

Link to website: I am looking to have the top menu on my page remain fixed at the top of the screen as users scroll. Does anyone know if this is achievable, and if so, how can I implement it? ...

The functionality of Bootstrap 4's sticky-top for the navigation bar has suddenly ceased

Recently, I encountered an issue with my navigation bar that was set to stick to the top while scrolling. Everything was working perfectly until I decided to move the login button to the right side. Despite numerous attempts to modify the position of the l ...

I prefer not to receive the parent's opacity settings when styling a child element in CSS

Is there a way to prevent the child element from inheriting the opacity of the parent in CSS? I have a parent div and a child div inside it. I want to set the opacity for the parent div, but not have it affect the child div. Does anyone know how I can ac ...

React eliminates all white spaces

Presented here is a compilation of various span elements: <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> Accompanied by the CSS style for these elements: span{ bac ...

Right-align SELECT-OPTIONS text

Here are the screenshots of the form I'm currently working on. I am aiming to create a select box in the form where the text within the options is aligned to the right. After an option is selected, the chosen text should be displayed as illustrated i ...

Pick the initial child of a specified type within an element

I am trying to target the first <div> child under the <body>, excluding any other elements. While I could assign an ID to the element, I am interested in finding a more universal solution for this scenario. For example, in a basic setup like ...

How can I eliminate unnecessary gaps in a CSS slider design?

Currently, I am in the process of learning CSS3 and attempting to create a purely CSS slider. Everything has been going smoothly until I encountered an unexpected padding or margin within my slider. After making some adjustments to the margins, the issue ...

What is the best way to showcase XML tags in a list format with CSS styling?

<team> <teamleader info="Team Leader"> <name>Suresh KC</name> <email><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e48f87ca97919681978ca49d858c8b8bca878b89">[email protected]< ...

Tips for Maintaining Consistent Height and Width of Cards

My latest project involves a code snippet with 3 CSS cards displayed in a row using bootstrap. <div class="container mt-4"> <div class="row"> <div class="col-auto mb-3"> ...

What is the method for connecting the text to its parent element in SVG?

I have put together a demo at https://codepen.io/anon/pen/rzLEQX, but I am trying to figure out how to ensure that the text is contained within the 'g' container with the id of "g12". Do I need to use variables x and y for this? <g id="g12" ...

Adjust the top margin of a div to match the height of the screen within an iframe, ensuring cross-browser

Trying to adjust the margin-top of a div to 100% of screen height within an iframe seems to be causing issues with jQuery, as it either returns 0 or inaccurate values. While CSS3's 100vh can work as an alternative, it may not be supported in older an ...

Struggling with getting the local slick slider to run smoothly

After installing the slick slider plugin and trying out some basic examples on jsfiddle, I encountered an issue when running it locally. For some reason, the results I get when testing it on my local environment are different from what I see on jsfiddle. ...