---
schema_version: "1"
id: def1ffaa69f63d032c4b6993a1bd2ccb31b61888b4702d7264a979a0da8be46b
title: Override an Existing Page with a Visualforce Page
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/platform/salesforce-pages-developers-guide/guides/pages/quick-start/pages-quick-start-tabs.md
canonical_url: https://developer.salesforce.com/docs/platform/salesforce-pages-developers-guide/guide/pages-quick-start-tabs.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 5590fc92ab79987ccbcad34275f2e29ff0325baeeffb4cd1c20abb209ccc9968
products:
  - Visualforce Developer Guide
  - Platform Developer Content
---

# Override an Existing Page with a Visualforce Page

Replace an existing page, such as a standard record detail page, with a Visualforce page that uses custom tabs to organize the record information into sections.

1.  Create a Visualforce page called `TabbedAccount`.

    ```apex
    <apex:page standardController="Account" showHeader="true" tabStyle="account" >
        <style>
            .activeTab {background-color: #236FBD; color:white; 
                 background-image:none}
            .inactiveTab { background-color: lightgrey; color:black; 
                background-image:none}
        </style>
        <apex:tabPanel switchType="client" selectedTab="tabdetails" 
            id="AccountTabPanel" tabClass="activeTab" 
            inactiveTabClass="inactiveTab">
            <apex:tab label="Details" name="AccDetails" id="tabdetails">
                <apex:detail relatedList="false" title="true"/>
            </apex:tab>
            <apex:tab label="Contacts" name="Contacts" 
                id="tabContact">
                <apex:relatedList subject="{!account}" list="contacts" />
            </apex:tab>
            <apex:tab label="Opportunities" name="Opportunities" 
                id="tabOpp">
                <apex:relatedList subject="{!account}" list="opportunities" />
            </apex:tab>
            <apex:tab label="Open Activities" name="OpenActivities" 
                id="tabOpenAct">
                <apex:relatedList subject="{!account}" list="OpenActivities" />
            </apex:tab>
            <apex:tab label="Notes and Attachments" name="NotesAndAttachments" 
                id="tabNoteAtt">
                <apex:relatedList subject="{!account}" list="CombinedAttachments" />
            </apex:tab>
        </apex:tabPanel>
    </apex:page>
    ```

    -   The `<style>` tag is an HTML element, not a Visualforce component. It defines the CSS classes for two types of tabs: `activeTab` and `inactiveTab`.
    -   The `<apex:tabPanel>` component generates tabs.

        -   Its `tabClass` attribute specifies the CSS class used when a tab is active.
        -   Its `inactiveTabClass` attribute specifies the CSS class used when a tab is inactive.
    -   Each child `<apex:tab>` component within the `<apex:tabPanel>` component represents a tab with different information about the account.

        -   The first tab uses the `<apex:detail>` tag to show the account’s details.
        -   The other tabs use the `<apex:relatedList>` tag to show lists of records related to the account.
2.  To preview the `TabbedAccount` page, specify the ID of a particular account in the URL, for example, https://_MyDomain_login_URL_/apex/TabbedAccount?id=001D000000IRt53.

3.  Override the standard Account detail page with the `TabbedAccount` page.


    1.  From the object management settings for accounts, click **Buttons, Links, and Actions**.

    2.  From the list, find View, which represents the detail page of an account record. To override this page, click **Edit** from the dropdown menu.

    3.  In the Salesforce Classic Override section, select **Visualforce page** as the override type, and then select **TabbedAccount** from the dropdown menu.

    4.  To apply the TabbedAccount page in Lightning Experience or the Salesforce mobile app, select **Use the Salesforce Classic override**.

    5.  Save your changes.

4.  On the Accounts tab, select any account record. The record detail page is now `TabbedAccount`.


**See Also**  


-   [apex:tabPanel](https://developer.salesforce.com/docs/platform/salesforce-pages-developers-guide/components/pages-compref-tabpanel.md)
-   [apex:tab](https://developer.salesforce.com/docs/platform/salesforce-pages-developers-guide/components/pages-compref-tab.md)
-   [*Salesforce Help*: Find Object Management Settings](https://help.salesforce.com/HTViewHelpDoc?id=extend_click_find_objectmgmt_parent.htm)