Making Dashboard Style Buttons

0
Is there any way to style a button with an icon so it looks something like this? Basically I want a centered icon with text below. Glyphicons put the icon on the left of the caption. I think the only way would be to manually create bitmaps and use that as the button image. Is there a better way? I know that the default dashboards for Mendix projects have a separate image with the actual button below but that's not what I want.
asked
2 answers
4

Check the Mendix UX site: https://ux.mendix.com/theme-creator.html and then the section 'Page Templates'. The first page called 'Actions' will give you a good start. This template is also available in Mendix 6 when you add a page based on templates. 

The CSS for this parts is Bootstrap 'Cards', take a look at http://www.w3schools.com/w3css/w3css_cards.asp and https://v4-alpha.getbootstrap.com/components/card/ 

To have large glyphicons you setup a action button in the style 'link' (action button properties) and then a default class that can be used: 'card-icon' 

I hope this will get you started, but still some CSS is required.

answered
2

Hi,

It's not a really elegant way to achieve what you are asking for but here is what I have done just for a quick implementation of what you want.

I created a simple action button with default styling and I gave it the class "dashboard-btn".
I uploaded an image 40x40 pixels and I am pasting bellow in CSS what I had to do to make it display the image in the center of the button and the text at the bottom.

You can obviously change the styling to suit your needs and keep in mind that the image's top and left will need some adjustment based on the image that you will use for your icons.

Same goes for the padding-top of the button for the alignment of the text.


.dashboard-btn{
    height: 100px;
    width: 100px;
    border-radius: 0;
    border: 2px solid #afcde5;
    background: #0078d7;
    color: #fff;
    text-align: left;    
    padding-top: 75px;
    position: relative;  

}

.dashboard-btn img{
        height: auto;
        max-width: 100%;
        top: 22px;
        left: 30px;
        position: absolute;
   }

answered