---
title: Custom styles (Launchpad)
description: How to configure and apply custom styles to the Launchpad app
---

[Skip to content](https://support.accelerator365.com/en/launchpad-custom-styles#main-content)

[![Accelerator 365 Logo (Colour + No Text)](https://support.accelerator365.com/hs-fs/hubfs/Accelerator%20Logos/Accelerator%20365%20Logo%20(Colour%20+%20No%20Text).png?width=100&height=47&name=Accelerator%20365%20Logo%20(Colour%20+%20No%20Text).png)](https://support.accelerator365.com/?hsLang=en)

- [Home](https://support.accelerator365.com/en)
- [Getting started guides](https://support.accelerator365.com/en/getting-started)
- Product support
  
  Show submenu for Product support

    - [Apps](https://support.accelerator365.com/en/apps)
    - [Solutions](https://support.accelerator365.com/en/solutions)
- [Look Book support](https://support.accelerator365.com/en/look-book)
- [Pricing support](https://support.accelerator365.com/en/pricing)
- [Technical support](https://support.accelerator365.com/en/technical)
- [Accelerator 365 website](https://accelerator365.com/)

Open main navigation

Close main navigation

- [Home](https://support.accelerator365.com/en)
- [Getting started guides](https://support.accelerator365.com/en/getting-started)
- Product support
  
  Show submenu for Product support

    - [Apps](https://support.accelerator365.com/en/apps)
    - [Solutions](https://support.accelerator365.com/en/solutions)
- [Look Book support](https://support.accelerator365.com/en/look-book)
- [Pricing support](https://support.accelerator365.com/en/pricing)
- [Technical support](https://support.accelerator365.com/en/technical)
- [Accelerator 365 website](https://accelerator365.com/)
- [Contact us](https://accelerator365.com/pages/contact)

[Contact us](https://accelerator365.com/pages/contact)

 Hello, how can we help you?

- There are no suggestions because the search field is empty.

1. [Accelerator 365 Knowledge Base](https://support.accelerator365.com/en?hsLang=en)
2. [Apps](https://support.accelerator365.com/en/apps?hsLang=en)
3. [Launchpad](https://support.accelerator365.com/en/apps?hsLang=en#launchpad)

# Custom styles (Launchpad)

## 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**](https://support.accelerator365.com/en/launchpad-custom-styles#applying-custom-styles)
- [**Samples**](https://support.accelerator365.com/en/launchpad-custom-styles#samples)
- [**CSS classes**](https://support.accelerator365.com/en/launchpad-custom-styles#css-classes)<https://support.accelerator365.com/en/launchpad-custom-styles#samples>

---

### 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](https://support.accelerator365.com/hs-fs/hubfs/Launchpad%20-%20Apply%20a%20gradient%20to%20the%20tiles.png?width=670&height=147&name=Launchpad%20-%20Apply%20a%20gradient%20to%20the%20tiles.png)

```
.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](https://support.accelerator365.com/hs-fs/hubfs/Launchpad%20-%20Change%20the%20shape%20to%20round%20tiles.png?width=670&height=158&name=Launchpad%20-%20Change%20the%20shape%20to%20round%20tiles.png)

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

#### Colour tiles based on the link category

![](https://support.accelerator365.com/hs-fs/hubfs/image-png-Aug-22-2025-08-36-18-7055-AM.png?width=308&height=295&name=image-png-Aug-22-2025-08-36-18-7055-AM.png)

```
.acc365-Tile[data-categories~="1"]{background-color:#6aa9a7 !important; border:none}.acc365-Tile[data-categories~="2"]{background-color:#8a4f9d !important; border:none}.acc365-Tile[data-categories~="3"]{background-color:#495d8a !important; border:none}
```

 

#### Present links in a list layout

![](https://support.accelerator365.com/hs-fs/hubfs/image-png-Jul-22-2025-09-26-16-7982-AM.png?width=199&height=312&name=image-png-Jul-22-2025-09-26-16-7982-AM.png)

```
.acc365-StaticTilesGrid {  display: flex;  flex-direction: column;}.acc365-Tile {  width: 100% !important;  height: auto !important;  min-height: auto;  background: inherit;  border: none;}.acc365-Tile:hover {  background: var(--colorNeutralForeground4);}.acc365-Tile--link {  display: flex;  justify-content: start;  align-items: center;  padding: 16px;  margin: 0;  gap: 16px;}.acc365-Tile--image {  min-height: auto;  width: 30px;  padding: 0;  margin: 0;  color: var(--colorNeutralForeground1);} .acc365-Tile--text {  min-height: auto;  padding: 0;  margin: 0;} .acc365-Tile--text .acc365-Tile--title {  color: var(--colorNeutralForeground1);}
```

 

#### Change 'Customise what you see here' to a button

![Launchpad - Change Customise what you see here to a button](https://support.accelerator365.com/hs-fs/hubfs/Launchpad%20-%20Change%20Customise%20what%20you%20see%20here%20to%20a%20button.png?width=670&height=166&name=Launchpad%20-%20Change%20Customise%20what%20you%20see%20here%20to%20a%20button.png)

```
.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. |

- [Getting started](https://support.accelerator365.com/en/getting-started?hsLang=en)
- [Apps](https://support.accelerator365.com/en/apps?hsLang=en#main-content)

    - [Accordion](https://support.accelerator365.com/en/apps?hsLang=en#accordion)
    - [Advent Calendar](https://support.accelerator365.com/en/apps?hsLang=en#advent-calendar)
    - [Alerts](https://support.accelerator365.com/en/apps?hsLang=en#alerts)
    - [Anniversaries](https://support.accelerator365.com/en/apps?hsLang=en#anniversaries)
    - [Audience Subscription](https://support.accelerator365.com/en/apps?hsLang=en#audience-subscription)
    - [Back to Top](https://support.accelerator365.com/en/apps?hsLang=en#back-to-top)
    - [Before and After](https://support.accelerator365.com/en/apps?hsLang=en#before-and-after)
    - [Carousel](https://support.accelerator365.com/en/apps?hsLang=en#carousel)
    - [Countdown Calendar](https://support.accelerator365.com/en/apps?hsLang=en#countdown-calendar)
    - [FAQ](https://support.accelerator365.com/en/apps?hsLang=en#faq)
    - [Gauge](https://support.accelerator365.com/en/apps?hsLang=en#gauge)
    - [Glossary](https://support.accelerator365.com/en/apps?hsLang=en#glossary)
    - [Image Map](https://support.accelerator365.com/en/apps?hsLang=en#image-map)
    - [Launchpad](https://support.accelerator365.com/en/apps?hsLang=en#launchpad)
    - [My Calendar](https://support.accelerator365.com/en/apps?hsLang=en#my-calendar)
    - [My Contacts](https://support.accelerator365.com/en/apps?hsLang=en#my-contacts)
    - [My Emails](https://support.accelerator365.com/en/apps?hsLang=en#my-emails)
    - [Noticeboard](https://support.accelerator365.com/en/apps?hsLang=en#noticeboard)
    - [Page Authors](https://support.accelerator365.com/en/apps?hsLang=en#page-authors)
    - [Page Breadcrumbs](https://support.accelerator365.com/en/apps?hsLang=en#page-breadcrumbs)
    - [Page Feedback](https://support.accelerator365.com/en/apps?hsLang=en#page-feedback)
    - [Page Tags](https://support.accelerator365.com/en/apps?hsLang=en#page-tags)
    - [Page Tour](https://support.accelerator365.com/en/apps?hsLang=en#page-tour)
    - [Pages Directory](https://support.accelerator365.com/en/apps?hsLang=en#pages-directory)
    - [People Directory](https://support.accelerator365.com/en/apps?hsLang=en#people-directory)
    - [Poll](https://support.accelerator365.com/en/apps?hsLang=en#poll)
    - [Rate My Day](https://support.accelerator365.com/en/apps?hsLang=en#rate-my-day)
    - [Section Search](https://support.accelerator365.com/en/apps?hsLang=en#section-search)
    - [Site Analytics](https://support.accelerator365.com/en/apps?hsLang=en#site-analytics)
    - [Spotlight](https://support.accelerator365.com/en/apps?hsLang=en#spotlight)
    - [Stock Price](https://support.accelerator365.com/en/apps?hsLang=en#stock-price)
    - [Subscribe Now](https://support.accelerator365.com/en/apps?hsLang=en#subscribe-now)
    - [Table of Contents](https://support.accelerator365.com/en/apps?hsLang=en#table-of-contents)
    - [Tabs](https://support.accelerator365.com/en/apps?hsLang=en#tabs)
    - [User Profile](https://support.accelerator365.com/en/apps?hsLang=en#user-profile)
    - [Welcome](https://support.accelerator365.com/en/apps?hsLang=en#welcome)
- [Solutions](https://support.accelerator365.com/en/solutions?hsLang=en#main-content)

    - [Content Manager Dashboard](https://support.accelerator365.com/en/solutions?hsLang=en#content-manager-dashboard)
    - [Translator for SharePoint](https://support.accelerator365.com/en/solutions?hsLang=en#translator-for-sharepoint)
- [Look Book](https://support.accelerator365.com/en/look-book?hsLang=en)
- [Pricing](https://support.accelerator365.com/en/pricing?hsLang=en)
- [Technical](https://support.accelerator365.com/en/technical?hsLang=en#main-content)

    - [General](https://support.accelerator365.com/en/technical?hsLang=en#general)
    - [Maintenance](https://support.accelerator365.com/en/technical?hsLang=en#maintenance)
    - [Troubleshooting](https://support.accelerator365.com/en/technical?hsLang=en#troubleshooting)

- [About](https://accelerator365.com/pages/about-us)
- [Blogs](https://accelerator365.com/blogs/updates)
- [Reply](https://www.reply.com/en)
- [Partners](https://accelerator365.com/pages/find-a-partner)
- [Contact](https://accelerator365.com/pages/contact)
- [License Agreement](https://accelerator365.com/pages/license-agreement)
- [Privacy Policy](https://www.reply.com/en/privacy-policy)
- [Service Level Agreement](https://accelerator365.com/pages/service-level-agreement)

[![Accelerator 365 logo](https://support.accelerator365.com/hs-fs/hubfs/Accelerator%20Logos/Accelerator%20365%20Logo%20(Colour%20+%20No%20Text).png?width=60&height=29&name=Accelerator%20365%20Logo%20(Colour%20+%20No%20Text).png "Accelerator 365 logo")](https://accelerator365.com/)

<https://accelerator365.com/> <https://www.youtube.com/channel/UCMVaIadJ7JwrUrusv_y64Fw/featured> <https://www.linkedin.com/company/accelerator365/>

Accelerator 365 by Reply