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

Feb 11, 2009   //   by Hackadelic   //   WordPress  //  15 Comments
This entry is part of a series, Sliding Notes Advice»

2718698666 edf08f6aaa m Sliding Notes HowTos   Adding An Image To The ButtonThe 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 icon smile Sliding Notes HowTos   Adding An Image To The Button . 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.»

This one is shown with the default image (here: the “cool” smiley)Powered by Hackadelic Sliding Notes 1.6.5
This one is shown with with an own image (here: the “arrow” smiley)Powered by Hackadelic Sliding Notes 1.6.5

15 Comments

  • 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

    • 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.

  • 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. :-(

    • 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.

  • :-)

    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. :-)

    • :) I see, Jenifer. So you neatly avoided to answer my question. :)

  • 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!

    • Jannifer, what would a SN version that enables you do do just that very simply be worth to you? :)

  • works great, thanks!

  • 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.

  • … one more bug fixed, type=left-image

  • 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

    • 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.

  • 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?

    • 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. ;-)

Leave a comment

Please ignore these 2 fields:

Blog Categories

I have come here to chew bubblegum and kick ass...
and I'm all out of bubblegum.
-- Nada in They Live