Topic: Update Primary Color in Palette using barebones (html, css, jQuery)

Joe P. S free asked 2 months ago


Preface
I'm doing a coding bootcamp / cohort thing, and although I appreciate and would prefer to use tools like React and SCSS, right now I'm using nothing but HTML, CSS, Javascript, and jQuery. I feel like I'm missing some of the power I need to fully customize MDB, but I'm hoping I can still find a way to customize my color palette.

I'm fairly certain I'm missing some obvious syntax. Can't seem to figure out what it should be. I really tend to stay away from front-end design, haha.

Expected behavior
I expect to change the color of my buttons from Blue to Red and have the color palette respond for all states of buttons.

Actual behavior
I found some code that allows me to change the color of the button, but only by overriding all the states. I'm hoping there is a way to keep Bootstrap's style of relative color changes for hover, effects for click, etc. This also only applies the color to the button, when I'd like for it to change the primary color in all places.

Resources (screenshots, code snippets etc.)

/* This overrides the color for all states, does not adjust the palette */
.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited {
    background-color: #a6192e !important; 
}

Links I found on my way here
How to change Primary (or other) colors
How to: Bootstrap change background color
Customizing primary-color
How to change btn color in Bootstrap

Finally, My Repo
Farm Buddy (WIP)


mlazaru staff answered 2 months ago


Hi,

Check this webpack-starter tutorial.

After installing prequsities and MDB package to the folder, you could easily override all the colors and other styles in src/scss/index.scss.

When overriding existing styles it may be neccesary to add !important at the end of the line.

After you finish, run npm run build - it will create CSS file with your customized MDB styles in dist/css/index.min.css.


Nicola free commented 2 months ago

HI, is this a PRO feature? Because I have downloaded the free version, and I have tried to follow the tutorial but without success. If it is not a pro feature, I'll better detail my approach.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: MDB5 5.0.0
  • Device: Laptop
  • Browser: Google Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: Yes