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.
-
- · Will Monte
- ·
Hi Chris, studio > navigation > menu > look at the pictures attached
-
- · Chris
- ·
Thanks Will but I know how to change the icons, I need to know how to make them bigger. Right now they are small.
-
-
·
Anton L
- ·
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 -
·
Anton L
-
- · Chris
- ·
Perfect Anton! Thank you
-
-
·
Alex T⚜️
- ·
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.
-
·
Alex T⚜️
-
- · Jeremy
- ·
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?
-
-
·
Alex T⚜️
-
·
In reply to Jeremy
- ·
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
-
·
Alex T⚜️
-
- · Jeremy
- ·
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.
-
-
·
Alex T⚜️
-
·
In reply to Jeremy
- ·
You can upload files for custom purposes via Studio > Storage
-
·
Alex T⚜️
-
- · Jeremy
- ·
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.
-
- · Chris
- ·
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>
-
-
·
Alex T⚜️
- ·
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>
-
·
Alex T⚜️