Dear Ana @banana
It is possible :)
This will require some basic knowledge of Javascript/jQuery:
https://laytheme.com/documentation.html#custom-javascript
Which you would be adding into the Custom <head> content within "Lay Option - Custom CSS & HTML" :
Screen Shot 2020-09-14 at 2.51.54 PM.png
Add the following code and it will target all the Links on your page <a> on hover they will be a random colour:
<script>
window.laytheme.on("newpageshown", function(layoutObj, type, obj){
var origColor = jQuery("a").css("color");
jQuery( "a" ).mouseover(function() {
jQuery(this).css("color",getRandomColor());
});
jQuery( "a" ).mouseout(function() {
jQuery(this).css("color", origColor);
});
function getRandomColor () {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
});
</script>
In this Code there are 3
jQuery( "a" )
You can change the 'a' to target what text you wish within your webpage. To do so we can use the Google Inspect tool:
https://www.khanacademy.org/computing/computer-programming/html-css/web-development-tools/a/using-the-browser-developer-tools
Right click on the element you wish to be a random colour and choose 'inspect'.
Screen Shot 2020-10-27 at 11.14.07 AM.png
This will bring up a list of attributes associated with the element, for example here this menu text i have:
Screen Shot 2020-10-27 at 7.42.01 PM.png
it has a class called:
.menu-item-67
I could change the
jQuery( "a" )
to:
jQuery( ".menu-item-67" )
And now this particular menu item would be a random colour on hover.
I hope this helps you Ana and have a wonderful day, thank you for using Lay Theme and Good Luck! :)
Best
Richard
