Skip to content
This repository was archived by the owner on Jul 4, 2019. It is now read-only.

Style Packs

Jump to bottom
Tim Zook edited this page Sep 19, 2016 · 4 revisions

MyBookProgress includes a Style Pack system that allows you to modify how your progress bars look and feel and to distribute these stylings to other users.

Anatomy of a Style Pack

MyBookProgress Style Packs will consist of three main files, accompanied by any extra resources such as images that are used in styling.

Let's look at these files individually:

1. The Stylesheet (style.css)

This is the CSS stylesheet which controls the presentation (visual design and layout) of the progress bar and supporting content when your style pack is active. This is the most important file in the Style Pack and is the only file that is mandatory to have to create a valid style pack.

In addition to CSS style information for your Style Pack, this stylesheet provides details about the Pack in the form of comments. The stylesheet must provide details about the Style Pack in their stylesheet comment headers, and no two Style Packs are allowed to have the same details listed, as this will lead to problems in the Style Pack selector. If you make your own Style Pack by copying an existing one, make sure you change this information first.

Here is an example stylesheet with documenting the header details and the important CSS selectors to override:

/*
Style Pack Name: Example
Style Pack URI: http://www.example.com/
Description: An example style pack
Author: John Smith
Author URI: http://www.example.com/johnsmith
Version: 1.0.0
*/

/* Progress Bars */
.mbp-container .mbp-books {} /* The container holding all book details and progress bars */
.mbp-container .mbp-book {} /* The container holding an individual book's details and progress bar */
.mbp-container .mbp-book .mbp-book-image {} /* The book cover image */
.mbp-container .mbp-book .mbp-book-title {} /* The book title */
.mbp-container .mbp-book .mbp-book-meta {} /* The container holding extra book details, such as phase and deadline */
.mbp-container .mbp-book .mbp-book-progress {} /* The container holding the book progress bar */
.mbp-container .mbp-book .mbp-book-progress .mbp-book-progress-barbg {} /* The background displayed behind the progress bar */
.mbp-container .mbp-book .mbp-book-progress .mbp-book-progress-bar {} /* The progress bar itself. This will have a percentage width which correlates to the book's actual progress */
.mbp-container .mbp-book .mbp-book-progress .mbp-book-progress-label {} /* A label that is displayed upon hovering over the progress bar that displays a numeric value indicating the book's actual progress */

/* Subscribe Button and Form */
.mbp-container .mbp-subscribe-container {} /* The container holding the subscribe button and form */
.mbp-container a.mbp-subscribe {} /* The actual subscribe button */
.mbp-container .mbp-subscribe-form {} /* The container holding the subscribe form */
.mbp-container .mbp-subscribe-form .mbp-subscribe-email {} /* The subscribe form email field */
.mbp-container .mbp-subscribe-form .mbp-subscribe-submit {} /* The subscribe form submit button */

2. The JavaScript (style.js)

If present, this JavaScript file will be included on the user's frontend pages when your style pack is active. This allows you to add any special affects to the progress bars upon loading that would not be possible with CSS alone. Note that this JavaScript will be included on pages that may have many progress bars or none at all, so take this into account when creating your logic.

Important Guidelines: Your Style Pack must not break completely in the absence of JavaScript. It must have a fallback display, without special effects, that is shown if JavaScript is not enabled. The JavaScript file is intended to be used only to allow unique effects which are not otherwise possible, and you should not use JavaScript to achieve effects which can be done via CSS. The excessive use of JavaScript can heavily impair page loading times and responsiveness.

3. A Preview Image (preview.jpg)

It is highly recommended that you include an image file that shows a preview of what your Style Pack looks like, which will be displayed on the Style Pack selector in the MyBookProgress Style tab. This image should be 300 pixels wide and 225 pixels high, and does not have to be a .jpg, any standard web image format will work.

Packaging your Style Pack

In order to distribute your Style Pack in a way that can be used with the MyBookProgress Style Pack Uploader, you will need to package your Style Pack. A Style Pack package is just a regular .ZIP file which you can create with any number of free tools, such as 7zip. However it is important to know that the Style Pack files (described above) must be contained DIRECTLY in the root of the zip file. If these files are contained in a folder inside the zip file, the Style Pack will not be extracted correctly. If you are having trouble getting your Style Pack to work with the Style Pack Uploader, this is the first thing to check.

General Guidelines

  • Be sure to test any text areas your design with the values 0% and 100%. It's easy to make text areas that overflow at 100%.
  • The subscribe button is part of the progress bar style. It's not required that you create a custom styling for it, but it's highly recommended.
  • Test your theme on a variety of colored backgrounds. It's not going to look great with every color of background, but it should look acceptable on most.
  • It's recommended that if your style supports the custom bar color system, that the preview display the style with the bar color set to #CB3301. (See built in styles for examples)

Clone this wiki locally