Plugin Support
Fotis
(@markwaregr)
Hi
try this
[aria-label="Buy this track"] svg{display:none;}
[aria-label="Buy this track"]:before {
background: url(your-image);
background-size: contain;
background-repeat: no-repeat;
content: "";
display: block;
width: 32px;
height: 32px;
padding: 0;
box-sizing: border-box;
position: absolute;
text-align: center;
margin: 3px;
}
in your custom css box. Currently there is no way to add additional custom button I am afraid. This might be a feature in future releases though
Le me know how I can help out more
-
This reply was modified 2 years, 11 months ago by
Fotis.
Hi,
Thank you very much for the quick reply. This works great to replace the svg. I was trying to replace the actual svg code which would require JavaScript and is more complex than just using CSS.
Once I do a similar thing for the title attribute, then I truly created a custom button because you can use the “Buy link” to go to any url in the plugin configuration.
Once I have the code, I will share here because it may help someone else in the future.
Thanks again and kind regards,
Marcello
Ok, I underestimated the title attribute. Because it is controlled by the browser, it cannot be overwritten by CSS. I can create a fake “title” attribute that shows up on hover but I was not able to find a way to prevent any browser from displaying the actual attribute that is in the code.
JavaScript to remove the title attribute for some reason did not work either because the player gets loaded after everything else.
So unless this is added to the actual code (enter the tooltip text in the plugin config) I have not found a way around the title attribute.
Maybe you have some suggestions…
Thanks again and kind regards,
Marcello
-
This reply was modified 2 years, 11 months ago by
discsox.
Plugin Support
Fotis
(@markwaregr)
Hi there,
I am afraid you cannot remove the title from the plugin,
but you can load the javascript that removes titles on the window load event https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event
This will ensure it will run after AudioIgniter loads
Thank you very much for the hint. I was using jQuery Document Ready but that did not work.
I will report back if I have a working solution.
Thanks again,
Marcello
Plugin Support
Fotis
(@markwaregr)
That’s great. Glad I could help. If you need additional help with anything, feel free to get in touch and I will be there for you within 24 hours.
Also, we’d really appreciate if you could you take a minute and rate our plugin at https://wordpress.org/support/plugin/audioigniter/reviews/.
Hi,
I apologize for the delay in getting back.
You would expect that the window load event would fire after the tracks have been loaded but unfortunately that is not the case.
Below is the simple code I used to replace the title:
jQuery(window).on('load', function () {
jQuery('a[title="Buy this track"]').attr("title", "Song Info");
});
However, when I set a breakpoint at the code above, then the html structure of the audioigniter player has been loaded but no content. That means no track images, no tracks (the track list <ul class=”ai-tracklist” aria-expanded=”true”> is empty).
Of course running the above code on content that is not there yet does not work…
Once I get past the breakpoint in the on-load function then the tracks are populated. But I have not found a way to run any code after the audio tracks have been loaded and thus I was not able to replace the title (see test page with an info icon on the 4th song test page. I added a custom “title” but was not able to replace the current title which is controlled by the browser.
In case you have any ideas how to run code AFTER the tracks have been loaded or have the ability to hook into the actual code that would be greatly appreciated (API?).
I also believe that the ability to link to a custom page from each track in the player would be very helpful in many applications. A lot of artists, I believe would like to have info about each song (not just the lyrics). Some or your competitors definitely have that capability.
Thanks again for your support,
Marcello
P.S. I rated your plugin 🙂
Here’s an update:
Not very elegant but it works.
Adding time for the audio tracks to load…
jQuery(window).on('load', function () {
setTimeout(function() {
jQuery('a[title="Buy this track"]').attr("title", "Song Info");
}, 1000);
});
Any better ideas?
Thanks again!
Marcello
Plugin Support
Fotis
(@markwaregr)
Hi,
Your solution will work just fine!
I was going the ask about this.
What I did is to hide the svg
.audioigniter-root .ai-wrap .ai-track-btn svg{display:none;visibility:hidden;}
and using icon my theme already using
.audioigniter-root .ai-wrap .ai-track-btn:before{content: '\e8e4';position: absolute;color: #7c1341;font-family: 'eicons';font-size: 1.2em;font-weight: bold;}
So I have the same icon of the cart near the track name
Plugin Support
Fotis
(@markwaregr)
@mstudioil Thank you for sharing. Please let me know if I can help out more
