CherryFramework 3. How to activate full screen option on player

To add a Fullscreen button onto player, please, perform following steps:

1. Connect to your FTP or open the hosting control panel File manager tool.

   

2. Navigate to wp-content/themes/CherryFramework/includes folder and download theme-function.php file.

3. Open it with any text editor and add into following code, aprox. to the line 579

   ?

   1 2 3 4

   <ul class="jp-toggles"> <li class="first"><a href="javascript:;" class="jp-mute" tabindex="1" title="<?php echo theme_locals(" mute")?="">"><span><!--?php echo theme_locals("mute") ?--></span></a></li> <li class="last"><a href="javascript:;" class="jp-unmute" tabindex="1" title="<?php echo theme_locals(" unmute")?="">"><span><!--?php echo theme_locals("unmute") ?--></span></a></li> </ul>

   this line of code:

   ?

   1	<li><a href="javascript:;" class="jp-full-screen" tabindex="1" title="<?php echo theme_locals(" fullwidth")?="">"><span><!--?php echo theme_locals("fullwidth") ?--></span></a></li>

   Result would be:

   ?

   1 2 3 4 5

   <ul class="jp-toggles"> <li class="first"><a href="javascript:;" class="jp-mute" tabindex="1" title="<?php echo theme_locals(" mute")?="">"><span><!--?php echo theme_locals("mute") ?--></span></a></li> <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="<?php echo theme_locals(" unmute")?="">"><span><!--?php echo theme_locals("unmute") ?--></span></a></li> <li class="last"><a href="javascript:;" class="jp-full-screen" tabindex="1" title="<?php echo theme_locals(" fullwidth")?="">"><span><!--?php echo theme_locals("fullwidth") ?--></span></a></li> </ul>

4. Save file and replace on server.

5. Open your style.css file and add the following css rule to the bottom of the file:

   ?

   1 2 3

   div.jp-volume-bar { right: 34px !important; }

6. Save file and replace on server.

7. Check your site.

   

Feel free to check the detailed video tutorial below:

Also, take a look at the collection of premium WordPress themes.