Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: Skins not working?

squarepegsys free asked 5 years ago


I recently purchased the BigBundle Pro and skins do not work. I have the rest of it working but changing my body tag to :

<body class="test-skin">

Or any skin listed has not changes ... I still see the blue icons and blue links.For "test-skin" I didn't expect to see anything since it's all white.


squarepegsys free answered 5 years ago


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.


Bartłomiej Malanowski staff commented 5 years ago

Is your problem resolved? Is there anything else that you need us to help you with?


squarepegsys free answered 5 years ago


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?


Marta Wierzbicka staff answered 5 years ago


Hi, squarepegsys,

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

Best, Marta


TonyO pro answered 5 years ago


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


squarepegsys free answered 5 years ago


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.


TonyO pro answered 5 years ago


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


squarepegsys free answered 5 years ago


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


Marta Wierzbicka staff answered 5 years ago


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



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

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.7.4
  • Device: MacOs
  • Browser: Chrome
  • OS: MacOs
  • Provided sample code: No
  • Provided link: No
Tags