V10 Slideshow: Customize Back / Next icons?

This forum is for all Flare issues related to the HTML5, WebHelp, WebHelp Plus, and Adobe Air Targets
Post Reply
Phlawm53
Sr. Propeller Head
Posts: 442
Joined: Tue Mar 16, 2010 10:58 am
Location: San Francisco, CA
Contact:

V10 Slideshow: Customize Back / Next icons?

Post by Phlawm53 »

------
For Flare 10.01 Slideshows.

What's the trick to reliably yet non-destructively customizing a Slideshow project's Back / Next navigation buttons?

  • "Reliably" because I don't want to have to manually replace the image file each time I build the Slideshow.
  • "Non-destructively" because I don't want to overwrite Flare 10's own default image file for the Back/Next buttons.
(I've tried finding the answer to the same question for generic HTML5 Targets since V10 Slideshows are just a customized HTML5 Target but couldn't find the answer.)

Here's a screenshot that shows the buttons I'm trying to modify for this project:
Flare1001SlideShowBackNextControls.png
What I've figured out so far
I've identified the resources that are integrated into the Slideshow output when the Project is built:
  • The image file for the controls is [OutputFolder]\Skins\Default\Stylesheets\Images\MCSlider_controls.png
    MCSlider_controls.png
  • The CSS file that specifies that PNG image file (and a particular "sprite" within it) is [OutputFolder]\Skins\Default\Stylesheets\Slideshow.css
  • The HTML5 Skin Editor does NOT provide any way to specify an alternative image file.
What I want to do next
I believe my question is, is there a way to tell this project to use an edited version of the control's image file contained in, say, the Project's Content Explorer —> Resources —> Images folder?

It's easy to edit or create a PNG file that contains the images I want. No problem. But so far the only way I've been able to get the edited image into the Slideshow output is to copy the edited PNG file into the Slideshow's output folder after I Build the project. That's not hard in the physical labour sense, but does create an extra manual step that requires extra steps or can be forgotten.

At the same time, I don't want to replace the default Slideshow image file Flare incorporates into new Slideshow projects.

As I stated at the top of this post, I suspect the strategy has already been described in a post pertaining to generic HTML Targets(?) If so, please point me to that post so I can re-use the information.

Cheers & thanks for your help,
Riley
SFO
You do not have the required permissions to view the files attached to this post.
Last edited by Phlawm53 on Mon Apr 28, 2014 10:03 am, edited 1 time in total.
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: V10 Slideshow: Customize Back / Next icons?

Post by NorthEast »

You could just add a modification to the CSS in your topic stylesheet; e.g.:

Code: Select all

a.mc-prev 
{
    background-image: url("../Images/yourimage.png") !important;
    background-position: 0 0 !important;
}
You'd need to the !important property to stop Flare's CSS from taking precedence.

Do the same for the :hover psuedo class, and the mc-next classes too.
IFU
Propeller Head
Posts: 48
Joined: Tue Dec 05, 2017 5:28 pm
Location: Vancouver BC

Re: V10 Slideshow: Customize Back / Next icons?

Post by IFU »

I was able to change the back/next icons by modifying the stylesheet as suggested. Thank you.
How would I change the vertical position of the back/next arrows (I would like them at the top instead of centered). Thanks. Isabelle
Scotty
Propeller Head
Posts: 98
Joined: Thu Feb 02, 2012 6:56 pm
Location: Europe

Re: V10 Slideshow: Customize Back / Next icons?

Post by Scotty »

IFU wrote:I was able to change the back/next icons by modifying the stylesheet as suggested. Thank you.
How would I change the vertical position of the back/next arrows (I would like them at the top instead of centered). Thanks. Isabelle
Bump this, I also need to change the vertical position of the arrows (to the top of the slide).

Any ideas?
The newest noob in town.
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: V10 Slideshow: Customize Back / Next icons?

Post by NorthEast »

Set its position from the top; e.g.

Code: Select all

a.mc-prev,
a.mc-next
{
  top: 32px;
}
Scotty
Propeller Head
Posts: 98
Joined: Thu Feb 02, 2012 6:56 pm
Location: Europe

Re: V10 Slideshow: Customize Back / Next icons?

Post by Scotty »

Dave Lee wrote:Set its position from the top; e.g.

Code: Select all

a.mc-prev,
a.mc-next
{
  top: 32px;
}
Thanks Dave, I put that in the main stylesheet, but to no effect...
The newest noob in town.
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: V10 Slideshow: Customize Back / Next icons?

Post by NorthEast »

Try...

Code: Select all

a.mc-prev,
a.mc-next
{
  top: 32px !important;
}
Scotty
Propeller Head
Posts: 98
Joined: Thu Feb 02, 2012 6:56 pm
Location: Europe

Re: V10 Slideshow: Customize Back / Next icons?

Post by Scotty »

Dave Lee wrote:Try...

Code: Select all

a.mc-prev,
a.mc-next
{
  top: 32px !important;
}
That did the trick, thanks!
The newest noob in town.
Post Reply