Use of additional gradients

MDB SupportCategory: MDB jQueryUse of additional gradients
Bernat asked 6 days ago in MDB pro, version:4

Hey,

I am a pro user having a problem with access additional gradients. For now I can only use the basic set. How to call the additional classes to be able to see it in the action?

Regards,

Andrzej

2 Answers
Marta Szymanska answered 5 days ago

Hi,

Do you mean these gradients: https://mdbootstrap.com/css/bootstrap-gradient/ – “additional” section? Everything is explained in the documentation.

Best,

Marta

lede Pro User replied 4 days ago

The additional gradients don’t seem to be in the 4.5.6 stylesheet

Marta Szymanska answered 2 days ago

They aren’t in the MDB package, they’re part of the extended documentation. I explain to you how it works.
An example with “Juicy Peach Gradient”:
1. Paste this code to your CSS file or within <style></style> tags:

.juicy-peach-gradient { background-image: linear-gradient(to right, #ffecd2 0%, #fcb69f 100%); }

2. Add this class to the component like here:

<!-- Grid row -->
<div class="row text-center">

<!-- Grid column -->
<div class="col-md-4 mb-4">
<h5>warm-flame-gradient</h5>
<div class="color-block mx-auto mt-3 warm-flame-gradient z-depth-2"></div>
</div>
<!-- Grid column -->

</div>
<!-- Grid row -->
lede Pro User replied 11 hours ago

Yes I know. I tried it and it didn’t work, so I checked the css to find the styles weren’t there. The OP was obviously expecting the additional gradients to be available because it just says add the classes without mentioning that you also need to add the css. I think it just needs to note that you need to add the styles for the additional gradients to your css then add the class to an element

Marta Szymanska replied 13 hours ago

I understand that you had a problem with finding yourself in our documentation but as you can see, in our code example, you can copy and paste both types of code – HTML and CSS one. If you would do this, everything would work then.

lede Pro User replied 2 days ago

That isn’t very clear from the documentation which is probably where his confusion came from. I looked as well and it just says “add these classes to an element” which implies that they are already in the stylesheet.