What is the method for adjusting the success button's color using SASS?

My current theme's success button is green, but I want to change it to yellow. How can I achieve this?

In the _variables.scss file, the following lines are present:

$btn-success-color:              $btn-default-color !default;
$btn-success-bg:                 $brand-success !default;
$btn-success-border:             $btn-success-bg !default;

To make the change, I added these lines to my custom file style.scss:

$btn-success-color:              #000 !default;
$btn-success-bg:                 #FFD700 !default;
$btn-success-border:             #FFD700 !default;

Despite making these adjustments and compiling my theme again, the success button remains green. It seems like something is not working as expected.

csstwitter-bootstraptwitter-bootstrap-3sassbootstrap-4

Answer №1

To effectively override the variables in your style.scss, it is crucial to position them prior to importing _variables.sccs

As per Bootstrap guidelines:

When overriding variables within the same Sass file, they can be placed before or after the default variables. However, when overriding across Sass files, the overrides must precede the import of Bootstrap’s Sass files.

If you prefer a cleaner approach, loading default bootstrap variables first and then loading custom variables from another file (e.g., _variables-custom.scss) is recommended.

In _variables-custom.scss, simply copy/paste values from _variables.scss for overriding purposes. Keep these points in mind :

  1. _variables-custom.scss should be imported after the default _variables.scss
  2. All instances of !default in your _variables-custom.scss need to be removed for proper overriding of values in _variables.scss.
  3. It's advisable not to store any variables outside of _variables-custom.scss to easily locate variables when needed.

Your style.scss file should look like this:

@import 'variables.scss'
@import 'variables-custom.scss'

_variables.scss :

$btn-success-color:              $btn-default-color !default;
$btn-success-bg:                 $brand-success !default;
$btn-success-border:             $btn-success-bg !default;

_variables-custom.scss :

$btn-success-color:              #000 ;
$btn-success-bg:                 #FFD700;
$btn-success-border:             $btn-success-bg;

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

Should you choose a pre-built CSS framework or create your own from scratch?

Have you come across a framework that meets your project needs with just a few tweaks, or have you forged your own path along the way? What advice do you have for someone facing this decision and focusing on priorities like: Implementing a CSS reset Refi ...

htmlcssframeworksfrontend

The transparent DIV/waiting message may not be displayed in IE10

Here is a DIV container that serves as a transparent background with a loading message. This is the HTML code for the DIV container: <div id="generatingexcel" style="display:none; position: fixed; width: 100%;height: 100%; z-index: 999; top: 0; left: ...

jqueryhtmlcssajaxinternet-explorer-10

Express Node + Styling with CSS

I am in need of a single EJS file (configuration includes Express and Request). app.get('/space', function(req, res){ res.render('space.ejs'); }); The file successfully renders, but only two out of three CSS stylesheet links work ...

cssnode.jsexpress

Modifying inner content without altering CSS styling

Inside this div, there is a paragraph: This is the HTML code: <div id="header"><p>Header</p></div> This is the CSS code: #header p { color: darkgray; font-size: 15px; Whenever a button is clicked, the innerHTML gets updated: H ...

javascripthtmlcssinnerhtml

The Youtube Subscribe Embed feature is causing my image to lose its corners

When I use the official embed code from Google Developers to embed my YouTube channel, it cuts off the corners of my image and leaves white corners. This doesn't look good on my website with a black background. <script src="https://apis.google ...

htmlcsswordpressembedstyling

Initiating PHP outcomes with the integration of JQUERY and Bootstrap

Currently, I am working on a Twitter search functionality that allows me to search for any content on Twitter. While the feature is functional, I am facing some challenges with displaying the results in the desired format. Ideally, I would like the results ...

javascriptphpjqueryajaxtwitter-bootstrap

How to Emphasize Html Select Element on Mobile Devices?

Is there a way to make the HTML select element on Android appear more distinguishable as a dropdown list, rather than just looking like plain text? Any suggestions for highlighting it so users can easily identify and select an option from this element? Up ...

