+ Start a Discussion
Andrea SloanAndrea Sloan 

Additional spacing betwen homepage custom components

I've developed a VisualForce page which I'm adding as a Salesforce homepage component. It all works fine. The only issue is that from a layout persepctive, there's not enough room vertically between one component and the next  and the content in my VF compoent (which are links) are not starting from the top of the component but lower down. Therefore it could be easy for the user to miss. I'm attaching screenshot of the compoentn and my VisualForce page code is below. If any additional coding is required to enhance, I would appreciate if someone can provide this for me as I'm a salseforce admin and don't know much of development language. You'll see that my first screenshot has the link Passwords:SouthAfrica at the bottom of the component. I'd like it further up to allow room t view additional links. My second screeshot (with the "sanctuary" link includes to links where you need to scroll down to view because there's not enough room on the component. The size of this component is too small if I can't fit at least 3 links without having to scroll. How can i make it so that we can enlarge it to fit three links?

<apex:page >
<style>
.linksWrap a {color:#1797c0; font-weight:bold; text-decoration:none;}
</style>

<div class="linksWrap">
   
      
        <apex:outputLink target="_blank" rendered="{!IF($User.Username == 'robrien@abercrombiekent.com', true, false)}" value="/005?setupid=ManageUsers&isUserEntityOverride=1&fcf=00BE0000003ly4M">Passwords: Active Users</apex:outputLink>
       <BR></BR>
        <apex:outputLink target="_blank" rendered="{!IF($User.Username == 'robrien@abercrombiekent.com', true, false)}" value="/005?setupid=ManageUsers&isUserEntityOverride=1&fcf=00BE0000004MnFD">Users' Time Zones</apex:outputLink>
      <BR></BR>
        <apex:outputLink target="_blank" rendered="{!IF($User.Username == 'robrien@abercrombiekent.com', true, false)}" value="https://abercrombiekentgroup.sharepoint.com/sites/DBA/Lists/TS%20%20IT%20Admins/AllItems.aspx">IT and Travel Studio TS Admins</apex:outputLink>
      
        <!-- this is here b/c this user is not a Local admin profile so wouldnt see the link if it was with the others in the outputpanel below where 2 conditions need to be meet Local admin and username -->
        
     <apex:outputPanel rendered="{!IF($Profile.Name == 'Source Market Local Admin', true, false)}">
         <apex:outputLink target="_blank" rendered="{!IF($User.Username == 'afadmin1@abercrombiekent.com', true, false)}" value="/005?setupid=ManageUsers&isUserEntityOverride=1&fcf=00B44000004O0Wy" >Passwords: European and Sanctuary</apex:outputLink>
      <BR></BR>
<apex:outputLink target="_blank" rendered="{!IF($User.Username == 'afadmin1@abercrombiekent.com', true, false)}" value="https://abercrombiekentgroup.sharepoint.com/sites/DBA/Lists/TS%20%20IT%20Admins/AllItems.aspx">IT and Travel Studio TS Admins</apex:outputLink>

      <BR></BR>
       
        
 </apex:outputPanel>    
        
        
                
<apex:outputPanel rendered="{!IF($Profile.Name == 'Source USA Non Retail Local Admin', true, false)}">
        <apex:outputLink target="_blank" rendered="{!IF($User.Username == 'lsayers@akdmc.com', true, false)}" value="/005?setupid=ManageUsers&isUserEntityOverride=1&fcf=00BE0000002uKbi">Passwords: USA Non Retail</apex:outputLink>
        <BR></BR>
      <apex:outputLink target="_blank" rendered="{!IF($User.Username == 'lsayers@akdmc.com', true, false)}"  value="https://abercrombiekentgroup.sharepoint.com/sites/DBA/Lists/TS%20%20IT%20Admins/AllItems.aspx">IT and Travel Studio TS Admins</apex:outputLink>
        
 </apex:outputPanel>   
 
 <apex:outputPanel rendered="{!IF($Profile.Name == 'Source USA Retail Local Admin', true, false)}">
       
        <apex:outputLink target="_blank" rendered="{!IF($User.Username == 'plangeloh@abercrombiekent.com', true, false)}" value="/005?setupid=ManageUsers&isUserEntityOverride=1&fcf=00BE0000002uKbn">Passwords: USA Retail</apex:outputLink>
        
        <apex:outputLink target="_blank" rendered="{!IF($User.Username == 'kaylward@abercrombiekent.com', true, false)}" value="/005?setupid=ManageUsers&isUserEntityOverride=1&fcf=00BE0000002uKbn">Passwords: USA Retail</apex:outputLink>
        
 </apex:outputPanel>   
 
 
 
 <apex:outputPanel rendered="{!IF($Profile.Name == 'DMC Local Admin', true, false)}">
        <apex:outputLink target="_blank" rendered="{!IF($User.Username == 'zsogoni@abercrombiekent.co.za', true, false)}" value="/005?setupid=ManageUsers&isUserEntityOverride=1&fcf=00BE0000003mw49">Passwords: Southern Africa</apex:outputLink>

 </apex:outputPanel>       
      
        
        <!--
        Here is a sample link broken down, copy this link and put it under the last link above and change the data to match.
        - [USERNAME OF USER] replace this with the username of the user you want to be able to see the link.
        - [LIST VIEW ID] replace this with the Id of the List view you want it to show.
          Remember that when you navigate to the Manage Users page, you will need to re-select the group you want from the picklist so it will show the ID of the listview
          at the end of the URL. Just copy everything after the &fcf= in the URL and that should be the Group ID) (after the last = sign)
        - [LINK TEXT] replace this with whatever text you want to show for the link.
        - target="_blank" means the link will open in a new tab or window

        <apex:outputLink target="_blank" rendered="{!IF($User.Username == '[USERNAME OF USER]', true, false)}" value="/005?setupid=ManageUsers&isUserEntityOverride=1&fcf=[LIST VIEW ID]">[LINK TEXT]</apex:outputLink>      
        -->
</div>
</apex:page>
User-added image

User-added image
Best Answer chosen by Andrea Sloan
Deepak GulianDeepak Gulian
<apex:page >
<style>
.linksWrap a {color:#1797c0; font-weight:bold; text-decoration:none;}
a {display: block;}
</style>

<div class="linksWrap">
   
      
        <apex:outputLink target="_blank" rendered="{!IF($User.Username == 'robrien@abercrombiekent.com', true, false)}" value="/005?setupid=ManageUsers&isUserEntityOverride=1&fcf=00BE0000003ly4M">Passwords: Active Users</apex:outputLink>

        <apex:outputLink target="_blank" rendered="{!IF($User.Username == 'robrien@abercrombiekent.com', true, false)}" value="/005?setupid=ManageUsers&isUserEntityOverride=1&fcf=00BE0000004MnFD">Users' Time Zones</apex:outputLink>

        <apex:outputLink target="_blank" rendered="{!IF($User.Username == 'robrien@abercrombiekent.com', true, false)}" value="https://abercrombiekentgroup.sharepoint.com/sites/DBA/Lists/TS%20%20IT%20Admins/AllItems.aspx">IT and Travel Studio TS Admins</apex:outputLink>
      
        <!-- this is here b/c this user is not a Local admin profile so wouldnt see the link if it was with the others in the outputpanel below where 2 conditions need to be meet Local admin and username -->
        
     <apex:outputPanel rendered="{!IF($Profile.Name == 'Source Market Local Admin', true, false)}">
         <apex:outputLink target="_blank" rendered="{!IF($User.Username == 'afadmin1@abercrombiekent.com', true, false)}" value="/005?setupid=ManageUsers&isUserEntityOverride=1&fcf=00B44000004O0Wy" >Passwords: European and Sanctuary</apex:outputLink>

<apex:outputLink target="_blank" rendered="{!IF($User.Username == 'afadmin1@abercrombiekent.com', true, false)}" value="https://abercrombiekentgroup.sharepoint.com/sites/DBA/Lists/TS%20%20IT%20Admins/AllItems.aspx">IT and Travel Studio TS Admins</apex:outputLink>
       
        
 </apex:outputPanel>    
        
        
                
<apex:outputPanel rendered="{!IF($Profile.Name == 'Source USA Non Retail Local Admin', true, false)}">
        <apex:outputLink target="_blank" rendered="{!IF($User.Username == 'lsayers@akdmc.com', true, false)}" value="/005?setupid=ManageUsers&isUserEntityOverride=1&fcf=00BE0000002uKbi">Passwords: USA Non Retail</apex:outputLink>

      <apex:outputLink target="_blank" rendered="{!IF($User.Username == 'lsayers@akdmc.com', true, false)}"  value="https://abercrombiekentgroup.sharepoint.com/sites/DBA/Lists/TS%20%20IT%20Admins/AllItems.aspx">IT and Travel Studio TS Admins</apex:outputLink>
        
 </apex:outputPanel>   
 
 <apex:outputPanel rendered="{!IF($Profile.Name == 'Source USA Retail Local Admin', true, false)}">
       
        <apex:outputLink target="_blank" rendered="{!IF($User.Username == 'plangeloh@abercrombiekent.com', true, false)}" value="/005?setupid=ManageUsers&isUserEntityOverride=1&fcf=00BE0000002uKbn">Passwords: USA Retail</apex:outputLink>
        
        <apex:outputLink target="_blank" rendered="{!IF($User.Username == 'kaylward@abercrombiekent.com', true, false)}" value="/005?setupid=ManageUsers&isUserEntityOverride=1&fcf=00BE0000002uKbn">Passwords: USA Retail</apex:outputLink>
        
 </apex:outputPanel>   
 
 
 
 <apex:outputPanel rendered="{!IF($Profile.Name == 'DMC Local Admin', true, false)}">
        <apex:outputLink target="_blank" rendered="{!IF($User.Username == 'zsogoni@abercrombiekent.co.za', true, false)}" value="/005?setupid=ManageUsers&isUserEntityOverride=1&fcf=00BE0000003mw49">Passwords: Southern Africa</apex:outputLink>

 </apex:outputPanel>       
      
        
        <!--
        Here is a sample link broken down, copy this link and put it under the last link above and change the data to match.
        - [USERNAME OF USER] replace this with the username of the user you want to be able to see the link.
        - [LIST VIEW ID] replace this with the Id of the List view you want it to show.
          Remember that when you navigate to the Manage Users page, you will need to re-select the group you want from the picklist so it will show the ID of the listview
          at the end of the URL. Just copy everything after the &fcf= in the URL and that should be the Group ID) (after the last = sign)
        - [LINK TEXT] replace this with whatever text you want to show for the link.
        - target="_blank" means the link will open in a new tab or window

        <apex:outputLink target="_blank" rendered="{!IF($User.Username == '[USERNAME OF USER]', true, false)}" value="/005?setupid=ManageUsers&isUserEntityOverride=1&fcf=[LIST VIEW ID]">[LINK TEXT]</apex:outputLink>      
        -->
</div>
</apex:page>

Hi update your VF code with the above code and let me know if it works!

All Answers

Deepak GulianDeepak Gulian
<apex:page >
<style>
.linksWrap a {color:#1797c0; font-weight:bold; text-decoration:none;}
a {display: block;}
</style>

<div class="linksWrap">
   
      
        <apex:outputLink target="_blank" rendered="{!IF($User.Username == 'robrien@abercrombiekent.com', true, false)}" value="/005?setupid=ManageUsers&isUserEntityOverride=1&fcf=00BE0000003ly4M">Passwords: Active Users</apex:outputLink>

        <apex:outputLink target="_blank" rendered="{!IF($User.Username == 'robrien@abercrombiekent.com', true, false)}" value="/005?setupid=ManageUsers&isUserEntityOverride=1&fcf=00BE0000004MnFD">Users' Time Zones</apex:outputLink>

        <apex:outputLink target="_blank" rendered="{!IF($User.Username == 'robrien@abercrombiekent.com', true, false)}" value="https://abercrombiekentgroup.sharepoint.com/sites/DBA/Lists/TS%20%20IT%20Admins/AllItems.aspx">IT and Travel Studio TS Admins</apex:outputLink>
      
        <!-- this is here b/c this user is not a Local admin profile so wouldnt see the link if it was with the others in the outputpanel below where 2 conditions need to be meet Local admin and username -->
        
     <apex:outputPanel rendered="{!IF($Profile.Name == 'Source Market Local Admin', true, false)}">
         <apex:outputLink target="_blank" rendered="{!IF($User.Username == 'afadmin1@abercrombiekent.com', true, false)}" value="/005?setupid=ManageUsers&isUserEntityOverride=1&fcf=00B44000004O0Wy" >Passwords: European and Sanctuary</apex:outputLink>

<apex:outputLink target="_blank" rendered="{!IF($User.Username == 'afadmin1@abercrombiekent.com', true, false)}" value="https://abercrombiekentgroup.sharepoint.com/sites/DBA/Lists/TS%20%20IT%20Admins/AllItems.aspx">IT and Travel Studio TS Admins</apex:outputLink>
       
        
 </apex:outputPanel>    
        
        
                
<apex:outputPanel rendered="{!IF($Profile.Name == 'Source USA Non Retail Local Admin', true, false)}">
        <apex:outputLink target="_blank" rendered="{!IF($User.Username == 'lsayers@akdmc.com', true, false)}" value="/005?setupid=ManageUsers&isUserEntityOverride=1&fcf=00BE0000002uKbi">Passwords: USA Non Retail</apex:outputLink>

      <apex:outputLink target="_blank" rendered="{!IF($User.Username == 'lsayers@akdmc.com', true, false)}"  value="https://abercrombiekentgroup.sharepoint.com/sites/DBA/Lists/TS%20%20IT%20Admins/AllItems.aspx">IT and Travel Studio TS Admins</apex:outputLink>
        
 </apex:outputPanel>   
 
 <apex:outputPanel rendered="{!IF($Profile.Name == 'Source USA Retail Local Admin', true, false)}">
       
        <apex:outputLink target="_blank" rendered="{!IF($User.Username == 'plangeloh@abercrombiekent.com', true, false)}" value="/005?setupid=ManageUsers&isUserEntityOverride=1&fcf=00BE0000002uKbn">Passwords: USA Retail</apex:outputLink>
        
        <apex:outputLink target="_blank" rendered="{!IF($User.Username == 'kaylward@abercrombiekent.com', true, false)}" value="/005?setupid=ManageUsers&isUserEntityOverride=1&fcf=00BE0000002uKbn">Passwords: USA Retail</apex:outputLink>
        
 </apex:outputPanel>   
 
 
 
 <apex:outputPanel rendered="{!IF($Profile.Name == 'DMC Local Admin', true, false)}">
        <apex:outputLink target="_blank" rendered="{!IF($User.Username == 'zsogoni@abercrombiekent.co.za', true, false)}" value="/005?setupid=ManageUsers&isUserEntityOverride=1&fcf=00BE0000003mw49">Passwords: Southern Africa</apex:outputLink>

 </apex:outputPanel>       
      
        
        <!--
        Here is a sample link broken down, copy this link and put it under the last link above and change the data to match.
        - [USERNAME OF USER] replace this with the username of the user you want to be able to see the link.
        - [LIST VIEW ID] replace this with the Id of the List view you want it to show.
          Remember that when you navigate to the Manage Users page, you will need to re-select the group you want from the picklist so it will show the ID of the listview
          at the end of the URL. Just copy everything after the &fcf= in the URL and that should be the Group ID) (after the last = sign)
        - [LINK TEXT] replace this with whatever text you want to show for the link.
        - target="_blank" means the link will open in a new tab or window

        <apex:outputLink target="_blank" rendered="{!IF($User.Username == '[USERNAME OF USER]', true, false)}" value="/005?setupid=ManageUsers&isUserEntityOverride=1&fcf=[LIST VIEW ID]">[LINK TEXT]</apex:outputLink>      
        -->
</div>
</apex:page>

Hi update your VF code with the above code and let me know if it works!

This was selected as the best answer
Andrea SloanAndrea Sloan
Thank you, Deepak. Would you be able to send it without the row numbers so I could copy paste it directly?
Deepak GulianDeepak Gulian

User-added image

Hover this code window and click on view source icon and then you can copy the code from popup window.

Andrea SloanAndrea Sloan
Hi Deepak:
The first link now does appear further up however, I'm not able to see more than two line's worth of links without scrolling. is there any we can make it so that I could see three row's worth without having to scroll?
Deepak GulianDeepak Gulian

Try to edit the value of height in home page component.

User-added image

Andrea SloanAndrea Sloan
Thank you, Deepak. Works great! So waht does "block" that you added mean for future refrence?
 
Deepak GulianDeepak Gulian
We use this CSS property to display elements in different line.
Andrea SloanAndrea Sloan
Thank you!