Sliding Notes HowTo’s – Adding An Image To The Button

The other day I posted about the side-effect when the slider title is formated directly, therewith effectively inserting HTML tags into it. Instead I suggested using CSS to format the title.

CSS also comes in handy for adding an image» to the slider button.

This is how it is done:

1. Since inline elements cannot have a hight, you’ll need an image small enough to fit a single line of text, like a smiley 🙂 . It’s height shouldn’t exceed 16px.
2. Use the bstyle shortcode parameter to style an individual slider button, and apply the following CSS: padding-left:20px; background:url(/path/to/your/images/small_image.gif) 3px center no-repeat
3. Better yet, put the above CSS into an extra CSS clause, say

   a.hackadelic-sliderButton.left-image {
     padding-left:20px;
     background:url(/path/to/your/images/default_image.gif)
       3px center no-repeat;
   }

   effectively predefining a default style for a button with an image, and then use the type shortcode parameter to apply that styling, and bstyle to override the image:

   type=left-image bstyle="background-image:url(/path/to/your/images/this_image.gif)

4. If you can identify only a few recurring images, it’d make sense to specify a separate CSS clause, analogous to the one above, for each one of them, and simply use the type parameter to select it (skipping the verbosity of bstyle altogether).

Here is one example of a pre-styled button without image override,» and here’s one WITH image override.»

15 Comments

• 
  Alex Pelayo December 4, 2010 at 9:57 am

  Hi,

  I successfully installed the plug in and am currently modifying to fit my theme. I have a few questions regarding inserting an icon.

  When i use the code you posted above, the icon, which i placed to the left of the title, disrupts the button background and the rollover image covers the icon on rollover.

  How can i properly add the icon using the “type” code without overwriting the button background and the rollover image?

  Is it also possible to use another image on the button when the user clicks it? I need the “Active” state of the button.

  Hope you can help!

  Thanks
  • 
    Hackadelic December 5, 2010 at 10:32 am

    Alex, if I get your comment right, then either your icon and slider button dimensions don’t match (for ex. icon is too big), or your icon does not have transparency where it should. If it’s a size problem, either resize the icon in your favorite graphics editor, or increase the slider button padding. (The latter, however, is likely to disrupt your text line height.)

    The thing with the “active state” is in the works.
• 
  Jennifer Starkman January 9, 2010 at 10:51 pm

  Hackadelic,

  Not at all! I simply don’t have any money, so it’s pointless to say what it would be worth to me, since it would be worth a great deal but I couldn’t pay anyway. Wish I could, since I don’t have the coding skills to figure it out myself. 🙁
  • 
    Hackadelic January 10, 2010 at 1:35 am

    Oh, it seems I’ve been misunderstood again, Jennifer. I wasn’t mocking you or something. It’s just that in my jargon knowing what something would be worth to me and being able to afford it are two different things.
• 
  Jennifer Starkman December 29, 2009 at 11:33 pm

  🙂

  In a figurative sense it would be extremely useful to me. In the literal sense, I wish I could make a donation towards its development, but all of my own website maintenance expenses come out of my pocket (the site runs in the red as it is) and disability benefits haven’t exactly made me a deep-pocketed financial well, lol.

  Having said that, I would of course be glad to give you a little publicity if the version ever came out–let the people who use my site know how useful I’ve found your fantastic plugin. 🙂
  • 
    Hackadelic December 30, 2009 at 1:13 pm

    🙂 I see, Jenifer. So you neatly avoided to answer my question. 🙂
• 
  Jennifer Starkman December 27, 2009 at 7:17 pm

  Forgive my newbie cluelessness, but is there anyway you could give me a code snippet that I could use to replace the button entirely with an image? I’d like to *literally* put a small gif “button” in its place that could be clicked to open the slider. Thanks!
  • 
    Hackadelic December 27, 2009 at 7:37 pm

    Jannifer, what would a SN version that enables you do do just that very simply be worth to you? 🙂
• 
  kidslovemusic December 19, 2009 at 2:45 pm

  works great, thanks!
• 
  Jason September 12, 2009 at 11:21 am

  Is there any way to ‘toggle’ the image?
  Say, a ‘down-arrow’ before the Sliding Notes appear, and then ‘up-arrow’ after the Sliding Notes has been revealed.

  If there’s a way, please share it here. Thank you.
• 
  Patrick Lee February 15, 2009 at 7:46 am

  … one more bug fixed, type=left-image
• 
  Patrick Lee February 15, 2009 at 6:43 am

  Eventually, I get it up with some tears, as I fixed two bugs in the short codes, namly “bacground” and a missing ” at the end of the codes

  please see : http://www.ccie.hk/?p=8

  here are my codes on myCSS and the post

  a.hackadelic-sliderButton.left-image {
  padding-left:25px;
  background: url(./archive/rightArrow1.png)
  3px center no-repeat;
  }
  —-

  [slider title="view topology diagram" type=left-image bstyle="background-image: url(./archive/rightArrow2.png)"]

  [/slider]

  However, I am still confused that if it possible to keep the short code simpler, by skipping
  bstyle=”background-image: url(./archive/rightArrow2.png)”
  or even to skip
  type=left-image if I simply use ONE recurring arrow sign?

  PS: I’ve also spent a couple of hours to get from web a RIGHT right arrow sign for my need
  • 
    Hackadelic February 16, 2009 at 6:49 pm

    Patrick, that’s exactly what my article says. If you mainly use “Array2.png” anyway, make it the default.

    a.hackadelic-sliderButton.left-image {
    padding-left:25px;
    background: url(./archive/rightArrow2.png)
    3px center no-repeat;
    }
    Then you can just write:

    [slider title="view topology diagram" type=left-image]

    Sorry for my typos.
• 
  Patrick Lee February 14, 2009 at 7:28 pm

  hi,

  I failed again, :<
  I added the “hackaadelic-sliderButton.left-image” css by using myCSS plugins, but I didn’t see my arrow icon (in png format) up.
  Do I need changes in the short codes?
  • 
    Hackadelic February 14, 2009 at 11:32 pm

    Patrick, you must excuse my awkwardness: In my sample code, there was an “a” too many:

    hackaaadelic-sliderButton.left-image

    It is sometimes the little things that matter most. 😉