Change button layout in custom UI

User Support Hub SDK
1

Hi all, trying to change the layout of the buttons in my custom UI. How do I change the size of the buttons and window itself to make it all nicely fit together?

image

Code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="/SCSS/common.css" />
    <link rel="stylesheet" href="CustomPanel.css" />

    <script type="text/javascript" src="/JS/coherent.js"></script>
    <script type="text/javascript" src="/JS/common.js"></script>
    <script type="text/javascript" src="/JS/dataStorage.js"></script>
    <script type="text/javascript" src="/JS/buttons.js"></script>
    <script type="text/javascript" src="/JS/simvar.js"></script>
    <script type="text/javascript" src="/JS/Services/ToolBarPanels.js"></script>
    <script type="text/javascript" src="/Pages/VCockpit/Instruments/Shared/BaseInstrument.js"></script>

    <link rel="import" href="/templates/NewPushButton/NewPushButton.html" />
    <link rel="import" href="/templates/ToggleButton/toggleButton.html" />
    <link rel="import" href="/templates/tabMenu/tabMenu.html" />
    <link rel="import" href="/templates/ingameUi/ingameUi.html" />
    <link rel="import" href="/templates/ingameUiHeader/ingameUiHeader.html" />
    <link rel="import" href="/templates/NewListButton/NewListButton.html" />

    <script type="text/javascript" src="/JS/debug.js"></script>
    <script type="text/javascript" src="CustomPanel.js"></script>
</head>

<body class="border-box">
    <ingamepanel-custom>
        <ingame-ui id="CustomPanel" panel-id="PANEL_CUSTOM_PANEL" title="" class="ingameUiFrame panelInvisible" content-fit="true" min-width="120" min-height="60">
            <div id="CustomPanelRow" style="background-color: var(--backgroundColorPanel);">
                <table style="width:100%">
                    <tr>
                      <new-push-button id="MSFS_Starter" class="small" title="Launch MSFS starter"></new-push-button>
                    </tr>
                    <tr>
                      <new-push-button id="EasyControls" class="small" title="Launch EasyControls"></new-push-button>
                    </tr>
                    <tr>
                      <new-push-button id="TouchControls" class="small" title="Launch TouchControls"></new-push-button>
                    </tr>
                  </table>
                
            </div>
            <div id="CustomPanelWrap">
                <textarea
                  id="textBuffer"
                  style="background-color: var(--backgroundColorPanel); font-family: RobotoMono-Light; font-size: var(--fontSizeParagraph); width: 100%; height: 100%; color: var(--textColor)"></textarea>
            </div>
            <section id="MainDisplay">
                header
            </section>
            <section id="Footer">
                footer
            </section>
        </ingame-ui>
    </ingamepanel-custom>
</body>
</html>
2

Hi,

You need look at the CSS stylesheet and change the class in the HTML file to match what is in the CSS Stylesheet.

But it is not easy to find the CSS stylesheet. Using the Coherent GT Debugger in the MSFS SDK I found the stylesheet called “NewPushButton.css”

Since you are including “/templates/NewPushButton/NewPushButton.html” in your code, the NewPushButton.html file is referencing NewPushButton.css.

If you look at the contents of the CSS file youwill see for the “new-push-button” tag there are many classes like “small”. They look like “new-push-button.small {…”

The ones you can use are:
small (used in you example)
verysmall
big
Square
SmallSquare

Here’s what it looks like:

image
image883Ă—572 17.5 KB

2 Likes
3

An old post, but a relevant q:

Any idea how to center the text within those buttons?

Thanks!