Decorous Menu Icons

Can someone please tell me how to make the icons on the left side menu bigger in the Decorous template? They are quite small actually. 

I also posted this in another place but, I am also trying to change the UNA loader Icon to one of my own. Alex T⚜️  stated to do this originally:

Spinning/loading icon is controlled by the template, 

You can have a look in modules/boonex/{template-name-here}/data/template/system/_header_js_spinner.html file in different templates for an example.

But, that file is not in Decorous. 

  • View
    897
  • More
Replies (12)

    • Hi Chris, studio > navigation > menu > look at the pictures attached

      • Thanks Will but I know how to change the icons, I need to know how to make them bigger. Right now they are small. 

        • Hello

          It can be done via CSS only. If you are using default FontAwesome icons then you may add something like the following in Studio -> Decorous -> Styles -> Custom Styles:

          #bx-sliding-menu-sys_site.bx-sliding-smenu-main .bx-menu-object-sys_site li .sys-icon {
              line-height: 3rem;
              font-size: 2.2rem;
          }
          #bx-sliding-menu-sys_site.bx-sliding-smenu-main .bx-menu-object-sys_site li .sys-icon {
              width: 3rem;
              height: 3rem;
          }

          You are welcome to use your own numbers.

          ---
          Best Regards
          Anton

          • Perfect Anton! Thank you

            • Spinning/loading icon is controlled by the template, 

              You can have a look in modules/boonex/{template-name-here}/data/template/system/_header_js_spinner.html file in different templates for an example.

              But, that file is not in Decorous. 

              you can copy this file form some another template and change it.

              • I don't quite understand how to do it using my own icon. Where do I add the icon file name so that it knows which image is referenced? Which folder do I upload the file?

                • As an example you can copy from:

                  modules/boonex/protean/data/template/system/_header_js_spinner.html

                  to:

                  modules/boonex/decorous/data/template/system/_header_js_spinner.html

                  • But that doesn't answer my question as to where I am supposed to upload the image. Understand that I am not a developer. Wish I was but unfortunately, my brain isn't smart enough I guess.

                    • You can upload files for custom purposes via Studio > Storage

                      • Thanks but I am not going to worry about it. I have the file in there already but I don't know what else to do.

                        • Gonna try this one more time 😂 

                          What exact changes do we need to make in the _header_js_spinner.html  so that it will point to our own image versus whatever the default is..  Here is one of those files. If I wanted to use chris.gif, where would I put it at?

                          <script type="text/javascript" language="javascript">

                              var bUseSvgLoading = true;

                              var sUseSvgLoading = '';

                              if(!bUseSvgLoading) {

                                  var aSpinnerOpts = {

                                      lines: 7, // The number of lines to draw

                                      length: 0, // The length of each line

                                      width: 8, // The line thickness

                                      radius: 7, // The radius of the inner circle

                                      corners: 1, // Corner roundness (0..1)

                                      rotate: 0, // The rotation offset

                                      direction: 1, // 1: clockwise, -1: counterclockwise

                                      color: '#3a8686', // #rgb or #rrggbb or array of colors

                                      speed: 1, // Rounds per second

                                      trail: 60, // Afterglow percentage

                                      shadow: false, // Whether to render a shadow

                                      hwaccel: false, // Whether to use hardware acceleration

                                      className: 'bx-sys-spinner', // The CSS class to assign to the spinner

                                      zIndex: 2e9, // The z-index (defaults to 2000000000)

                                      top: '50%', // Top position relative to parent in px

                                      left: '50%' // Left position relative to parent in px

                                  };

                                  var aSpinnerSmallOpts = $.extend({}, aSpinnerOpts, {

                                      lines: 6,

                                      width: 6,

                                      radius: 4,

                                      color: '#333',

                                      top: '50%',

                                      left: 'calc(100% - 20px)'

                                  });

                              }

                          </script>

                          • In this case use code similar to this, but you will need to add proper css to make image to fit correctly everywhere:

                            <script type="text/javascript" language="javascript">
    var bUseSvgLoading = true;
    var sUseSvgLoading = '<img src="chris.gif" />';
</script>
                            Login or Join to comment.