Aug 20
Colorset specific icons
Feed icons, calendar arrows and graph bar (used on the archive page) all have different color variations to compliment each colorset that is included in bp. You can take advantage of this feature for any template created using the bp framework to use uniquely different icons for each of your template's colorsets, provided there is, in fact, more than a single colorset.
First, we need to know where icons are stored. As with all s9y template graphics, the files are stored in /templates/bulletproof/img/. If you create your own template based upon bulletproof, you will place these images in /templates/YOUR_TEMPLATE_PATH/img/.
Default icons BP includes defaults for the feed icon, calendar arrow, and graph bar. These defaults are used when the bp colorset "blank" is selected. The filenames are as follows: feed icon: xml.gif; left, or "back" calendar arrow: back.png; right, or "forward" calendar arrow: forward.png; graph bar: graph_bar_horisontal.png. If your template does not include colorsets, you can simply include these defaults provided with BP, or you can provide your own using the same names. Note that the graph bar, by default, is an image that repeats on the x-axis to become as wide as it needs to be. If you do not have different colors of these icons, they can be any color you wish, but the file names must be the same as provided. s9y will NOT substitute the default template's icons if your template file is missing these icons. s9y WILL, however, display the alternative text tag for these images if they are missing.
Beyond default - using different icons for different colorsets. The icon type will determine how BP handles the color "swap". But first, a word about our file naming conventions. BP relies upon a very specific naming convention for colorset stylesheets. BP includes 4 "colorsets" - blank, purple, blue, and green. Their respective stylesheet names are blank_style.css, purple_style.css, blue_style.css and green_style.css. See the pattern? Each colorset stylesheet uses the convention of "color_style.css" (color name, followed by an underscore, follwed by "style.css"). This naming convention is crucial to loading the proper colorsheet, as it will be for the actual colorset icons, as we will see in a moment.
Feed Icons Using different feed icons is accomplished by the colorset's stylesheet. Take a look at the purple stylesheet (purple_style.css):
.serendipity_xml_icon { background: url('img/purple_xml.png') no-repeat center; margin: 0; padding: 10px 0; visibility: visible; } .serendipity_xml_icon img { visibility: hidden; }As shown in the css above, bp assigns the colorset specific feed icon as a background image, then hides the default orange feed icon. As with the stylesheet naming convention, the colorset feed icons are named "color_xml.png" (color name, followed by an underscore, follwed by "xml.png").
Calendar Arrow and graph bar icons No file editing is necessary for these icons. Colorset icon substitution is handled exclusively by following the same naming convention used by the stylesheets and feed icons. Once again using purple as an example, the colorset icon for the left, or back arrow is purple_back.png; the right or forward arrow is purple_forward.png, and the graph bar icon is purple_graph_bar.png. Simply follow this naming convention, and the colorset specific icons will be used "automagically".
One of the, if not the major new feature in Bulletproof v1.1 is the possibility to add additional colorsets add. Users can add their own colorset without having to edit any of the template's core files as long as they follow certain instructions.Here's ho
Tracked: Sep 21, 12:06