Default MDB_Pro_4.5.7 CSS issue

Topic: Default MDB_Pro_4.5.7 CSS issue

abelgriffen pro asked 5 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.

Add comment

Marta Wierzbicka staff answered 5 years ago

1 0 Best answer

Please insert min. 20 characters.

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 5 years ago

Thanks...! It worked smoothly.

Marta Wierzbicka staff commented 5 years ago

You're welcome.

Add comment

abelgriffen pro answered 5 years ago

0 0 Best answer

Please insert min. 20 characters.

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-->

Add comment

abelgriffen pro answered 5 years ago

0 0 Best answer

Please insert min. 20 characters.

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-->

Add comment

Marta Wierzbicka staff answered 5 years ago

0 0 Best answer

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

Add comment

abelgriffen pro answered 5 years ago

0 0 Best answer

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)

Add comment

Marta Wierzbicka staff answered 5 years ago

0 0 Best answer

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 5 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 }

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
}

Please insert min. 15 characters.

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: General Bootstrap questions
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

abelgriffen

Pro User 20Support score
3Questions 7Answers 0Snippets