MyBookTable includes a Style Pack system that allows you to create new Style Packs that modify how your Buy Buttons look and feel and to override the existing styles included in MyBookTable.
Anatomy of a Style Pack
Style Packs are folders with three things in them: images for the Buy Buttons, a CSS file to override other MyBookTable styles, and a readme file that contains metadata about the Style Pack. The name of this folder is used as the Style Pack’s name, unless it is otherwise specified in the readme file. It’s recommended that Style Packs stay limited to affecting the display of the Buy Buttons, since modifying other plugin styles can have mixed results when used with a variety of themes, but no hard restrictions are placed on what you can override.
MyBookTable looks in the currently chosen Style Pack for Buy Button images by searching for an image called
alibris_button.png
cbd_button.png (Christian Book Distributor)
kindle_button.png
scribd_button.png
amazon_button.png
createspace_button.png
kobo_button.png
shadowbox_button.png (Used when the ‘Use Buy Button Shadow Box’ option is enabled in Display Settings)
audible_button.png
goodreads_button.png
lifeway_button.png
smashwords_button.png
bam_button.png (Books-a-Million)
googleplay_button.png
mardel_button.png
sony_button.png
bnn_button.png (Barnes & Noble)
gumroad_button.png
nook_button.png
bookbaby_button.png
ibooks_button.png
powells_button.png
bookdepository_button.png
indiebound_button.png
sba_button.png (Signed by the Author)
You can include any custom CSS in the Style Pack by adding a styles.css file. Note that this can be important for overriding the Universal Buy Button styles so your Style Pack can have full compatibility with the MyBookTable Pro and Dev Upgrades.
The readme.txt file is used to provide MyBookTable with metadata about your Style Pack, such as a longer name, it’s author, and it’s version number. This file is optional, but it is highly recommended you include it with your style packs. Note that the readme must be in a standard format in order to be properly read by MyBookTable; You can see an example of what your readme should look like below:
Style Pack Name: My New Style Pack
Style Pack URI: https://www.example.com/
Author: John Smith
Author URI: https://www.example.com
Version: 1.0.0
Once finished with your style pack, you can package it up for distribution by compressing it into a standard Zip file. Be sure that you compress the contents of your style pack, not the containing style pack folder, or MyBookTable will not be able to read it properly. You can then upload the style pack to your site using the “Upload New Style Pack” button on your MyBookTable style settings tab.
Adding a Custom Style Folder
By default MyBookTable looks in two places for Style Packs: in the plugin under the styles directory for the default Style Packs, and in the wp-content/uploads/mbt_styles folder for any uploaded Style Packs. However if you create a plugin or theme that adds new Stores to MyBookTable (See Creating and Modifying Stores) it can often be useful to have MyBookTable look in your plugin or theme for custom Style Packs that include Buy Button images for your new stores.
You can do this by adding to the mbt_style_folders filter, which filters over an array of structures that contain information about the file path and url path to each style folder.
Example:
function add_new_style_folder($folders) {
$folders[] = array(
‘dir’ => ‘/path/to/new/style/folder/’,
‘url’ => ‘https://url/of/new/style/folder’
);
return $folders;
}
add_filter(‘mbt_style_folders’, ‘add_new_style_folder’);
Important: Please note that these paths need to point to your Style Pack folder and not to a style pack itself. Style Pack folders can contain multiple different Style Packs.
Partial Style Packs and Style Pack Url Resolution
It is important to know when adding new Style Pack folders like in the example above how MyBookTable searches through these folders to find the correct image to use for your Buy Buttons. It searches through each Style Pack folder, in the order they are present in the mbt_style_folders array, until it finds a Style Pack folder that contains the queried image, and uses that image url. This means that you can create “Partial Style Packs” in your custom Style Pack folders that override only specific images in an Style Pack in a different folder.
For example, say you have the following Style Pack folders:
Style Pack Folder 1 (first in array)
Blue Style Pack
amazon_button.png
Style Pack Folder 2 (second in array)
Blue Style Pack
amazon_button.png
bnn_button.png
goodreads_button.png
Style Pack Folder 3 (third in array)
Blue Style Pack
amazon_button.png
bnn_button.png
goodreads_button.png
In this example, if the “Blue Style Pack” style is currently being used, when MyBookTable is looking for the Amazon Buy Button image, it will find it in the first Style Pack folder since it exists in the Partial Style Pack for “Blue Style Pack” in that folder. However when searching for the Barnes & Noble or Goodreads Buy Button images, it will fail to find them in the first Style Pack folder, so it will continue onto the second Style Pack folder and find the images in that folder’s Style Pack and use them instead. Style Pack Folder 3 would never be used here because MyBookTable would always find the images in Style Pack Folder 2 first. If MyBookTable is unable to find the image in any of the Style Pack folders, it will fall back to using the “Default” Style Pack in the plugin Style Pack folder.
If you are having trouble getting MyBookTable to look in your custom Style Pack folder for your Buy Button images, make sure that your folder is showing up in the mbt_style_folders array first and that the correct Style Pack is selected to display on your site in Display Settings.
Child Style Packs
You can create “child” Style Packs that only override some of their parent Style Pack’s button images by adding a “Template: parent pack folder name” line into your Style Pack’s readme.txt file. MyBookProgress will first look in the child pack’s folders to find a buy button image, and will then search it’s parent’s folders for the image if it is not found. You can use this to easily create a new Style Pack that overrides one or two buy button images in an existing Style Pack without having to copy all the buy button images into your new Style Pack.