Launchpad
      Back to home
      1. Accelerator 365 Knowledge Base
      2. Apps
      3. Launchpad

      Custom styles

      How to configure and apply custom styles to the Launchpad app

      The Launchpad app offers default appearance settings as well as advanced styling options using custom CSS. In this article, we will explore the options available to apply custom styles to Launchpad.

      Caution: this feature is an advanced editor action and requires technical knowledge of CSS. Custom CSS outside of the Launchpad app is not supported.

       
      Jump to

      Applying custom styles

      1. As a user with edit permissions to the Launchpad, edit the web part.
      2. At the bottom of the web part property pane, click on Next.
      3. The second page of the web part property pane is where custom styles can be applied for Launchpad. Editors can enter and manage custom CSS in this area with an option to preview and save their changes.

      Samples

      Apply a gradient to the tiles

      Launchpad - Apply a gradient to the tiles

      .acc365-Tile {
          border:0px;
          background: linear-gradient(to right, rgb(255, 131, 0) 0%, rgb(255, 0, 0) 100%);
      }
      .acc365-Tile:nth-child(10n+1) {
          background: linear-gradient(to right, rgb(255, 131, 0) 0%, rgb(255, 119, 3) 100%);
      }

      .acc365-Tile:nth-child(10n+2) {
          background: linear-gradient(to right, rgb(255, 119, 3) 0%, rgb(255, 51, 21) 100%);
      }

      .acc365-Tile:nth-child(10n+3) {
          background: linear-gradient(to right, rgb(255, 51, 21) 0%, rgb(255, 0, 57) 100%);
      }

      .acc365-Tile:nth-child(10n+4) {
          background: linear-gradient(to right, rgb(255, 0, 57) 0%, rgb(255, 0, 161) 100%);
      }

      .acc365-Tile:nth-child(10n+5) {
          background: linear-gradient(to right, rgb(255, 0, 161) 0%, rgb(204, 13, 208) 100%);
      }

       

      Change the shape to round tiles

      Launchpad - Change the shape to round tiles

      .acc365-Tile {
          border-radius: 50%;
          width: 100px;
          height: 100px;
      }

       

      Change 'Customise what you see here' to a button

      Launchpad - Change Customise what you see here to a button

      .acc365-LaunchPadView--customizeLink {
        padding: 10px;
        border-radius: 4px;
        border: 1px solid;
      }

      CSS classes

      The Launchpad app utilises a variety of CSS classes to enable precise customisation of its elements.

      Below is a selection of classes you can use to tailor the appearance and behaviour of specific elements within the app:

      CSS class Description

      acc365-Tile

      		 Base class for individual tiles, setting the overall style such as dimensions, borders, and basic layout.
      acc365-Tile--title Specific styling for the tile title, including font size, colour, and alignment.
      acc365-Tile--icon Manages the appearance of icons within tiles, including size, position, and colour.
      acc365-SearchBar Styles the search bar, managing its border, padding, background colour, and overall layout.
      acc365-LaunchPadView--customizeLink Styles the "Customise what you see here" link, managing appearance, hover effects, and interaction.
      acc365-LaunchPad--seeAllLink Styles the "See all" link, controlling its appearance, hover effects, and position within the header.