Logic Machine Forum
Category Icons - Printable Version

+- Logic Machine Forum (https://forum.logicmachine.net)
+-- Forum: LogicMachine eco-system (https://forum.logicmachine.net/forumdisplay.php?fid=1)
+--- Forum: Visualization (https://forum.logicmachine.net/forumdisplay.php?fid=9)
+--- Thread: Category Icons (/showthread.php?tid=4088)

Category Icons - CristianAgata - 12.06.2022

Hi at all,
is it possible change the icons in mosaic category?
Best regards Cristian

RE: Category Icons - admin - 13.06.2022

Add this to Mosaic Custom CSS (top right menu > Settings & themes). Change test to your custom category name.

Code:
a[href="#s/test"] .icon-menu {
  background-image: url(/scada/resources/icons/alarm-active.svg);
}
a[href="#s/test"] .icon-menu::before {
  display: none !important;
}


RE: Category Icons - CristianAgata - 20.05.2023

(13.06.2022, 07:07)admin Wrote: Add this to Mosaic Custom CSS (top right menu > Settings & themes). Change test to your custom category name.

Code:
a[href="#s/test"] .icon-menu {
  background-image: url(/scada/resources/icons/alarm-active.svg);
}
a[href="#s/test"] .icon-menu::before {
  display: none !important;
}

Hi admin,
I'm back on this post because I have a problem. With the widgets where I can set the category I've solved with your suggest. Now the problem it is with all that widgets where the customer can't choose the category (Scenes with add scene function).
Is there a way change icon and format from lowercase to uppercase?
Last thing, could be possible that this solution doesn't work in the cloud?
Best regards Cristian

RE: Category Icons - admin - 22.05.2023

Use this:
Code:
a[href="#s/scene"] .icon-menu {
  background-image: url(/scada/resources/icons/alarm-active.svg);
}
a[href="#s/scene"] .icon-menu svg {
  visibility: hidden !important;
}
a[href="#s/scene"] {
  text-transform: uppercase;
}


RE: Category Icons - CristianAgata - 03.06.2023

(22.05.2023, 06:40)admin Wrote: Use this:
Code:
a[href="#s/scene"] .icon-menu {
  background-image: url(/scada/resources/icons/alarm-active.svg);
}
a[href="#s/scene"] .icon-menu svg {
  visibility: hidden !important;
}
a[href="#s/scene"] {
  text-transform: uppercase;
}

thanks admin it works. 
Sorry but I have a new problem, locally it works fine but it doesn't works on cloud.
I've checked with F12 but I think that it is not possible solve this problem. Is It?
Best regards Cristian

RE: Category Icons - admin - 05.06.2023

You can place image inside of CSS so it will work both locally and via cloud. Example:
Code:
a[href="#s/scene"] .icon-menu {
  background-image: url('data:image/svg+xml,<svg viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg"><path d="m27.624 48.999c-.004 0-.008 0-.012 0-.227-.002-.916-.006-1.626-.006-1.421 0-2.476-1.185-2.507-2.813-.031-1.656 1.001-2.896 2.456-2.953v.002c.062-.004.125-.004.167-.002.128.004.478.019 1.412.018l.789-.003c.063-.001.108-.001.716-.001.021-.112.021-.266-.002-.371l-1.396.004c-.238-.002-.928-.004-1.638-.004-1.422 0-2.476-1.188-2.507-2.816-.031-1.654 1.002-2.896 2.457-2.949l4.126.006c.082-.267.191-.814.191-1.86.018-.368.182-3.046 1.293-4.528.199-.266.448-.533.729-.824.926-.97 2.074-2.178 2.074-5.4 0-3.664-2.553-6.222-6.206-6.222l-.71-.007c-3.406 0-5.782 2.47-5.782 6.007 0 3.13 1.082 4.299 1.951 5.239.265.285.502.547.691.81 1.03 1.416 1.2 3.862 1.223 4.341.037.744-.536 1.376-1.28 1.414-.747.027-1.378-.535-1.417-1.279-.044-.854-.294-2.313-.71-2.888-.132-.185-.303-.361-.489-.563-.999-1.078-2.669-2.885-2.669-7.072 0-4.964 3.645-8.708 8.479-8.708l.716-.002c5.164 0 8.909 3.752 8.909 8.922 0 4.307-1.766 6.158-2.819 7.266-.196.208-.381.395-.521.582-.438.59-.711 2.125-.754 2.977.001 1.938-.337 3.201-1.063 3.906-.289.279-.769.611-1.521.588l-4.175-.01c-.025.108-.025.259 0 .37.642 0 1.231.002 1.439.004l1.592-.004c1.504.057 2.537 1.297 2.506 2.953-.028 1.632-1.084 2.814-2.506 2.814-.781 0-.83.002-.896.002l-.816.002c-.708 0-1.104-.004-1.322-.01-.023.106-.023.254 0 .362.642 0 1.231.004 1.439.006.746.007 1.344.615 1.338 1.361-.006.742-.61 1.339-1.349 1.339zm16.251-23.306c-.001 0-.002 0-.003 0l-4.243-.01c-.746-.002-1.35-.607-1.347-1.353.001-.745.604-1.347 1.35-1.347h.003l4.243.01c.746.002 1.349.607 1.347 1.353 0 .744-.606 1.347-1.35 1.347zm-27.506 0c-.001 0-.002 0-.003 0l-4.244-.01c-.746-.002-1.349-.607-1.347-1.353.002-.745.606-1.347 1.35-1.347h.003l4.244.01c.746.002 1.349.607 1.347 1.353-.002.744-.606 1.347-1.35 1.347zm2.629-8.227c-.346 0-.693-.133-.957-.397l-2.996-3.008c-.526-.528-.524-1.383.004-1.909.528-.525 1.383-.524 1.909.004l2.996 3.008c.526.528.524 1.383-.004 1.909-.262.262-.607.393-.952.393zm17.998-.006c-.348 0-.691-.133-.956-.397-.526-.528-.524-1.383.003-1.909l3.008-2.996c.528-.526 1.383-.524 1.909.004s.524 1.383-.003 1.909l-3.008 2.996c-.263.262-.608.393-.953.393zm-9-3.515c-.001 0-.001 0-.002 0-.746-.001-1.349-.607-1.348-1.353l.008-4.244c.001-.744.605-1.348 1.35-1.348h.002c.746.001 1.35.607 1.348 1.353l-.008 4.244c0 .745-.605 1.348-1.35 1.348z" fill="red"></path></svg>')
}

Use these tools for conversion:
SVG: https://www.svgbackgrounds.com/tools/svg-to-css/
PNG/JPEG: https://www.base64-image.de/