Topic: Use of additional gradients

Bernat free asked 5 years ago


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


Marta Wierzbicka staff answered 5 years 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 premium commented 5 years 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.

Marta Wierzbicka staff commented 5 years 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 premium commented 5 years 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

Bartłomiej Malanowski staff commented 5 years ago

Lede, thank you for letting us know that something isn't perfectly clear. We'll try to make our extended documentation more understandable

Marta Wierzbicka staff answered 5 years ago


Hi,

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

Best,

Marta


lede premium commented 5 years ago

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


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: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags