I already used a lot the Bootsrap css to design certain things, like buttons, modals or font awesome icons in Knowledgebase articles. Suddenly that stopped to work. Has anything been changed in espoCRM regarding Bootstrap?
Announcement
Collapse
No announcement yet.
Using Bootstrap in Knowledge Base Article
Collapse
X
-
The following example will create a button (I use it in Knowldgebase to call screenshots), whichwhen clicked will open an image (screenshot) in a modal. The screenshot field is an image field, which in my case is hidden for normal users.
Code:<button type="button" class="btn btn-primary" data-toggle="modal" data-target="[COLOR=#e74c3c]#imageModal[/COLOR]"> BUTTON LABEL </button> <div class="modal fade" id="[COLOR=#c0392b]imageModal[/COLOR]" tabindex="-1" aria-labelledby="imageModalLabel" aria-hidden="true" style="display: none;"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="imageModalLabel">MODAL TITLE</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <img src="/?entryPoint=image&id=ID OF IMAGE" alt="Image Description" class="img-fluid"> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">close</button> </div> </div> </div> </div> <div>
You put this code in a WYSIWYG field or in the body of Knowledgebase Article.
You can also use this code slightly modified to keep a link, for example to link to a PDF, or with a link to another entity or to the create view of an entity. In general, everything, which can be linked by href you can pack into such a button.
If you have more than one button in a WYSIWYG field, you must number the imageModal like imageModal1, imageModal2 or anything else whicht would trigger the correct modal. To modify the appearance of the button refer to Bootstrap default examples.
- Likes 1
Comment
Comment