Add Pulse to Menu Icon
Can anyone provide code that I can inject that will cause the menu icon to pulse? I would like to do this to draw attention to it so members can easily find other parts of the site. See attached screenshot. Menu icon circled
.
-
- · Will Roberts
- ·
I suggest replacing it with an animated SVG
-
- · Tim
-
·
In reply to Will Roberts
- ·
That would be fine but I can’t find the icon to replace it.
-
- · Will Roberts
-
·
In reply to Tim
- ·
I will try looking later on for you and will get back to you soon
-
- · LoneTreeLeaf
- ·
Have you tried looking into keyframing in CSS?https://www.w3schools.com/css/css3_animations.asp
This is an example: https://i.imgur.com/C3N6UBE.gif
Subtle Animation Example: https://i.imgur.com/6waCDMp.gif
-
- · Tim
-
·
In reply to LoneTreeLeaf
- ·
Can’t really figure out how to do this.
-
- · John Curtis
- ·
@Tim Burleigh . It seems this example would be perfect if it could be applied to mobiles. (excluding mobile apps) https://i.imgur.com/C3N6UBE.gif
-
Hello, @LoneTreeLeaf , Would you have the URL from this example? I'd like to play around with this one. https://i.imgur.com/C3N6UBE.gif
-
-
Hey, you're free to use what's in the image as I just kinda threw it together in a LiveCSS editor on my browser, it's not uploaded anywhere.
-
- · LoneTreeLeaf
-
·
In reply to Tim
- ·
I'm unsure if injects work with the style html tag, but you would place that CSS between an open and closed style tag.
-
<style> @keyframe example { 0% {font-size-adjust: 0.5;} /* Starting Frame */ 100% {font-size-adjust: 0.7;} /* Ending Frame */ } i.bars { animation-name: example; /* Defined Animation Name in @keyframe "example" */ animation-duration: 1s; /* Duration of the animation, can be .# values to speed up, the higher the value the slower the animation */ animation-iteration-count: infinite; /* Repeats the animation */ animation-direction: alternate; /* Starts from 0% then 100% then back to 0%, repeating. */ animation-timing-function: ease-in-out; /* Smooths the animation from beginning to end. */ } </style>
-
While this is fancy, it would require the end-user to install https://coffeescript.org/ on the server.
-
- · Tim
-
·
In reply to LoneTreeLeaf
- ·
I placed this in the head. Did not do anything.
-
- · LoneTreeLeaf
-
·
In reply to Tim
- ·
How did you place it in injections? Tested it from my end and it works.
Injections Window: https://i.imgur.com/ut8HXLu.png
Protean Theme View: https://i.imgur.com/iSuSrca.gif
-
- · Tim
-
·
In reply to LoneTreeLeaf
- ·
Studio > Designer > Injections > Head
-
- · LoneTreeLeaf
-
·
In reply to Tim
- ·
That's rather strange... are you able to take and share a screenshot here of what your HEAD injection looks like? In the meantime, also try this.
<style> @keyframes pulse-animation { 0% { font-size-adjust: 0.5; } 100% { font-size-adjust: 0.7; } } i.bars { animation-name: pulse-animation; animation-duration: 2s; animation-iteration-count: infinite; animation-direction: alternate; animation-timing-function: ease-in-out; } </style>
There's not much difference between the CSS I provided before aside from renaming the animation and removing all CSS comments.
Also try clearing your cache from the Dashboard from Studio.
-
- · Tim
-
·
In reply to LoneTreeLeaf
- ·
I already cleared clear cache in dashboard but I will try this.
-
- · Tim
-
·
In reply to LoneTreeLeaf
- ·
I tried both pieces of code. Neither one of them worked.
-
- · LoneTreeLeaf
-
·
In reply to Tim
- ·
I'm at a loss for an answer about this, I'm using the last one I provided and it's working. What theme are you using?
-
- · Tim
-
·
In reply to LoneTreeLeaf
- ·
Protean Theme
-
- · LoneTreeLeaf
-
·
In reply to Tim
- ·
Very same theme I used for my demo as it doesn't work for the newest theme UNA has provided for UNA 13.
I find it hard to believe there could be a conflict with third party modules that differ from my own install as it's a very trivial CSS addition.
-
- · Tim
-
·
In reply to LoneTreeLeaf
- ·
You’re using it on Una 13? I’m still on 12.
-
- · LoneTreeLeaf
-
·
In reply to Tim
- ·
Yes I'm running 13, it's a non-production site, using it to test a few things.
-
- · Will Monte
- ·
Can't you just replace the icon with an animated gif?
-
- · Tim
-
·
In reply to Will Monte
- ·
I have looked and looked and looked and cannot find the icon location so I can replace it. That would be the easiest thing to do. It should be a navigation but I cannot find it anywhere.
-
- · Tim
-
·
In reply to Will Monte
- ·
I have also looked in developer. I suppose it could be somewhere in ‘storage’ but I have not been able to find it.
-
- · LoneTreeLeaf
-
·
In reply to Tim
- ·
You're not going to find it in storage as it's not a media file in general. UNA dev team is utilizing Font Awesome to render the icon. This would require a file edit from within the script.
-
- · Tim
-
·
In reply to LoneTreeLeaf
- ·
Thanks, I guess I’m done with this then.
-
- · Will Monte
-
·
In reply to Tim
- ·
I have not played with my una site for a while, but i could swear it's like what you mentioned following my comment. Hmmm.......
-
- · Will Monte
-
·
In reply to Tim
- ·
I think i found it, studio>navigation>site toolbar
-
YA It is a bit aggravating that the script (UNA) relies so heavily on outside sources. It does make it sluggish and combersome at times to achieve goals within sites. Websites created with UNA are then very dependent on other sites to be up and running in order to keep UNA sites moving and up.
-
- · Tim
-
·
In reply to Will Monte
- ·
Leave it to someone who hasn’t messed with UNA for a while to figure this out. Thank you my friend. I have an animated GIF added.
-
- · Will Monte
-
·
In reply to Tim
- ·
LOL!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
-
- · Will Monte
-
·
In reply to Tim
- ·
-
- · Tim
-
·
In reply to Will Monte
- ·
🤣🤣🤣