Audio Player Overlay on Image

Hi,
So I’m working on a music website. I have samples of music tracks that you can play on the site using the audio feature on cornerstone. However, I don’t like how the audio bar that plays music sits below my image cover.

I would like to add the file to the album cover using an audio icon that people can press to play the demo similar to this website see here >>>>https://www.samplephonics.com/products/free/world#

I’ve tried exploring the essential grid options but none of them were able to give me the look that I’m am going for.

Any idea how I can achieve this goal?

Thank you!

Hello There,

Thanks for writing in! Regretfully the example website is using custom code audio players which is not an available features in the built in audio players in the theme. You may need to find other means like 3rd party plugins from the repository. Perhaps this link might help you: https://wordpress.org/plugins/search/audio+player/

Best Regards.

Okay, Can you help me try to figure this idea out.

What if I do an overlay using a div code and add an audio icon (

). Than have the audio player pop up ([[x_audio_player mp3=“http://yourdomain.com/example.mp3”]])using a Javascript code or something.
Is that possible and can you help me with this?

This is just an example code for the overlay below.

<div class="x-gass-image-grid"

<a href="#icon"
</span
<div
Track</span
Title</small
</div

</div

Hi There,

That could be possible with some custom development, but it would be outside the scope of our support. We suggest to contact a developer to assist you with this.

Basically to customize the shortcode, you can find the relevant code under (/wp-content/plugins/cornerstone/includes/shortcodes/audio-player.php). Then you can copy the function into your child theme’s functions.php file and customize it accordingly.

Thanks!

Good to know.

What is the CSS code I need to create an transparent green overlay with an image centeres over the cornerstone picture element?

Certainly you can help me with that !

The customizations to do that are absolutely, within your scope since it involves customizing cornerstone using your theme. Plus I received help for for an issue similar to this in the past.

So lets start there.

Thanks

Hello There,

I am not exactly sure if I understand correctly, but something like this will create an overlay.
1.) Add this class on the column class field img-overlay where you put the image element:
2.) Add the following CSS:

.img-overlay {
    position: relative;
}
.img-overlay:after {
    position: absolute;
    background-color: #0080008a; /*Change to your preferred overlay color*/
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    content: '';
}

The result will be something like this: https://screencast-o-matic.com/watch/cFibfiFCc8
If that is not exactly what you are trying to achieve, please do clarify. Thank you.

I would like to add and image icon that appears when hovered over the image with a transparent green background. The CSS that you gave me didn’t do the job.

Aside from that I would like to change the side bar text to black and green when hovered over. Additionally, I would like to add padding above the blog post title. It sits to close to the nav menu.

Please advise.

Thanks

Hey @quituck,

Regretfully, this is not something that can be achieved using the Image element. It’s not a feature offered by the Image element. This would need CSS that will position an icon at the center of your image as a background and then change the opacity of your image. That is not something that is within the scope of our support because that is not possible using native options. It is not simple code. I’m sorry but you need to consult with a third party developer for this.

The custom codes we provide are hard to maintain and there’s no guaranteed it would work in the future and they not supported. If you have copied a custom code in the past or have received help, we’re sorry that we have not added that the giving of custom codes is not a part of our support but it only serves as a guide to provide you a head start.

I’ll post this in our issue tracker as feature request though. We need to know if this particular feature would be in demand before our development team could consider developing this feature.

For your sidebar text, that could be achieved by simple CSS. Please add this code in Theme Options > CSS

.x-sidebar a {
    color: black;
}

.x-sidebar a:hover {
    color: rgb(57,255,20);
}

For your blog post title, the reason why it’s too close to the navbar is because your navbar’s height is set to 0. Please go to Theme Options > Header > Navbar and set Navbar Top Height (px) to 140

Hope that helps and thank you for understanding.

I appreciate your help. I will apply the CSS changes to the theme and let you know how it goes.
Also please explain why the css code provided above never worked. I used it correctly by adding it to my global CSS file and add the class to the element. ???

As a side note,

As a personal review, I believe that you guys used to be more helpful. It seem like everything is always “outside of your scope of support” these days.

Since you guys became Apex, I feel the quality of support has diminished significantly, which makes me question whether I should continue business with you guys when my support plan expires.

WP Live is starting to look more desirable. (http://www.mojomarketplace.com/item/wordpress-support)
It looks like you guys have some new competition.

What happened to being the community for creative professionals?

If none of the suggested CSS works, it mostly due to a syntax error in your existing CSS. Try pasting all your custom CSS in http://csslint.net/ to check for errors.

Thanks for your feedback. The quality of our support is still the same though I believe what you mean by “more helpful” is we provide custom code as part our support service. The giving of custom code was never part of our support service. We have not made this part clear though. We just went above and beyond without realizing the negative consequences including not setting expectations right resulting in customers demanding to fix the given custom code (and this is hard because we are not a custom development staff), poorly written code causes conflicts and issues, etc… Stuff like that add up to the queue thereby diminishing our response time let alone we spend web development time for those custom codes which is not a part of our service as support.

Regarding your “creative professionals” comment, I believe you are not familiar or are not aware that there is a Peer to Peer forum where you can interact with other users. The Support forum is for product support. If our products does not offer what you need, you can let us know and we’ll add it as feature request like what I did. If you need an immediate solution, you can try the Peer to Peer forum or hire a third party developer.

I checked the link you posted and I just wanted to add a quick comment. Their service is WordPress support. Ours is theme (X and Pro) and the bundled plugins product support. Please see our Terms for what is supported or the details of support.

I hope you understand.

Thank you.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.