Audio Posts - Change Headline style

Support
#1

Hi,

I need to change the header for Audio post format. For regular posts I have custom CSS changing their header (Image / H1) - see below. How do I get this same formating stylr to apply to audio posts? Thanks!

/* Header Image for posts */

.page .x-main .hentry .entry-featured,
.single-post .x-main .hentry .entry-featured {
margin: 0 auto;
padding: 0 !important;
}
.single .has-post-thumbnail .entry-featured {
position: relative;
}
.single .has-post-thumbnail .entry-featured .entry-header {
position: absolute;
z-index: 99;
top: 10%;
width: 100%;
padding: 5% 15% 5% 15%;
margin: 5% 0px 5% 0px;
color: #ffffff;
background-color: rgba(0,0,0, 0.6);
}
.single .has-post-thumbnail .entry-featured,
.single .entry-thumb {
max-height: 600px;
overflow: hidden;
}

.single .has-post-thumbnail .entry-featured,
.single .entry-thumb,
.single .entry-featured img {
width: 100%;
margin: 0px auto;
}
.single .has-post-thumbnail .entry-featured .entry-title {
color: #ffffff;
}

#2

Hi There,

Thank you for writing in, you can use the selector below to target/style specifically the Audio Post title.

body.single-format-audio h1.entry-title {
 	/*some css property and value here*/
 }

Hope it helps,
Cheers!

#3

Thanks for the response.
The information you provided doesn’t seem to include enough detail to complete the same effect as described in the css code i included in my original post above.
I need to replicate the exact same effect as achieved by that code, into audio posts.
I don’t think h1.entry-title is enough to resize the post thumbnail etc. At least, from adding the “body.single-format-audio h1.entry-title” into the current code it had no effect on the properties.

Please can you provide the additional info needed to complete the task so audio post headers / feature images are transformed as in this post: https://foodfuntravel.com/taste-norwegian-reindeer/

Please note, my understanding of CSS is minimal. The old code I have was mostly built from discussion on this forum, not from personal knowledge.
Thanks

#4

Hi there,

I tried checking your site but I can’t seem to find an post that are using the audio format.

Would you mind providing a direct link to an audio post so that we can could check it?

#5

We are publishing audio post format for the first time… I’ve been making the CSS adjustments and checking the new post in draft/preview, but with no effect seeming to register.

I have converted an old post to audio from the archive here: https://foodfuntravel.com/043-budapest-podcast/ You can see the title & Date display above the feature image.

Rather than over the feature image as in a regular post: https://foodfuntravel.com/taste-norwegian-reindeer/

I need the correct CSS to adjust audio posts to look the same as regular posts.
Thanks

#6

Hi There,

Thank you for the clarification, now I understand what is the issue here and regretfully it can’t be resolve with just CSS.

Basically your custom CSS above should also applied on the audio post, because technically all posts (including the audio) are also single posts (that is the .single on your selector). Unfortunately it was not the case, because unlike standard post the audio post’s entry-header is a sibling of entry-featured. Unlike on the standard post the entry-header is a child of entry-featured.

So what we need to do now is to modify the content-audio.php file to make the entry-header a child of entry-featured. Good thing you have already a child theme.

On your child theme navigate to this directory: /x-child/framework/views/icon/ and create a file named content-audio.php and paste the code below on it:

<?php

// =============================================================================
// VIEWS/ICON/CONTENT-AUDIO.PHP
// -----------------------------------------------------------------------------
// Audio post output for Icon.
// =============================================================================

?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
  <div class="entry-wrap">
    <?php x_icon_comment_number(); ?>
    <div class="x-container max width">
      <div class="entry-featured">
        <?php x_get_view( 'icon', '_content', 'post-header' ); ?>
          <?php if ( has_post_thumbnail() ) : ?>
        <div class="entry-thumb">
          <?php echo get_the_post_thumbnail( get_the_ID(), 'entry', NULL ); ?>
        </div>
        <?php x_featured_audio(); ?>
      </div>
      <?php else : ?>
      <div class="entry-featured">
        <?php x_featured_audio(); ?>
      </div>
      <?php endif; ?>
      <?php if ( is_single() ) : ?>
        <?php x_get_view( 'global', '_content', 'the-content' ); ?>
      <?php endif; ?>
    </div>
  </div>
</article>

And that should apply your custom CSS above to the audio post without editing or adding a line. Keep in mind that this is already fall on custom development, regretfully we can not provide further customization support from here. Thank you for understanding.

Another thing, I see that your X and Cornerstone is a few update behind, we’ve just release a maintenance update addressing a handful of issues. (see the Changelog for details.)

Please update to X 5.2.2 / Cornerstone 2.1.2

Remember to clear all caches after updating so that the code from the latest release is always in use. This will help you to avoid any potential errors.

Hope it helps,
Cheers!

#7

Thanks! This has pretty much worked.
The only property that does not seem to have carried over is making the feature image full width - not essential, but would look better. But appreciate this may not be within scope anymore.

One other question, if it’s something you can answer. On mobile, the audio player that appears over the feature image in audio posts, the text overlay (of the H1 title) appears over the player, meaning users cannot interact with it. Only an issue on mobile due to the text filling the whole feature image.

Is there a setting i can add so the audio player is always the top element on any audio post?

Thanks again for the awesome support!

#8

Hey there,

  • To make the featured image fullwidth you can add the following code in your Customizer:
.single-format-audio article .x-container.width {
    width: 100% !important;
    max-width: 100% !important;
}
  • To fix the mobile display issue, you can add the following code as well:
@media screen and (max-width: 767px) {
    .single .has-post-thumbnail .entry-featured .entry-header {
        padding: 3% 0 0 !important;
        margin: 3% 0 !important;
        font-size: 13px !important;
    }
}

Hope this helps!

#9

Yes! This has fixed the issue.Thanks :slight_smile:

#10

Glad we could help.

Cheers!