Default MDB_Pro_4.5.7 CSS issue

  1. MDB Home Page
  2. Support Main Page
  3. General Bootstrap questions
Topic: Default MDB_Pro_4.5.7 CSS issue

abelgriffen pro asked 6 years ago

1. The issue is that the default button colour is pink even though it has btn-primary class but still it has pink CSS attached to it, where as in demos it shows blue color. I checked the /mdb.min.css and it has that pink color as default. I am not sure if that is an default colour provided by MDB in MDB 4.5.7 or it's just a glitch. 2. Second issue is when I click on upload and select the file; there is a jQuery error. So I am using the default file upload and it works fine.

Marta Szymanska staff pro premium answered 6 years ago

Hi, now I understand your problem. You have a .light-blue-skin (https://mdbootstrap.com/css/skins/) in your index.html file and that's why this skin style overwrites basic .btn-primary style. Just remove from <body> tag this line: class="light-blue-skin" and .btn-primary will be blue again. But if you need styles from .light-blue-skin for other parts of your website, you can add this CSS code withing <style></style> tags in your HTML file: 
.light-blue-skin .btn-primary {
background-color: #4285f4!important;
color: #fff!important;
}
Best, Marta

abelgriffen pro commented 6 years ago

Thanks...! It worked smoothly.

Marta Szymanska staff pro premium commented 6 years ago

You're welcome.

Marta Szymanska staff pro premium answered 6 years ago

Hi, could you provide your code where are errors because of our styles? I'll try to help you and later we will fix the problem in our package. Best, Marta

abelgriffen pro commented 6 years ago

I am using mdb.min.css. The Primary Blue colour should be #4285f4 where as it is not. I have tried to cover most of the CSS classes but I might have missed some. Please verify it. .btn-primary{ background-color:#ff4a67!important; color:#fff!important } .light-blue-skin .btn-primary:hover{ background-color:#ff647c } .light-blue-skin .btn-primary.active,.light-blue-skin .btn-primary:active,.light-blue-skin .btn-primary:focus{ background-color:#e30024 } .light-blue-skin .btn-primary.dropdown-toggle{ background-color:#ff4a67!important } .light-blue-skin .btn-primary.dropdown-toggle:focus,.light-blue-skin .btn-primary.dropdown-toggle:hover{ background-color:#ff647c!important } .light-blue-skin .btn-primary:not([disabled]):not(.disabled).active,.light-blue-skin .btn-primary:not([disabled]):not(.disabled):active,.show>.light-blue-skin .btn-primary.dropdown-toggle{ -webkit-box-shadow:0 5px 11px 0 rgba(0,0,0,.18),0 4px 15px 0 rgba(0,0,0,.15); box-shadow:0 5px 11px 0 rgba(0,0,0,.18),0 4px 15px 0 rgba(0,0,0,.15); background-color:#e30024!important } .light-blue-skin .primary-ic{ color:#ff4a67!important }

abelgriffen pro answered 6 years ago

I get this error when I try to use MDB File Input. Also the default primary button colour is #ff4a67 as well. Uncaught TypeError: n[0].files.forEach is not a function                                                                compiled-4.5.8.min.js?ver=4.5.8:1 at HTMLInputElement.<anonymous> (compiled-4.5.8.min.js?ver=4.5.8:1) at HTMLDocument.dispatch (compiled-4.5.8.min.js?ver=4.5.8:1) at HTMLDocument.m.handle (compiled-4.5.8.min.js?ver=4.5.8:1)

Marta Szymanska staff pro premium answered 6 years ago

Hi, Are you using MDB version 4.5.7 or 4.5.8? Maybe you updated your project to the newest version and problems appeared? Except for the CSS code, please provide also your code from an HTML file and I will check your code. Best, Marta

abelgriffen pro answered 6 years ago

The project is fresh and the files are not updated. Also I am using stock files that comes in the package. I am using the following versions. And I have tried the "btn btn-primary" else where as well and gives the same result.

Material Design for Bootstrap 4
Version: MDB PRO 4.5.7

<!--Form with header-->
<form name="" id="" action="" method="post" enctype="multipart/form-data" class="md-form">
    <div class="card" >
        <div class="card-body">

            <!--Header-->
            <div class="form-header blue-gradient">
                <h3><i class="fa fa-plus-square-o"></i> Add Card</h3>
            </div>

            <div class="text-center">
                <button type="button" id="btnEditCardMedia" data-toggle="modal" data-target="#modalEditCardMedia" class="btn btn-primary"><i class="fa fa-edit" aria-hidden="true"></i> Edit Media</button>
            </div>

        </div>
    </div>
</form>
<!--/Form with header-->

abelgriffen pro answered 6 years ago

The project is fresh and the files are not updated. Also I am using stock files that comes in the package. I am using the following versions. And I have tried the "btn btn-primary" else where as well and gives the same result.

Material Design for Bootstrap 4
Version: MDB PRO 4.5.7

<!--Form with header-->
<form name="" id="" action="" method="post" enctype="multipart/form-data" class="md-form">
    <div class="card" >
        <div class="card-body">

            <!--Header-->
            <div class="form-header blue-gradient">
                <h3><i class="fa fa-plus-square-o"></i> Add Card</h3>
            </div>

            <div class="text-center">
                <button type="button" id="btnEditCardMedia" data-toggle="modal" data-target="#modalEditCardMedia" class="btn btn-primary"><i class="fa fa-edit" aria-hidden="true"></i> Edit Media</button>
            </div>

        </div>
    </div>
</form>
<!--/Form with header-->
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

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

Resolved

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
abelgriffen
Pro User
20Support score
3Questions 7Answers
0Snippets likes 0Snippets