Support » Plugin: Seriously Simple Podcasting » Customize Player CSS?

  • Resolved docmonster

    (@docmonster)


    I would love to be able to style the HTML5 Episode player with CSS but the plugin loads the CSS and JS at the end of the document. It would be *amazing* if you could load the CSS in the HEAD of the document before the child theme CSS is enqueued in WordPress.

    Can you make this happen? It would save me a ton of effort and would help other theme developers immensely.

    thx

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Sergio Zakharchenko

    (@zahardoc)

    Hi!
    Positioning of the CSS file is absolutely not a problem. Just use more specific rules in your own CSS.
    For example, if the plugin CSS has rule “.class1 .class2 {}”, you can specify “.class1 div.class2 {}”, and it will be used no matter where the plugin CSS file is placed.
    Here is a good article on how browsers measure specificity: https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/#how-to-measure-specificity
    And, BTW, we put CSS file to the footer in purpose – this way it doesn’t block rendering the HTML, so this way your site works faster.

    Best wishes,
    Sergey.

    Thread Starter docmonster

    (@docmonster)

    Sergey, thank you for the note. Your suggestion about specificity worked.

    I do think it might be better to enqueue CSS in the header, though. WordPress typically sets up their enqueue system so that CSS loads in/near the head while JS can be enqueued in the footer at the end of the document.

    The additional CSS from the plugin would have little effect on speed, typically, and your plugin would be more developer-friendly and allow for developers to customize CSS loading in functions.php.

    For instance, if you inspect https://css-tricks.com/ you’ll see that all CSS loads up top and JS scripts are placed either at the top or bottom depending on rendering needs.

    Wordpress documentation details the way CSS is enqueued but they only allow JS to use the parameter $in_footer by design.
    https://developer.wordpress.org/themes/basics/including-css-javascript/

    Plugin Author Sergio Zakharchenko

    (@zahardoc)

    Hi @docmonster!
    I’ve made an issue for it, so I believe this change will appear in the next releases.
    Thanks for the suggestion!

    Thread Starter docmonster

    (@docmonster)

    Wonderful, thank you!

    Plugin Author Sergio Zakharchenko

    (@zahardoc)

    Hi @docmonster!
    I just checked the code which adds the player styles and realized that moving style to the header is not so easy. The problem is that we load player style only on the pages which have the player. And it means that we add the styles after the player is rendered, and it happens after the header is generated.
    But if you still want to load the player styles in the header, here is the code which you can put in your functions.php:

    add_action( 'init', function(){
    	if ( wp_style_is( 'ssp-castos-player', 'registered' ) && ! wp_style_is( 'ssp-castos-player', 'enqueued' ) ) {
    		wp_enqueue_style( 'ssp-castos-player' );
    	}
    } );

    It will do the trick. But please be aware that in this case, player styles will be loaded on every page.

    Cheers,
    Sergey.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Customize Player CSS?’ is closed to new replies.