androidhtmlcss

Solving the Issue of Assigning a Random Background Color to a Dynamically Created Button from a Selection of Colors

Trying to create my own personal website through Kirby CMS has been both challenging and rewarding. One of the features I'm working on is a navigation menu that dynamically adds buttons for new pages added to the site. What I really want is for each b ...

javascriptphphtmlcsskirby

What is the best way to prevent a Bootstrap modal from refreshing the page when clicking an ASP.NET button?

I've encountered an issue while trying to display data in a Bootstrap modal view. The data is fetched from a database and successfully shown, but only for a brief moment before the page automatically refreshes. Below is the HTML code: <div class=" ...

jqueryhtmlasp.nettwitter-bootstrap

arranging the divs based on the space allocation within the page

Is there a way to neatly organize the divs on a page, depending on available space? I want them to align horizontally if there is enough room before moving to the next line. The tab-content parent div may contain several divs. Any suggestions on how this c ...

htmlcss

Using jQuery to extract the value of an object from an <li> element and updating the class attribute of the <li> element

There is a div element: <div id="ddDistr" class="searchBoxSortDistrict" tabindex="1"> <ul id="ddd"> </ul> </div> I have inserted HTML from json into it: $("#ddd").html(" "), $.each(dis, function( index, value) { $("#dd ...

javascriptjqueryhtmlcss

What is the procedure for collapsing a table row or grid?

Looking at this image, I'm trying to find a way to collapse the breakfast row. Any ideas on how I can collapse either the entire tr or with a div? ...

javascriptjqueryhtmlcssgrid

Using JQuery to trigger CSS3 animations on one element when clicking on another

My Rails app has a feature similar to reddit where users can upvote or downvote content. I'm currently working on creating a CSS3 animation that triggers when a user clicks the downvote button. Here's how I'm using JQuery: <div class="a ...

jqueryruby-on-railscss

Show the selected checkbox options upon clicking the submit button

Having trouble setting up a filter? I need to create a feature where checked values from checkboxes are displayed in a specific div after submitting. The display should include a 'Clear All' button and individual 'X' buttons to remove e ...

javascriptjquerycsscheckbox

What is the best method to detect a change in scroll position on a webpage using JavaScript?

Is there a way to trigger an event when the page's scroll position changes? I'm interested in creating a dynamic table of contents similar to (where the active item changes as you scroll). Can this be achieved without directly accessing the cu ...

javascriptcss

Ways to align various paragraphs within a single Bootstrap row

Looking to include notes on the right side of each input field? Check out this example I put together using a bootstrap layout. <head> <meta charset="utf-8"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4 ...

htmlcsstwitter-bootstrap

Understanding how to leverage styles.module.scss for implementing personalized styling within react-big-calendar

I'm currently working with the react-big-calendar library in order to develop a customized calendar. However, I've encountered an issue where the SCSS styling is not being applied correctly. export const JobnsCalendar = () => ( <Calendar ...

typescriptnext.jssassmomentjsreact-big-calendar

Transformation of CSS classes in React with Webpack

Have you ever noticed that when you inspect the Airbnb website, the classnames appear to be morphed into single alphanumeric names? What is the name of this technique and is it applied at the code level or build level? https://i.sstatic.net/qSiaj.jpg ...

javascripthtmlcssreactjswebpack

Dealing with interstitial advertisements on mobile devices: What is the best approach for handling zoom?

I am facing a challenge with displaying interstitial ads on mobile sites. Different publishers may have varying viewport settings and initial scales on their mobile sites, making it difficult to ensure that the ad appears correctly on all devices with the ...

javascriptcssadsinterstitial

What is the best way to wrap all divs except for the one with a .header-container-wrapper class?

In the midst of a project involving hubspot, I am facing an issue. I need to enclose all div elements within the body tag, except those with the class .header-container-wrapper. The default code provided by hubspot wraps all divs within #site-wrapper. $(& ...

jqueryhtmlcsshubspot