Customizable Buttons on the Topbar

ActivePresenter Feature Requests
1

Hi,

is there any way, to create a second button on the Topbar? I’ve already used References Button, but in my projects I usually add many media content under Creative Commons licence, and would like to have a button on the Topbar to display the “Credits”.
I’m using the latest version of A.P., is this something we will see in future versions?

Thank you,

Cecilia

2

Hi Cecilia,

Unfortunately, ActivePresenter doesn’t allow creating a custom button in Player. We will consider adding this if we get more requests from users.

Regards,

3

Hi Cecilia,

Actually, you can do this by modifying the player layout files then add your code in. For example, you can edit the file at “C:\Program Files\ATOMI\ActivePresenter\templates\html5\skin\Modern\player\layouts\topbar.html” as below:

<div class="ap-toolbar-top ap-toolbar" role="toolbar" tabindex="0">
	<style>
		.ap-tool-credits .ap-button-label {
			padding: 10px !important;
		}
	</style>
	<script type="text/javascript">
		var $ = window.AtomiAP.$;
		$(".ap-tool-credits").bind("click", function() {
			alert("Add your code here");
		});		
	</script>
    <div class="ap-tool-projectname"></div>
	<div class="ap-button ap-tool-credits" data-has-label="true" data-has-icon="false"><div class="ap-button-label">Credits</div></div>
    <div class="ap-button ap-tool-resources" data-has-label="true"></div>
</div>

Regards,

1 Like
4

Hi, I managed to customize some things on the top bar, however, for mobile versions, I’d like to customize the size of the buttons on the bottom bar: play, forward, volume, close, etc, . I’d like they are wider. I opened the rlplayer file, but can’t find the lines for those buttons. Could you please let me know where they are?
Thanks

5

Hi Cecilia,

Please search for “.ap-button” in the file at C:\Program Files\ATOMI\ActivePresenter\templates\html5\css\rlplayer.css.

Regards,

6

thank you for your response, I managed to changed the buttons on the bottom bar, now I would like to remove the Resources icon and enlarge the resources panel. Could you please indicate, what file/code should I change?
image

7

Hi Cecilia,

For hidding button icon, just add the property named “data-has-icon” like below:

<div class="ap-button ap-tool-resources" data-has-label="true" data-has-icon="false"></div>.

Unfortunately, there is no way to customize the dimension of resources pane.

Regards,