Navigation button spacing in skin

Question

I have created multiple projects where I enable the back, pause, and forward navigation. When I preview the project in Captivate the buttons a grouped together on the left side. When I publish and view the project in an internet browser, the buttons are spread out, equally distributed horizontally (see image below). I prefer them to be grouped together. The only way I can prevent them from spreading out is to add the progress bar back in, but this is not desirable for these particular projects.

Is there another way to keep the navigation buttons grouped together?

TLCMediaDesign · Accepted Answer

Go into the assets/css/CPLibraryAll.css file and add the lines in BOLD to the CSS:

.playbarSmallButton

{

width:25px;

height:25px;

float:left;

display:inline;

-moz-user-select: none;

-khtml-user-select: none;

-webkit-user-select: none;

-o-user-select: none;

margin-left: 0px !important

}

.playbarSmallButton:hover {cursor:pointer;}

.playbarBigButton

{

width:41px;

height:25px;

float:left;

display:inline;

-moz-user-select: none;

-khtml-user-select: none;

-webkit-user-select: none;

-o-user-select: none;

margin-left: 0px !important

}

If you want the exit button to the right, add this CSS below the line above:

.playbarSmallButton:last-child {

margin-right: 2px;

float: right !important

}

RodWard · Answer

Go into Project > Skin Editor and change the Playbar Layout setting from Stretched to one of the other options.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded