This entry is part of a series, Sliding Notes Advice»
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:
- 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. - 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 - 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) - 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.»
Entries in this series:
- Sliding Notes - Scriptaculous Caveats
- Sliding Notes HowTo - Centered Button With 1.0 Series
- Getting Started With Sliding Notes And MyCSS In 4 Super-Easy Steps
- Sliding Notes Lessons - Beware of HTML Tags In Title
- PassionDuo Theme Defect - And How To Fix It
- Sliding Notes Self Aid - Overcoming Theme Footer Defects
- Sliding Notes HowTo's - Adding An Image To The Button
- WordPress CSS Accordion Menu With Sliding Notes In 3 Easy Steps
Easy, right?Powered by Hackadelic Sliding Notes 1.6.3.2
This one is shown with the default image (here: the “cool” smiley)Powered by Hackadelic Sliding Notes 1.6.3.2
This one is shown with with an own image (here: the “arrow” smiley)Powered by Hackadelic Sliding Notes 1.6.3.2
February 14th, 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?
February 14th, 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.
February 15th, 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
February 15th, 2009 at 7:46 am
… one more bug fixed, type=left-image
February 16th, 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.
September 12th, 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.
December 19th, 2009 at 2:45 pm
works great, thanks!
December 27th, 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!
December 27th, 2009 at 7:37 pm
Jannifer, what would a SN version that enables you do do just that very simply be worth to you?
December 29th, 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.
December 30th, 2009 at 1:13 pm
January 9th, 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.
January 10th, 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.