# Step 2: Large component elements

> For the complete documentation index, see [llms.txt](https://developers.thoughtspot.com/docs/llms.txt)

Source: https://developers.thoughtspot.com/docs/tutorials/style-customization/step-02

# Step 2: Large component elements

The checkboxes above the code panel provide quick access to the code to customize embedded elements.

1.  Click **Customize Liveboard header** checkbox. You’ll see the following code block in the code editor:
    
    ```javascript
     /* Show or hide the liveboard title and description */
     showLiveboardTitle: true,
     showLiveboardDescription: true,
     // isLiveboardHeaderSticky: false, /* Removes the header stickiness when scrolling if set to false */
     // hideLiveboardHeader: true, /* Hides the entire liveboard header */
    
     /* Customize display of tabs in the liveboard header */
     // hideTabPanel: true, /* Removes the tab panel */
     // visibleTabs:['TabId'], /* Remove all tabs if empty array*/
     // hiddenTabs:['TabId'],
     /* Use either visibleTabs or hiddenTabs */
    ```
    
    If the **Customize Liveboard header** checkbox is unavailable on your instance of ThoughtSpot, check **Full Height** then copy the code above over the `fullHeight: true` section that is added to the Code Editor.
    
    > **NOTE:** The code includes examples of several settings that are commented out using the // line comment. Removing // enables these settings and allows you to include them in your code.
    
2.  Click **Run**. The `LiveboardEmbed` component loads with the new options.
    
3.  Remove `//` before the `hideLiveboardHeader: true` property to enable this setting.
    
4.  Click **Run** again to see the updated results.
    

## Available options for component element customization

There are many more configurations available for each component than those available in the Playground. To see all available options, see [Embed Classes](https://developers.thoughtspot.com/docs/VisualEmbedSdk#_interfaces) and [Embed Interfaces](https://developers.thoughtspot.com/docs/VisualEmbedSdk#_interfaces).

![Components reference](/docs/doc-images/images/tutorials/style-customization/embed-components-reference.png)

To use a setting that is not automatically generated by the Playground, go to its [definition within the reference page](https://developers.thoughtspot.com/docs/Interface_LiveboardViewConfig) and look at the example code.

To override user’s locale settings:

1.  Click [locale](https://developers.thoughtspot.com/docs/Interface_LiveboardViewConfig#_locale).
    
2.  Copy the property into the code in the Playground and specify a valid locale attribute. For example, `fr` or `it`:
    
    ```javascript
     /* We added this one ourselves */
     locale: 'fr',
     /* Show or hide the Liveboard title and description */
     showLiveboardTitle: true,
     showLiveboardDescription: true,
     // isLiveboardHeaderSticky: false, /* Removes the header stickiness when scrolling if set to false */
     // hideLiveboardHeader: true, /* Hides the entire liveboard header */
    
     /* Customize display of tabs in the liveboard header */
     // hideTabPanel: true, /* Removes the tab panel */
     // visibleTabs:['TabId'], /* Remove all tabs if empty array*/
     // hiddenTabs:['TabId'],
     /* Use either visibleTabs or hiddenTabs */
    ```
    
3.  Click **Run** and try some of the items in the menu system when the Liveboard loads.
    
    ![Locale override property](/docs/doc-images/images/tutorials/style-customization/locale-override.png)
    

## Hiding elements without configuration options

If there are elements of the page that you can’t find an option to hide in the embedded interface configuration options, you may need to [use the CSS customization framework to hide a given element]({{navprefix}}/{{style-customization_tutorial-step-03}}#_hide_elements) directly.

If your implementation requires hiding certain elements, let ThoughtSpot know the element for which you need a configuration option by submitting an idea to the [ThoughtSpot Community](https://community.thoughtspot.com/s/ideas).

[← Previous]({{navprefix}}/tutorials/style-customization/step-01) [Next →]({{navprefix}}/tutorials/style-customization/step-03)