Login
Main menu

Pragmatism in code

Michael Percy AKA DeeEmm - Waxing lyrical about life the universe and everything software related since lunchtime 2006.

D7 Move avatar from promo to banner

by in Dolphin 7.0.x Modifications
  • Font size: Larger Smaller
  • Hits: 2981
  • Subscribe to this entry
  • Print
2981

After updating my Dolphin 6 site to the new version 7 software I decided that I wanted to move the avatar to the banner - basically the same as for my D6 site. I also wanted to put the quotes at the bottom - I decided to mimick the style and layout for my D6 site - I wanted my upgrade to D7 to be more or less transparent to my users.

 

How To Relocate the daily quotes

To modify the quotes position is  simple enough - you just need to modify the sys_injections table - look for quotes_injection and then change the key to injection_footer_after

injection_footer_after refers to the tag that the content will replace - in this case the tag in the footer

 

bx_injection:injection_footer_after />

 

This is only half of the story though - as the quotes do not display correctly - this is mostly as the css has a position:absolute attribute - this needs to be changed to position:relative, or removed altogether. This can easily be changed in unit.css in the quotes module - look for the .quote_div class name. Whilst you are there you might also want to change the rest of the styling to suit your own site.

You can also override the modules style by adding the following to general.css

 

div.quote_div { position:relative;}

 

Or just use the following code which will also position it nicely

    div.quote_div {
        position:relative;
        margin-top:20px;
        clear:both;
        width:100%;
    }
   
    div.quote_div div.daily_quotes {
        text-align: center;
    }

 

You could also put the quotes block anywhere you like by creating your own injection points - simply add the following tag to your template in the position you want to inject the code - I added this after the footer.

 

bx_injection:my_injection />

 

Then change the key in the sys_injections table to my_injection. Now the quotes display below the bottom footer instead of inside it.

You can include any kind of custom content in this manner by adding it to the sys_injections table - include the custom php code you want to execute in the data field and make sure you change the type to php.

In this manner you can include the avatar and username in the banner.

 

Add the avatar to the banner

The code that puts the avatar and username in the promo block is in design.inc.php - unless you want two avatars displayed you will need to comment it out after you have moved it.

 

$aInfo =  getProfileInfo();            
$sWelcomeElement = '
' . get_member_thumbnail($aInfo['ID'], "left", false) . '
' . _t('_Hello member', $aInfo['NickName']) . '
';

 

Simple create a new entry into the sys_injections table - I called it 'avatar' - then add in the info. We can use the same code for generating the avatar and text for the header. You have to change the way that the code is handled slightly - but not too much - we also need to check if the user is logged in. if not we will display nothing, but we could easily show the login / join buttons instead.

$aInfo = getProfileInfo(); 
return $aInfo = getProfileInfo(); if(isMember()) { return '
' . get_member_thumbnail($aInfo['ID'], "left", false) . '
' . _t('_Hello member', $aInfo['NickName']) . '
';} 


Make sure that you set the key to injection_logo_after so that it is injected in the same position as the quotes were.

You will now see the avatar and text displayed in the header - but you will notice that it does not display 100% correctly - it displays underneath the logo. This is because there are no style elements associated with it - the original styles applied in index.css no longer apply as the elements were explicitly defined - To remedy this simply add the following styles in general.css for the image and test respectively and style them to suit your needs

div.sys_ml_wrapper div.label_thumbnail {        
position:relative;
   float:right;
   top:28px;
}

div.sys_ml_wrapper div.label_thumb {
   float:right;
   margin-right:20px;
   position:relative;
   top:60px;    
}

/DM

People in this conversation

Add comment

Search