Unable to see the changes made to the Understrap child-theme and the color variable in Sass is not

I am trying to adjust the main theme color assigned by $primary in _theme_variables.scss. I changed the default value from $purple to $orange while using npm run watch-bs (browser-sync). However, the change is not reflecting on the home page:

https://i.sstatic.net/LVrO6.png

Here are my modifications:

_theme_variables.scss

$purple: #5533ff; // Just an example of how you can alter a BootStrap variable.
$orange:  #fd7e14;
$primary: $orange;  // After changing the value, we will also set it as the primary brand color.

_theme.scss:

// This is a blank scss file for your custom styles - Please insert your amazing design styles here
@import "theme_variables";

What could I be missing? 🤔

Answer №1

Great news! I believe I've successfully resolved the issue at hand. By making adjustments to

src/sass/theme/_child_theme_variables.scss
, I was able to effectively override the $primary value.

The mistake I made previously was assuming that theme changes would take effect by editing

src/sass/assets/understrap/theme/_theme_variables.scss
!

If anyone can clarify the distinction between _child_theme_variables.scss and _theme_variables.scss in this scenario, I will acknowledge their response! 😁

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

Styling an input text using CSS and Jquery without relying on a parent

Styling CSS input text without a parent div Hello everyone, I am looking to remove the <div id="input_container"> from the code below. Is it possible to achieve the same result without that surrounding div? Check out the jsfiddle: http://jsfiddle.n ...

Internet Explorer is failing to display images

Hey there! I'm having an issue with my product listing where the images are not showing up in Internet Explorer, even though it works fine in all other browsers. Here is the code snippet for the image container: Image container: <div class="image ...

Applying CSS transformations to scale up a div within its parent body

Having an issue with formatting an anchor link using transform scale attributes on hover. The link is inside a div that's aligned to the right, and I want it to enlarge when hovered over. However, this increase in size also affects the parent div, ca ...

When a selection element has a CSS box-shadow animation applied to it, it reverts to its default settings when expanded or clicked

A user notified me of an issue with a select element that has an animated box-shadow on it. I confirmed the problem on my work Windows computer, but unfortunately, I don't have access to a Windows setup at home for debugging. The select element in qu ...

Setting the z-index to place an absolutely positioned element below a relatively positioned one

I am currently facing a challenge where I need to position an element under another one that has already been relatively positioned. The blue box must remain relatively positioned due to specific constraints within the website development process. For bet ...

Tips on customizing the appearance of JavaScript output?

I recently created a plugin for my website with JavaScript, and one of the lines of code I used was output.innerHTML = "Test"; Is it possible to apply CSS styles to this element, or is there an alternative method? ...

Is there a way to adjust the positioning of an image within a <div> element?

I'm attempting to vertically align an image within a horizontal menu bar. My goal is to adjust the padding/margin of the image using inline CSS. However, I've noticed that when I add margin-top or padding-top, it affects the positioning of all m ...

What is the best way to eliminate the left padding on a TimelineItem component?

When using the Timeline component to display information, there are three columns: TimelinItem, TimelineSeparator, and TimelineContent. I tried setting the padding of TimelineItem to 0 but it didn't work. The <Trace/> component is a sub-compone ...

What is the best way to ensure an image fills the entire space within a Bootstrap modal container?

I'm having some issues with my bootstrap modals that contain images. When the images are long vertically, a scrollbar appears which is not ideal. I tried to solve this by setting a max-height for the modal-content and making the modal-body (where the ...

Styling elements with CSS can sometimes lead to unexpected behavior in Safari on iOS devices, especially

Ever since the release of iOS 14, I've noticed that content within a div element with an 'overflow-y: scroll' property no longer functions properly on Safari. Does anyone happen to have a solution for this? (Or maybe my code just needs some ...

Revealing Transition Element on mouseover

My side-menu consists of icons that display text to the right upon hovering over them. I want the text to show up and the div to expand smoothly with a sliding transition, ideally without the need for additional JavaScript. Is there a way to achieve this? ...

Exemplary CSS Text Alignment When Vertical Align is Exceptional

I'm currently working on a menu where some text needs to be aligned vertically with the property vertical-align:super. However, I am facing an issue where this particular item with "super" text is not aligning properly with the other items. Below is ...

The navigation bar and footer are not utilizing the entire width of the browser

Something seems off on the Safari browser, as there's still a gap in the right side of the navbar and footer. I've been using Bootstrap and steering clear of Javascript. Any ideas on how to fix this? Appreciate any help. Thanks! Here's the ...

Maximizing Content Width in FullCalendar v5 to Ensure Screen Compatibility

As I develop a calendar and timeline view using fullcalendar v5, my clients are requesting a month view that displays the entire month without any scroll bars. While I am aware of setting the contentHeight to auto, there seems to be no option for adjusting ...

Content overlapped by Bootstrap footer

I've been grappling with this problem for quite some time now. Despite finding numerous discussions on the issue, none of the proposed solutions seem to work for me. My website utilizes a Bootstrap 3 front end and I am aiming to establish a sticky bo ...

Center the logo between the menus in the foundation framework

Struggling to center the logo between menus using Foundation Zurb. I'm envisioning a layout similar to [menu1] [menu2] --[logo]-- [menu3] [menu4]. I believe utilizing the grid system may help achieve this: <div class="panel hide-for-small-down"&g ...

How can JQuery and CSS brighten up buttons?

Is there a way for me to create an "enlightening" effect similar to the one seen in the "Tags" section on this website? I am not just looking to change the color of the background from gray to white, but instead, I want to progressively make the button li ...

Despite utilizing the .img-fluid class, the image remains incompatible with the parent div and does not fit properly

So, I'm currently working on a test code where my aim is to fit an image into the parent div using Bootstrap 5. However, I'm facing a challenge where the image leaves a noticeable gap width-wise, despite using the .img-fluid class. You can see th ...

Reverse animation transition not activating in CSS

In an attempt to create a side navbar using HTML/CSS, I implemented hover animations where hovering over an icon would cause it to double in size and disperse the rest of the items in the navbar. While I successfully achieved this animation with JavaScript ...

"Enhance your website design with a navbar that seamlessly blends with the background color

Question 1: I have a requirement for my navbar to affix overlay on top of the background color and image of the div (top-banner). Currently, when I scroll down, the background color overlays my navbar affix instead. How can I ensure that my navbar sta ...