V10 Slideshow: Customize Back / Next icons?

This forum is for all Flare issues related to the HTML5, WebHelp, WebHelp Plus, and Adobe Air Targets

V10 Slideshow: Customize Back / Next icons?

Postby Phlawm53 on Fri Apr 25, 2014 5:42 pm

------
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.
User avatar
Phlawm53
Sr. Propeller Head
 
Posts: 438
Joined: Tue Mar 16, 2010 10:58 am
Location: San Francisco, CA

Re: V10 Slideshow: Customize Back / Next icons?

Postby Dave Lee on Mon Apr 28, 2014 4:03 am

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.
Dave Lee
Master Propellus Maximus
 
Posts: 5193
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: V10 Slideshow: Customize Back / Next icons?

Postby IFU on Sun Mar 04, 2018 6:42 pm

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
IFU
Propeller Head
 
Posts: 12
Joined: Tue Dec 05, 2017 5:28 pm
Location: Vancouver BC

Re: V10 Slideshow: Customize Back / Next icons?

Postby Scotty on Tue May 15, 2018 9:57 am

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.
User avatar
Scotty
Propeller Head
 
Posts: 83
Joined: Thu Feb 02, 2012 6:56 pm
Location: Europe

Re: V10 Slideshow: Customize Back / Next icons?

Postby Dave Lee on Tue May 15, 2018 11:28 pm

Set its position from the top; e.g.

Code: Select all
a.mc-prev,
a.mc-next
{
  top: 32px;
}
Dave Lee
Master Propellus Maximus
 
Posts: 5193
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: V10 Slideshow: Customize Back / Next icons?

Postby Scotty on Wed May 16, 2018 3:29 am

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.
User avatar
Scotty
Propeller Head
 
Posts: 83
Joined: Thu Feb 02, 2012 6:56 pm
Location: Europe

Re: V10 Slideshow: Customize Back / Next icons?

Postby Dave Lee on Wed May 16, 2018 4:16 am

Try...

Code: Select all
a.mc-prev,
a.mc-next
{
  top: 32px !important;
}
Dave Lee
Master Propellus Maximus
 
Posts: 5193
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: V10 Slideshow: Customize Back / Next icons?

Postby Scotty on Thu May 17, 2018 2:53 am

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.
User avatar
Scotty
Propeller Head
 
Posts: 83
Joined: Thu Feb 02, 2012 6:56 pm
Location: Europe


Return to Web-based Outputs

Who is online

Users browsing this forum: No registered users and 5 guests