I have created multiple visualforce pages to go into lightning app builder (I have to do this instead of components because we have many users and are not ready to deploy domain name, so I cannot use lightning components yet). I'd like to expand the apex page to all corners of the alotted space that is given from the app and remove the name of the visualforce page. 

When I inspect the page, I can move the visualforce page where I'd like it to move within the area using .slds-card__body.slds-card__body--inner and modifying the top-margin to -50px, however, it modifies every visualforce page in the app. When I add this class to the code of my visualforce page and modify the margins in the style it doesn't render. It is nested under an <article class> and I'm not sure how to adjust my class in the visualforce page to account for the article, which I believe is why it's not working. 
Below is a picture of how this looks: 

This is the whole page how it looks now:


 
This is how I'd like it to look: 

<apex:page standardController="Opportunity" recordsetvar="opportunities" id="standopp" showHeader="false">

<div class="slds-card__body.slds-card__body--outer">
<div class=".slds-card__header.slds-grid" style="margin-top:-50px;">
 <apex:form title="form" id="form"  style="zoom:75%; height:550px;width:100% showscroll:False">
  <apex:pageblock id="firstpb" title="firstpb">
   <apex:panelgrid columns="4" id="panelg" title="panelg">
    <apex:outputlabel value="view:"/>
     <apex:selectlist value="{!filterId}" id="select1" title="select1" size="1">
     <apex:selectOptions value="{!listviewoptions}"/>
     <apex:actionsupport event="onchange" rerender="oppsection"/>
    </apex:selectlist>
   </apex:panelgrid>
  <apex:pageblockbuttons >
   <apex:commandButton value="Save" action="{!save}"/>
   <apex:commandButton value="Quick Save" action="{!save}"/>
  </apex:pageblockbuttons> 
  
 
   <apex:pageblocksection id="oppsection" showheader="true">
   <apex:outputPanel style="overflow:auto;width:650px;height:250px">
    <apex:repeat value="{!opportunities}" var="opp" id="rep">
     <apex:pageblocksection id="oppsection2" showheader="true" title="{!opp.name} - {!opp.Billing_City_State__c}">
      <apex:pageblocktable id="table"  value="{!opp.name}" title="pbt1" columns="4" var="pbt" style="width:100px">
       <apex:column headerValue="Information" style="width:100px" >
        <apex:inputField style="width:100px" value="{!opp.stageName}"/><br/>
        <apex:inputField style="width:100px" value="{!opp.LeadSource}"/> <br/><br/>
        <apex:inputField style="width:100px" value="{!opp.Priority__c}"/>
       </apex:column>
       <apex:column headerValue="Information"  style="width:100px" >
        <apex:outputtext style="width:100px" styleclass="bold" value="Overview"></apex:outputtext><br/>     
        <apex:inputField style="width:100px" value="{!opp.Company_Overview__c}" /> <br/>
        <apex:outputtext style="width:100px" styleclass="bold" value="Last Activity"></apex:outputtext><br/> 
        <apex:inputField style="width:100px" value="{!opp.Last_Activity_Date__c}" /> <br/>  
        <apex:outputtext style="width:100px" styleclass="bold" value="Next Activity"></apex:outputtext><br/> 
        <apex:outputLink style="width:100px" value="/{!opp.Next_Activity_ID__c}">{!opp.Next_Activity_Due_Date__c}</apex:outputlink> <br/> 
        <apex:outputtext style="width:100px" styleclass="bold" value="FollowUp"></apex:outputtext><br/>
        <apex:inputField style="width:100px" value="{!opp.Follow_Up_Date__c}" />
       </apex:column>
        <apex:column headerValue="Inactive Stage" id="multi">
         <apex:inputField style="zoom:75%" value="{!opp.Inactive_Stage__c}"/ >
        
         <apex:outputtext value="Corporate?"></apex:outputtext> <apex:inputField value="{!opp.Handled_From_Coorporate__c}"/> &nbsp; <apex:outputtext value="HQ:?"></apex:outputtext> &nbsp;<apex:inputField style="width:100px" value="{!opp.Headquarters__c}"/> &nbsp;
         <apex:outputtext value="Email?"></apex:outputtext> <apex:inputField value="{!opp.Email_Blast__c}"/> <apex:outputtext value="Locations"></apex:outputtext> &nbsp; <apex:inputField style="width:100px" value="{!opp.Number_of_Locations__c}"/> 
        </apex:column>
      </apex:pageblocktable>
     </apex:pageblocksection> 
    </apex:repeat>
    </apex:outputpanel>
   </apex:pageblocksection>
   
  </apex:pageblock>
 </apex:form> 
 
<style language="css">

.opportunityTab .tertiaryPalette, .individualPalette .opportunityBlock .tertiaryPalette, .layoutEdit .individualPalette .opportunityBlock .tertiaryPalette {
    background-color: #005f93;
    border-color: #005f93;
    width:650px;
   
}    
.opportunityTab .secondaryPalette, .individualPalette .opportunityBlock .secondaryPalette {
    border-color: #005f93;
    
 }    
 
span.bold {
font-weight:bold;
}


</style>  
</div>
</div>
</apex:page>

