Theme Color: Light vs Dark and Blurred Logo
Update: New in Smart Podcast Player version 2.0, podcasters will now have the option of three unique theme styles: light, dark, and "blurred logo," which takes your podcast logo and makes that that—but a blurry, for style, version of it—the background of the player. The blurred background option can be used with either the light or dark theme, so it's more like an add-on style element.
For more information about the blurred background feature, and how you can add it, watch the video or scroll down toward the bottom.
The player's default theme is the light theme, but we also have a dark theme available. Here's a side-by-side comparison:
There are three places where you can change the theme: in the Default Settings, in the Smart Podcast Player's shortcode builder, and by manually entering a tag into the shortcode.
Changing the Default Style
You can specify separate player and link colors in the Smart Podcast Player's Default Settings. Go to the full tutorial on Default Settings for a video walkthrough.
- In the left side bar of your WordPress panel, go to Settings --> Smart Podcast Player.
- Click on the Player Defaults tab.
- Scroll down to Player Design Settings.
- Change the Theme Style from Light to Dark and click Save Changes.
Using the Shortcode Builders
The Smart Podcast Player allows you to switch styles. For the full tutorial on using the full podcast player shortcode builder, go to this post.
Switch the Style dropdown to Dark.
Entering the Style Manually
Add the following to your shortcode:
Your player shortcode will look like this:
[smart_podcast_player url="http://www.soundcloud.com/askpat/" style="dark"]
Styling Your Player with a Blurred Logo Background
The blurred logo background option is a new style introduced in version 2.0. To help you get a sense of the difference between what a player looks like with and without a blurred background, here they are:
This is without a blurred logo background:
This is with a blurred logo background:
To add this to your player, you can adjust this in the Player Settings or manually by adding
background="blurry_logo" to your shortcode.
Adjusting Blurred Logo Background in Player Settings
For Full Player:
For Track Player: