Profile Cover Using The Profile Customize Module

This tutorial shows how to use the Profile Customizer module to turn the Sub-menu block into a Profile cover block as well; the original function of the Sub-menu blocks is not changed.  The idea is to allow members to adjust the height of the block and add borders and backgrounds to the block.

First step is to back up the files BxProfileCustomizeTemplate.php and BxProfileCustomizeModule.php.

First open BxProfileCustomizeTemplate.php in your favourite editor; be sure to only use pure ASCII editors such as PsPad or Notepad++

If one looks in the Profile Customiser, one will only see the properties of background, fonts, and borders; there is no height parameter.  Now of course we could just set a fix height for the Sub-menu block and add the background parameter to the block.  However, that means if a user is not interested in having a profile cover, they will have a tall Sub-menu block on their profile page.  My method will allow the user to adjust the height of the Profile Cover or leave the height to the default if they do not wish to have a Profile Cover on their page.

Find the function getAdminPage around line 284.  In that function find:

$aItems = array('background', 'font', 'border'); around line 297.  Change that line to:

$aItems = array('background', 'font', 'border', 'height');

Around line 551 find:

                'type' => array(
                    'type' => 'select',
                    'name' => 'type',
                    'required' => true,
                    'values' => array(
                            'background' => _t('_bx_profile_customize_page_background'),
                            'font' => _t('_bx_profile_customize_page_font'),
                            'border' => _t('_bx_profile_customize_page_border'),
                        ),

Change the code to:

                'type' => array(
                    'type' => 'select',
                    'name' => 'type',
                    'required' => true,
                    'values' => array(
                            'background' => _t('_bx_profile_customize_page_background'),
                            'font' => _t('_bx_profile_customize_page_font'),
                            'border' => _t('_bx_profile_customize_page_border'),
                            'height' => _t('_bx_profile_customize_box_height'),
                        ),

the 'height' parameter was added below the 'border' parameter as can be seen by examination of the code change.

Just before the closing bracket } on the page add the following function:

    function _customPageHeight($sPage, $sTarget, $aVars)
    {
        $oForm = new BxTemplFormView(array(

            'form_attrs' => array(
                'name'     => 'height_form',
                'action'   => $sBaseUrl = BX_DOL_URL_ROOT . $this->_oConfig->getBaseUri() . 'save',
                'method'   => 'POST',
                'enctype' => 'multipart/form-data',
            ),

            'params' => array (),

            'inputs' => array(

                'heigh' => array(
                    'type' => 'select',
                    'name' => 'height',
                    'values' => array(
                            -1 => _t('_bx_profile_customize_default'),
                            125 => '125',
                            150 => '150',
                            175 => '175',
                            200 => '200',
                            225 => '225',
                            250 => '250',
                            275 => '275',
                            300 => '300',
                            325 => '325',
                            350 => '350',
                            375 => '375',
                            400 => '400',
                        ),
                    'value' => isset($aVars['height']) ? (int)$aVars['height'] : -1,
                    'caption' => _t('_bx_profile_customize_box_cover_height'),
                    'attrs' => array(
                            'multiplyable' => false
                        ),
                    'display' => true,
                ),
                'page' => array(
                    'type' => 'hidden',
                    'name' => 'page',
                    'value' => $sPage,
                ),
                'trg' => array(
                    'type' => 'hidden',
                    'name' => 'trg',
                    'value' => $sTarget,
                ),
            )
        ));

        return $oForm->getCode();
    }

The range for the height of the Sub-menu block can be adjusted.  The default size of my Sub-menu block is 100 pixels.  I have the upper range set to 400 pixels in the code.  One can either add or subtract values from that list.

Now we move to the BxProfileCustomiseModule.php file, open the file and make the following changes.

Around line 304 find:

$aMenuItems = array('themes', 'background', 'font', 'border');

and change it to:

$aMenuItems = array('themes', 'background', 'font', 'border', 'height');

Just before the closing bracket } add the following function:

   
    function _compileHeight($aParam)
    {
        $sParams = '';
        $sVal = "height: ";
        $sValue = $aParam['height'];

        $sParams .= $sVal . $sValue . 'px;';

        return $sParams;
    }

We have to add the new language keys to the Profile Customizer module:

_bx_profile_customize_box_height

_bx_profile_customize_box_cover_height

The first is the text that will show in the admin.  The second is the text that will show on the customizer form to the member.  Add these keys to the Boonex Profile Customize section.

The following change is optional.  I wished for the Sub-menu to be located at the bottom of the block.  The default is for the menu to be directly under the avatar and status block.  If you don't mind the default position then you can skip this change.

In your top_menu.css file in your template (if that stylesheet is not part of your template then copy it from the base template) find the following section:

div.sys_page_submenu_bottom div.sys_page_submenu {
    float: none;
    line-height: 15px;
}

Change it to:

div.sys_page_submenu_bottom div.sys_page_submenu {
    float: none;
    line-height: 15px;
  position:absolute;
  bottom:5px;
  padding:5px;
}

I add the padding because I am going to add to the Profile Customizer module to allow the user to change the background of the Sub-menu.  The reason is that with a busy Profile Cover image the menu can be hard to read.  Some members don't care but some will want the menu to be legible.

I also adjusted the min-height for the Sub-menu block to allow more room between the avatar and menu on pages where the Sub-menu bar is the default.  This is done in the following section of the top_menu.css

div.subMenu {
    position: relative;
    min-height: 54px;
    background-color: rgb(250, 250, 250);
    background-color: rgba(255,255,255, 0.8);
    border-top: 0px;
    font-weight: bold;
}

Change the min-height to a value that is suitable for your site.  For me, I set that to a min-height of 100 pixels but it will be determined by your site needs.  The lower value for my members to set the height is 125 pixels.

Now we must add the proper entries to the Profile Customizer module in the admin so our member have access to the changes we have made.

First, let add a border entry for the Sub-menu block:

Click on borders in the menu in the Profile Customizer modules in the admin.

Name: sub_menu_border

Caption: Profile Cover Border

Name Of Css: div.subMenu

Type: Borders

Once you have that entered click on the Save button.

Note: Borders will be preselected.  The Caption is what will be displayed to your members.  I have not tried using language keys here but I would expect one could; if not that needs to be addressed so we can have a multilingual site.

Now we do one for backgrounds.

Name: sub_menu_cover

Caption: Profile Cover

Name Of Css: div.subMenu

Type: Background

Click Save.

Now we do the one for Height of the Profile Cover.

Name: sub_menu_height

Caption: Profile Cover Height

Name Of Css: div.subMenu

Type: Height

Click Save.

We can also allow our user to change the background of the menu bar on the Profile Cover:

Name: sub_menu_background

Caption: Profile Cover Menu

Name Of Css: div.sys_page_submenu

Type: Background

Click Save.

As well as the background of the Status Message:

Name: status_message_background

Caption: Status Message Background

Name Of Css: div#StatusMessage

Type: Background

Click Save.

Now your members will be able to upload a Profile Cover using the Sub-menu block on their profile page.  They will also be able to adjust the height of the Profile Cover to fit the style of their page.