07 November 2007
Include Currently Playing Music to b2evolution Posts
)Published on November 7th, 2007 @ 10:10:27 pm, using 559 words, 899 views
For those of you who are avid music listeners, you may want to have the ability to easily include a text box beneath your blog posts in which to quickly list the music to which you're currently listening. This can be quickly achieved by adding a small block of CSS to your b2evo skin's stylesheet, and a small piece of javascript to the toolbar code in the b2evo core.
The CSS block shown below is the one used for the "Contemporaneous Auditory Narcotics" DIV which lives under the post body and which can be seen in most posts on this site. Add a similar block to the stylesheet in your b2evo skin and adjust the color and text to suit your b2evo skin:
.audio {
color: #569ac1;
margin-top: 25px;
margin-bottom: 20px;
font-size: 0.9em;
border: 1px solid #134668;
line-height: 1.2em;
padding: 4px 0px 5px 8px;
background-color: #052a42;
clear: both;
}
.audio strong {
font-weight: bold;
}
The specific styling of the DIV can be adjusted to suit the layout of your favorite b2evo skin. The CSS code shown above is the code used in the 'Ravehands' b2evo skin which I designed for this site.
Next, a block of javascript must be inserted into the /plugins/toolbars/_quicktags.toolbar.php file. It will add a box labeled 'CAN' into the b2evolution admin write and edit screens. I recommend you do not copy this block from here, but only use it as a reference. Instead, a safer method is to copy an existing block from the file. You will see several blocks already listed in that file which create the buttons for such things as 'em', 'p', 'img', etc. Simply duplicate one of those javascript blocks and use it as a template, changing the pieces of code to reflect the javascript code shown below. This ensures the linespacing and line-breaks remain as they should be. I found out first-hand that if one character is out of place in terms of spacing and indentation, the entire b2evolution admin panel will, at best, fail to display the toolbar or, at worst, crash.
b2evoButtons[b2evoButtons.length] = new b2evoButton('b2evo_can'
,'CAN'
,'<div class="audio"><strong>Contemporaneous Auditory Narcotics:</strong><br />or, What my speakers are currently pumping...<br /><strong>Artist - Album</strong></div>',''
,'n'
,'<?php echo T_('currently listening') ?>'
);
Once the javascript portion has been added to your b2evolution core, and the CSS code has been added to the CSS file of your favorite b2evo skin, your post editor will show a new toolbar button labeled 'CAN.' The text displayed on the button itself can be adjusted to suit your preferences... for example, you may wish to call it, simply, MUSIC.
When authoring your new blog posts, clicking the newly added button will create a 'currently listening' DIV box similar to the one shown below...
Enjoy... And if you find this music includer useful for your own b2evolution blog, leave a comment here with a link to your blog.
or, What my speakers are currently pumping...
Burning Spear - Rocking Time
This post is the creative work of Yours Truly and is licensed under a Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 License.
b2evolution, b2evo, blogs, web development, toolbar, CSS, javascript, music
Permanent Link