The other option I considered was creating a visualforce page with multiple pageblock sections however (although it's not pictured in this example), I need each section to display a separate opportunity list, and I could not find a way to do that using this method, but any suggestions are welcomed!
Thank you!!

I have created multiple visualforce pages to go into lightning app builder (I have to do this instead of components because we have many users and are not ready to deploy domain name, so I cannot use lightning components yet). I'd like to expand the apex page to all corners of the alotted space that is given from the app and remove the name of the visualforce page. 

When I inspect the page, I can move the visualforce page where I'd like it to move within the area using .slds-card__body.slds-card__body--inner and modifying the top-margin to -50px, however, it modifies every visualforce page in the app. When I add this class to the code of my visualforce page and modify the margins in the style it doesn't render. It is nested under an <article class> and I'm not sure how to adjust my class in the visualforce page to account for the article, which I believe is why it's not working. Below is a picture of how this looks: 
This is how it looks now:


 
This is how I'd like it to look: 

The other option I considered was creating a visualforce page with multiple pageblock sections however (although it's not pictured in this example), I need each section to display a separate opportunity list, and I could not find a way to do that using this method, but any suggestions are welcomed!
Thank you!!

<apex:page standardController="Opportunity" recordsetvar="opportunities" id="standopp" showHeader="false">

<div class="slds-card__body.slds-card__body--outer">
<div class=".slds-card__header.slds-grid" style="margin-left:-20px; margin-top:-50px;">
 <apex:form title="form" id="form"  style="zoom:75%; height:550px;width:100% showscroll:False">
  <apex:pageblock id="firstpb" title="firstpb">
   <apex:panelgrid columns="4" id="panelg" title="panelg">
    <apex:outputlabel value="view:"/>
     <apex:selectlist value="{!filterId}" id="select1" title="select1" size="1">
     <apex:selectOptions value="{!listviewoptions}"/>
     <apex:actionsupport event="onchange" rerender="oppsection"/>
    </apex:selectlist>
   </apex:panelgrid>
  <apex:pageblockbuttons >
   <apex:commandButton value="Save" action="{!save}"/>
   <apex:commandButton value="Quick Save" action="{!save}"/>
  </apex:pageblockbuttons> 
  
 
   <apex:pageblocksection id="oppsection" showheader="true">
   <apex:outputPanel style="overflow:auto;width:650px;height:250px">
    <apex:repeat value="{!opportunities}" var="opp" id="rep">
     <apex:pageblocksection id="oppsection2" showheader="true" title="{!opp.name} - {!opp.Billing_City_State__c}">
      <apex:pageblocktable id="table"  value="{!opp.name}" title="pbt1" columns="4" var="pbt" style="width:100px">
       <apex:column headerValue="Information" style="width:100px" >
        <apex:inputField style="width:100px" value="{!opp.stageName}"/><br/>
        <apex:inputField style="width:100px" value="{!opp.LeadSource}"/> <br/><br/>
        <apex:inputField style="width:100px" value="{!opp.Priority__c}"/>
       </apex:column>
       <apex:column headerValue="Information"  style="width:100px" >
        <apex:outputtext style="width:100px" styleclass="bold" value="Overview"></apex:outputtext><br/>     
        <apex:inputField style="width:100px" value="{!opp.Company_Overview__c}" /> <br/>
        <apex:outputtext style="width:100px" styleclass="bold" value="Last Activity"></apex:outputtext><br/> 
        <apex:inputField style="width:100px" value="{!opp.Last_Activity_Date__c}" /> <br/>  
        <apex:outputtext style="width:100px" styleclass="bold" value="Next Activity"></apex:outputtext><br/> 
        <apex:outputLink style="width:100px" value="/{!opp.Next_Activity_ID__c}">{!opp.Next_Activity_Due_Date__c}</apex:outputlink> <br/> 
        <apex:outputtext style="width:100px" styleclass="bold" value="FollowUp"></apex:outputtext><br/>
        <apex:inputField style="width:100px" value="{!opp.Follow_Up_Date__c}" />
       </apex:column>
        <apex:column headerValue="Inactive Stage" id="multi">
         <apex:inputField style="zoom:75%" value="{!opp.Inactive_Stage__c}"/ >
        
         <apex:outputtext value="Corporate?"></apex:outputtext> <apex:inputField value="{!opp.Handled_From_Coorporate__c}"/> &nbsp; <apex:outputtext value="HQ:?"></apex:outputtext> &nbsp;<apex:inputField style="width:100px" value="{!opp.Headquarters__c}"/> &nbsp;
         <apex:outputtext value="Email?"></apex:outputtext> <apex:inputField value="{!opp.Email_Blast__c}"/> <apex:outputtext value="Locations"></apex:outputtext> &nbsp; <apex:inputField style="width:100px" value="{!opp.Number_of_Locations__c}"/> 
        </apex:column>
      </apex:pageblocktable>
     </apex:pageblocksection> 
    </apex:repeat>
    </apex:outputpanel>
   </apex:pageblocksection>
   
  </apex:pageblock>
 </apex:form> 
 
<style language="css">

.opportunityTab .tertiaryPalette, .individualPalette .opportunityBlock .tertiaryPalette, .layoutEdit .individualPalette .opportunityBlock .tertiaryPalette {
    background-color: #005f93;
    border-color: #005f93;
    width:650px;
   
}    
.opportunityTab .secondaryPalette, .individualPalette .opportunityBlock .secondaryPalette {
    border-color: #005f93;
    
 }    
 
span.bold {
font-weight:bold;
}


</style>  
</div>
</div>
</apex:page>

I'm trying to create a page that shows three columns each referencing a specified list (that will eventually be customizeable) of opportunities. Basically, I need to assign a specific listview to a pageblocksection. I've attached my code and a screenshot any help would be great!!

<apex:page standardcontroller="opportunity" recordsetvar="opportunities" id="pageopp" >
 <apex:form >
  
   <apex:pageblock title="pageblocktitle">
      <apex:pageblockbuttons >
       <apex:commandButton value="Save" action="{!save}"/>
       <apex:commandButton value="Quick Save" action="{!save}"/>
      </apex:pageblockbuttons> 
      <apex:panelgrid columns="4">
    
     <apex:outputPanel >
      <apex:pageblock title="pageblocktitle1">
       <apex:pageblocksection >
        <apex:repeat value="{!opportunities}" var="opp" id="rep">
       <apex:pageblocksection title="{!opp.name}">
       </apex:pageblocksection> 
        </apex:repeat>
       </apex:pageblocksection>
     </apex:pageblock>
    </apex:outputpanel>
    
    <apex:outputPanel >
      <apex:pageblock title="pageblocktitle1">
       <apex:pageblocksection >
        <apex:repeat value="{!opportunities}" var="opp" id="rep">
       <apex:pageblocksection title="{!opp.name}">
       </apex:pageblocksection> 
        </apex:repeat>
       </apex:pageblocksection>
     </apex:pageblock>
    </apex:outputpanel>
    
      <apex:outputPanel >
      <apex:pageblock title="pageblocktitle1">
       <apex:pageblocksection >
        <apex:repeat value="{!opportunities}" var="opp" id="rep">
       <apex:pageblocksection title="{!opp.name}">
       </apex:pageblocksection> 
        </apex:repeat>
       </apex:pageblocksection>
     </apex:pageblock>
    </apex:outputpanel>
    
    
   </apex:panelgrid>
  </apex:pageblock>
  
 </apex:form>
</apex:page>

In Salesforce Lightning, the highlights panel moves as I scroll down the page, blocking ability to see certain fields. This is only a problem on the opportunity object. Has anybody else had this issue or know a solution?

I'm trying to create a page that shows three columns each referencing a specified list (that will eventually be customizeable) of opportunities. Basically, I need to assign a specific listview to a pageblocksection. I've attached my code and a screenshot any help would be great!!

<apex:page standardcontroller="opportunity" recordsetvar="opportunities" id="pageopp" >
 <apex:form >
  
   <apex:pageblock title="pageblocktitle">
      <apex:pageblockbuttons >
       <apex:commandButton value="Save" action="{!save}"/>
       <apex:commandButton value="Quick Save" action="{!save}"/>
      </apex:pageblockbuttons> 
      <apex:panelgrid columns="4">
    
     <apex:outputPanel >
      <apex:pageblock title="pageblocktitle1">
       <apex:pageblocksection >
        <apex:repeat value="{!opportunities}" var="opp" id="rep">
       <apex:pageblocksection title="{!opp.name}">
       </apex:pageblocksection> 
        </apex:repeat>
       </apex:pageblocksection>
     </apex:pageblock>
    </apex:outputpanel>
    
    <apex:outputPanel >
      <apex:pageblock title="pageblocktitle1">
       <apex:pageblocksection >
        <apex:repeat value="{!opportunities}" var="opp" id="rep">
       <apex:pageblocksection title="{!opp.name}">
       </apex:pageblocksection> 
        </apex:repeat>
       </apex:pageblocksection>
     </apex:pageblock>
    </apex:outputpanel>
    
      <apex:outputPanel >
      <apex:pageblock title="pageblocktitle1">
       <apex:pageblocksection >
        <apex:repeat value="{!opportunities}" var="opp" id="rep">
       <apex:pageblocksection title="{!opp.name}">
       </apex:pageblocksection> 
        </apex:repeat>
       </apex:pageblocksection>
     </apex:pageblock>
    </apex:outputpanel>
    
    
   </apex:panelgrid>
  </apex:pageblock>
  
 </apex:form>
</apex:page>

Hi everyone,

I am not too familiar with coding or anything like this, so I'm having some trouble figuring out how to create an editable data table. We currently use excel spreadsheets for our contract fees, but we want to transition this process into Salesforce.

I think the best way to do this would be to create a Visualforce Page that I can then add to my Page Layout. The table I want to create is a revenue timeline, with the rows being the different type of fees and the columns being each time period (monthly). While the labels in the row are standard, the labels for each column differs depending on when the contract began. It would also be nice to add a final column being the total which is a formula of each row. But for now, I am trying to just create the main body of the data table. Any help would be greatly appreciated!! Thank you so much.