# Personalização Plataforma - CSS
A seguir, apresentamos exemplos de código CSS que você pode usar para personalizar suas plataformas
# Personalizar o menu de plataformas
A seguir, mostramos como **personalizar os nomes e ícones das plataformas no menu.** Por exemplo:
[](https://docs.redgps.com/uploads/images/gallery/2024-09/image-1727371662572.png)
#####
##### **Personalizar nomes**
Para mudar o nome de todas as plataformas, você deve implementar um código CSS que defina os novos nomes para cada uma.
Copie o seguinte código CSS de exemplo e insira os novos nomes onde diz "Aqui vai o novo nome para OnTracking", etc...
```CSS
/*Mudança de nome das plataformas no menu.*/
#cnt-platforms > .speech-bubble .tbl-platforms tbody tr td > .name {
position: relative;
}
#cnt-platforms > .speech-bubble .tbl-platforms tbody tr td > .name::after {
position: absolute;
background: var(--white);
left: 0;
right: 0;
}
#cnt-platforms > .speech-bubble .tbl-platforms tbody tr td > .name.checked img {
z-index: 4;
position: absolute;
width: 15px;
height: 15px;
border-radius: 20px;
left: 0;
top: 3px;
background-color: var(--white);
}
/*OnTracking*/
#cnt-platforms > .speech-bubble .tbl-platforms tbody tr td#icon_plat_2 > .name::after {
content: "Aqui vai o novo nome para OnTracking";
}
/*OnReports*/
#cnt-platforms > .speech-bubble .tbl-platforms tbody tr td#icon_plat_4 > .name::after {
content: "Aqui vai o novo nome para OnReports";
}
/*OnBus*/
#cnt-platforms > .speech-bubble .tbl-platforms tbody tr td#icon_plat_6 > .name::after {
content: "Aqui vai o novo nome para OnBus";
}
/*OnDriving*/
#cnt-platforms > .speech-bubble .tbl-platforms tbody tr td#icon_plat_10 > .name::after {
content: "Aqui vai o novo nome para OnDriving";
}
/*OnTool*/
#cnt-platforms > .speech-bubble .tbl-platforms tbody tr td#icon_plat_11 > .name::after {
content: "Aqui vai o novo nome para OnTool";
}
/*OnRouting*/
#cnt-platforms > .speech-bubble .tbl-platforms tbody tr td#icon_plat_12 > .name::after {
content: "Aqui vai o novo nome para OnRouting";
}
/*OnRoad*/
#cnt-platforms > .speech-bubble .tbl-platforms tbody tr td#icon_plat_13 > .name::after {
content: "Aqui vai o novo nome para OnRoad";
}
/*OnWall*/
#cnt-platforms > .speech-bubble .tbl-platforms tbody tr td#icon_plat_15 > .name::after {
content: "OnWall";
}
/*OnAlert*/
#cnt-platforms > .speech-bubble .tbl-platforms tbody tr td#icon_plat_16 > .name::after {
content: "Aqui vai o novo nome para OnAlert";
}
/*OnPatrol*/
#cnt-platforms > .speech-bubble .tbl-platforms tbody tr td#icon_plat_17 > .name::after {
content: "Aqui vai o novo nome para OnPatrol.";
}
/*OnDocs*/
#cnt-platforms > .speech-bubble .tbl-platforms tbody tr td#icon_plat_18 > .name::after {
content: "Aquí va el nuevo nombre para OnDocs";
}
/*OnDelivery*/
#cnt-platforms > .speech-bubble .tbl-platforms tbody tr td#icon_plat_19 > .name::after {
content: "Aqui vai o novo nome para OnDelivery.";
}
/*OnNavigate*/
#cnt-platforms > .speech-bubble .tbl-platforms tbody tr td#icon_plat_22 > .name::after {
content: "Aqui vai o novo nome para OnNavigate";
}
/*OnStatus*/
#cnt-platforms > .speech-bubble .tbl-platforms tbody tr td#icon_plat_70 > .name::after {
content: "Aqui vai o novo nome para OnStatus";
}
/*OnDash*/
#cnt-platforms > .speech-bubble .tbl-platforms tbody tr td#icon_plat_67 > .name::after {
content: "Aqui vai o novo nome para OnDash";
}
```
##### **Personalizar ícones**
Para mudar os ícones de todas as plataformas, utilize um código CSS onde você especifique o link do novo ícone.
Copie o seguinte código CSS de exemplo e insira o link da imagem para cada plataforma onde diz "Aqui vai o link da imagem para OnTracking", etc.
```CSS
/*Mudança de ícone das plataformas no menu.*/
#cnt-platforms > .speech-bubble .tbl-platforms tbody tr td > .platform-icon > a > img {
display: none !important;
}
#cnt-platforms > .speech-bubble .tbl-platforms tbody tr td > .platform-icon > a::after {
content: "";
display: block;
margin: 0 auto;
width: 50px;
height: 50px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
/*OnTracking*/
#cnt-platforms > .speech-bubble .tbl-platforms tbody tr td#icon_plat_2 > .platform-icon > a::after{
background-image: url("Aqui vai o link da imagem para OnTracking");
}
/*OnReports*/
#cnt-platforms > .speech-bubble .tbl-platforms tbody tr td#icon_plat_4 > .platform-icon > a::after{
background-image: url("Aqui vai o link da imagem para OnReports");
}
/*OnBus*/
#cnt-platforms > .speech-bubble .tbl-platforms tbody tr td#icon_plat_6 > .platform-icon > a::after{
background-image: url("Aqui vai o link da imagem para OnBus.");
}
/*OnDriving*/
#cnt-platforms > .speech-bubble .tbl-platforms tbody tr td#icon_plat_10 > .platform-icon > a::after{
background-image: url("Aqui vai o link da imagem para OnDriving.");
}
/*OnTool*/
#cnt-platforms > .speech-bubble .tbl-platforms tbody tr td#icon_plat_11 > .platform-icon > a::after{
background-image: url("Aqui vai o link da imagem para OnTool.");
}
/*OnRouting*/
#cnt-platforms > .speech-bubble .tbl-platforms tbody tr td#icon_plat_12 > .platform-icon > a::after{
background-image: url("Aqui vai o link da imagem para OnRouting.");
}
/*OnRoad*/
#cnt-platforms > .speech-bubble .tbl-platforms tbody tr td#icon_plat_13 > .platform-icon > a::after{
background-image: url("Aqui vai o link da imagem para OnRoad.");
}
/*OnWall*/
#cnt-platforms > .speech-bubble .tbl-platforms tbody tr td#icon_plat_15 > .platform-icon > a::after{
background-image: url("Aqui vai o link da imagem para OnWall");
}
/*OnAlert*/
#cnt-platforms > .speech-bubble .tbl-platforms tbody tr td#icon_plat_16 > .platform-icon > a::after{
background-image: url("Aqui vai o link da imagem para OnAlert");
}
/*OnPatrol*/
#cnt-platforms > .speech-bubble .tbl-platforms tbody tr td#icon_plat_17 > .platform-icon > a::after{
background-image: url("Aqui vai o link da imagem para OnPatrol");
}
/*OnDocs*/
#cnt-platforms > .speech-bubble .tbl-platforms tbody tr td#icon_plat_18 > .platform-icon > a::after{
background-image: url("Aqui vai o link da imagem para OnDocs");
}
/*OnDelivery*/
#cnt-platforms > .speech-bubble .tbl-platforms tbody tr td#icon_plat_19 > .platform-icon > a::after{
background-image: url("Aqui vai o link da imagem para OnDelivery.");
}
/*OnNavigate*/
#cnt-platforms > .speech-bubble .tbl-platforms tbody tr td#icon_plat_22 > .platform-icon > a::after{
background-image: url("Aqui vai o link da imagem para OnNavigate");
}
/*OnStatus*/
#cnt-platforms > .speech-bubble .tbl-platforms tbody tr td#icon_plat_70 > .platform-icon > a::after{
background-image: url("Aqui vai o link da imagem para OnStatus");
}
/*OnDash*/
#cnt-platforms > .speech-bubble .tbl-platforms tbody tr td#icon_plat_67 > .platform-icon > a::after{
background-image: url("Aqui vai o link da imagem para OnDash");
}
```
##### **Onde aplicamos o código CSS?**
Uma vez que tenha o código CSS pronto, siga estes passos:
1. Acesse o **OnPartners**.
2. Dirija-se ao módulo **[Personalización de](https://docs.redgps.com/books/onpartners/page/personalizacion-de-plataformas)[ plataforma](https://docs.redgps.com/books/onpartners/page/personalizacion-de-plataformas)**
3. Desdobre a seção **Todas as plataformas.**
4. Acesse a parte **CSS personalizado** e adicione o código CSS com as alterações:
[](https://docs.redgps.com/uploads/images/gallery/2024-10/ccs1.png)
#####
##### **Você precisa personalizar uma única plataforma?**
Se você só precisa **mudar o nome de uma única plataforma**, pode usar o seguinte código, que tem como **exemplo a plataforma OnTracking:**
```CSS
/*Mudança de nome de uma única plataforma no menu - OnTracking.*/
#cnt-platforms > .speech-bubble .tbl-platforms tbody tr td#icon_plat_2 > .name {
position: relative;
}
#cnt-platforms > .speech-bubble .tbl-platforms tbody tr td#icon_plat_2 > .name::after {
position: absolute;
background: var(--white);
left: 0;
right: 0;
}
#cnt-platforms > .speech-bubble .tbl-platforms tbody tr td#icon_plat_2 > .name.checked img {
z-index: 4;
position: absolute;
width: 15px;
height: 15px;
border-radius: 20px;
left: 0;
top: 3px;
background-color: var(--white);
}
/*OnTracking*/
#cnt-platforms > .speech-bubble .tbl-platforms tbody tr td#icon_plat_2 > .name::after {
content: "Aqui vai o novo nome para OnTracking.";
}
```
Para a **mudança de ícone**, utilizando o mesmo **exemplo da plataforma OnTracking**, use o seguinte código:
```CSS
/*Mudança de ícone de uma plataforma no menu - OnTracking.*/
#cnt-platforms > .speech-bubble .tbl-platforms tbody tr td#icon_plat_2 > .platform-icon > a > img {
display: none !important;
}
#cnt-platforms > .speech-bubble .tbl-platforms tbody tr td#icon_plat_2 > .platform-icon > a::after {
content: "";
display: block;
margin: 0 auto;
width: 50px;
height: 50px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
/*OnTracking*/
#cnt-platforms > .speech-bubble .tbl-platforms tbody tr td#icon_plat_2 > .platform-icon > a::after{
background-image: url("Aqui vai o link da imagem para OnTracking.");
}
```
***IMPORTANTE**: Se você deseja personalizar algum elemento de outra plataforma, basta **trocar no código o indicador icon\_plat\_2** pelo que corresponder à plataforma desejada de acordo com a seguinte tabela:*