Skins not working?

Hi,

would you create a snippet showing the problem here: https://mdbootstrap.com/snippets/ or reproduce the problem in any other way? I’ll help you but I need to see your code.

Best, Marta

Sorry for the late response .. I didn't se e this in my email. Here is my snippet: https://mdbootstrap.com/snippets/jquery/squarepegsys/529079

In thr snippet you dont load any mdbootstrap css file so no skin can be applied.

I thought it was brought in automatically. I'm using SCSS on my site.

Regardless I changed it to use the CDN and made a couple more adjustments to look like my site and I get the same result.

The process that is set up to use mob custom skins is explained very well in the tutorial Gulp and Customization

https://mdbootstrap.com/education/bootstrap/gulp-installation/

The process flow requires installing nodeJS (and nom by default) if you don't have them, install gulp command line tool globally, and in your project t folder(s) you would install gulp locally in that project folder. Once this is done you would populate the custom_skin file with your colors, then save the _custom-skin.scss file where you found it triggering gulp to run and out of it you would get a new minified mob.min.css file with your custom skins inside ready to be used as The tutorials wlk you right through it

Hi, squarepegsys,

do you need more help or TonyO's answer is enough good for you?

Best, Marta

I do need more help ...

The site I'm building is with Django and I'm using django-sass-processor to compile my scss files to css:https://github.com/jrief/django-sass-processor

I'm not expecting you to support that but I've used it on many Django sites before and it works seamlessly. If something in the gulp/nom process that makes skins work, I'm all for it. But it simply seemed like it was a pure sass process. And yes I do have it processing the scss/mdb.scss file and it's working fine.

In fact, I see this in the resulting mdb.css:

.test-skin .navbar {
  background-color: #fff;
  color: #fff; }
  .test-skin .navbar .navbar-nav .nav-item .dropdown-menu a {
    color: #000; }
    .test-skin .navbar .navbar-nav .nav-item .dropdown-menu a:hover, .test-skin .navbar .navbar-nav .nav-item .dropdown-menu a:focus, .test-skin .navbar .navbar-nav .nav-item .dropdown-menu a:active {
      background-color: #f2f2f2; }
  .test-skin .navbar.double-nav a {
    color: #fff; }
  .test-skin .navbar form .md-form .form-control {
    color: #fff;
    font-weight: 300; }
    .test-skin .navbar form .md-form .form-control::placeholder {
      color: #fff; }

.test-skin .page-footer {
  background-color: #fff; }

(and more)

But this is my screen, which I don't think is right: https://imgur.com/a/0GwuyXf

it doesn't matter what skin I choose, then page is always the same.

So I'm not doing gulp/node but does it do more than sass?

I think I figured it out...

I used copied over the ECommerce template and it had a "white" class in the navbar, which overwrote anything the skin was trying to do. See:

https://imgur.com/a/HaEFuAP

Once I remove that then at least the navbar changes color.