Icons-dashboard

Folder Creat your own Dashboard shortcuts

On https://jswebdesign.nl/joomla-extensions/jsw-crm-files-example you can find a selection icons for a shortcut dashboard on your website admin or front end.

  • Download the icons you want and adjust them to your own needs/language

For making a shortcut dashboard on a Joomla! 3 or 4 administrator

  • Go to Administrator->Modules(J3) or system administratormodules(J4)
  • Create a new custom Module
  • Select position Icon for the module
  • Insert your icons as image in the format and margin you want them to show here.
  • Create the shortcuts by adding a link to each icon.

If you want them to behave like buttons do the following

  • Administrator
  • Add a custom.css file to the Isis admin template
  • Add a custom user.css file to the Atum template
  • Website
  • This also works on the front end, just add the code to the template .css file of the template you use that gets loaded.

  • Give the icons the class .butmain  
  • Add the following style to the custom.css, user.css or template css file

    .butmain {
        box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
        border: 1px solid!important;
        border-color: transparent!important;
          border-radius:6px;
    }
    .butmain:hover, img.butmain.nav-item current active  {
        cursor: pointer;
      -webkit-box-shadow: inset 2px 2px 5px #b8b9be, inset -3px -3px 7px #fff;
            box-shadow: inset 2px 2px 5px #b8b9be, inset -3px -3px 7px #fff;
    }

  • After that the buttons behave like buttons.
    See a example below here:

Change the border-radius in .butmain for rounded or square buttons.

 

JS Webdesign

Webdesigners

jswebdesign.nl