PHP Melody Support

Category: Theme Customizations

Common requests about theme modifications

  • How to Update the Social Links from your template

    Open footer.tpl form your current theme folder:

    /templates/{current theme}/

    Since it’s a basic HTML file, you can edit this file with any text editor.

    Find in file the list-social-sites CSS selector.

    You should be taken to the HTML responsible for your social links. It  should looks something like:

    <li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-youtube"></i></a></li>
<li><a href="#"><i class="fa fa-instagram"></i></a></li>

    or

    <li><i class="fa fa-facebook"></i> <a href="#">Facebook</a></li>
<li><i class="fa fa-twitter"></i> <a href="#">Twitter</a></li>
<li><i class="fa fa-youtube"></i> <a href="#">YouTube</a></li>
<li><i class="fa fa-instagram"></i> <a href="#">Instagram</a></li>

    Replace # with your own social profile links.

    Save changes and re-upload the modified file into your theme folder:

    /templates/{current theme}/

  • Adding iOS Icons for Bookmarks

    Since newer PHP Melody themes such as the Echo theme are responsive you might want to add your own app-like icon for iOS devices.

    That’s because when bookmarked, your site will have a nice little icon on the user’s screen; just like a native app.

    Pro tip: You can create the required icons from your own logo: https://iconifier.net/

    Your default icon should be 57x57px. But iPad and Retina devices need to provide more sizes. iPad requires icons with the size of 72x72px, while Retina devices need icons with 114x114px size.

    Once you have the icons you need to edit your PHP Melody theme header.

    Open:
    /templates/[current theme]/header.tpl

    Find:

    <link rel="shortcut icon" href="{$smarty.const._URL}/templates/{$smarty.const._TPLFOLDER}/img/favicon.ico">

    After, add:

    <link rel="apple-touch-icon" href="https://your-site-com/icon.png"/>
<link rel="apple-touch-icon" sizes="72x72" href="https://your-site-com/icon.png"/>
<link rel="apple-touch-icon" sizes="114x114" href="https://your-site-com/icon.png"/>

  • How can I change the header background color?

    Updating the header background color in the Echo theme is quite easy.

    Open your /templates/Echo/css/echo.css file:

    Find:

    /*-----------------------------------------------------------------------------------*/
/*    3.Header (Navigation, Search, etc.)
/*-----------------------------------------------------------------------------------*/
header.pm-top-head {
  display: table;
  position: fixed;
  background: #FFF;
  border-bottom: 1px solid #e8e8e8;

     

    Replace both #FFF and #e8e8e8 with your desired color code.

  • Featured Categories on Homepage

    Starting with PHP Melody v2.5 you can show videos from selected categories on your homepage. We call those “featured categories”. To show a featured category on your homepage simply browse to your PHP Melody back-end and follow the instructions as illustrated below.

    Clicking on the home icon will mark any category as “featured”.

  • How to Add a New Link In the Header Menu

    Including a new link into your PHP Melody header menu (see image) is very easy.

    All you have to do is open the template file responsible for the header and include the HTML for your new link.

    In the following example we’re going to include a new link, named ‘Special Link‘ which points to https://www.phpmelody.com/. Here’s how to do it.

    1. Open your /templates/[current theme folder]/header.tpl file with a plain-text editor.
    2. Search for the following code: 
      {if $smarty.const._MOD_ARTICLE == 1}
    3. Add your new link right after the closing {/if} like so: 
      <li><a href="https://www.phpmelody.com/" class="wide-nav-link">Special Link</a></li>

    Here’s how the code should look:

     

    That’s it. Upload the updated header.tpl file back to your PHP Melody installation and the new link will appear in the header menu.