This forum uses cookies
This forum makes use of cookies to store your login information if you are registered, and your last visit if you are not. Cookies are small text documents stored on your computer; the cookies set by this forum can only be used on this website and pose no security risk. Cookies on this forum also track the specific topics you have read and when you last read them. Please confirm that you accept these cookies being set.

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

Attached Files Thumbnail(s)
   
Reply
#2
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;
}
Reply
#3
(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

Attached Files Thumbnail(s)
   
Reply
#4
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;
}
Reply
#5
(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
Reply
#6
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/
Reply


Forum Jump: