# Personalización Plataformas - CSS
A continuación les presentamos ejemplos de código CSS que pueden utilizar para personalizar sus plataformas.
# Personalizar menú de plataformas
A continuación, te mostramos cómo **personalizar los nombres e iconos de las plataformas en el menú**. Por ejemplo:
[](https://docs.redgps.com/uploads/images/gallery/2024-09/image-1727371662572.png)
#### **Personalizar nombres**
Para cambiar el nombre de todas las plataformas, debes implementar un código CSS que defina los nuevos nombres para cada una.
Copia el siguiente código CSS de ejemplo e ingresa los nuevos nombres en donde dice "Aquí va el nuevo nombre para OnTracking", etc.
```CSS
/*Cambio de nombre de las plataformas en el 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: "Aquí va el nuevo nombre para OnTracking";
}
/*OnReports*/
#cnt-platforms > .speech-bubble .tbl-platforms tbody tr td#icon_plat_4 > .name::after {
content: "Aquí va el nuevo nombre para OnReports";
}
/*OnBus*/
#cnt-platforms > .speech-bubble .tbl-platforms tbody tr td#icon_plat_6 > .name::after {
content: "Aquí va el nuevo nombre para OnBus";
}
/*OnDriving*/
#cnt-platforms > .speech-bubble .tbl-platforms tbody tr td#icon_plat_10 > .name::after {
content: "Aquí va el nuevo nombre para OnDriving";
}
/*OnTool*/
#cnt-platforms > .speech-bubble .tbl-platforms tbody tr td#icon_plat_11 > .name::after {
content: "Aquí va el nuevo nombre para OnTool";
}
/*OnRouting*/
#cnt-platforms > .speech-bubble .tbl-platforms tbody tr td#icon_plat_12 > .name::after {
content: "Aquí va el nuevo nombre para OnRouting";
}
/*OnRoad*/
#cnt-platforms > .speech-bubble .tbl-platforms tbody tr td#icon_plat_13 > .name::after {
content: "Aquí va el nuevo nombre 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: "Aquí va el nuevo nombre para OnAlert";
}
/*OnPatrol*/
#cnt-platforms > .speech-bubble .tbl-platforms tbody tr td#icon_plat_17 > .name::after {
content: "Aquí va el nuevo nombre 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: "Aquí va el nuevo nombre para OnDelivery";
}
/*OnNavigate*/
#cnt-platforms > .speech-bubble .tbl-platforms tbody tr td#icon_plat_22 > .name::after {
content: "Aquí va el nuevo nombre para OnNavigate";
}
/*OnStatus*/
#cnt-platforms > .speech-bubble .tbl-platforms tbody tr td#icon_plat_70 > .name::after {
content: "Aquí va el nuevo nombre para OnStatus";
}
/*OnDash*/
#cnt-platforms > .speech-bubble .tbl-platforms tbody tr td#icon_plat_67 > .name::after {
content: "Aquí va el nuevo nombre para OnDash";
}
```
#### **Personalizar iconos**
Para cambiar los iconos de todas las plataformas, utiliza un código CSS en donde especifiques el enlace del nuevo icono.
Copia el siguiente código CSS de ejemplo e ingresa el enlace de la imagen para cada plataforma donde dice "Aquí va el link de la imagen para OnTracking", etc.
```CSS
/*Cambio de icono de las plataformas en el 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("Aquí va el link de la imagen para OnTracking");
}
/*OnReports*/
#cnt-platforms > .speech-bubble .tbl-platforms tbody tr td#icon_plat_4 > .platform-icon > a::after{
background-image: url("Aquí va el link de la imagen para OnReports");
}
/*OnBus*/
#cnt-platforms > .speech-bubble .tbl-platforms tbody tr td#icon_plat_6 > .platform-icon > a::after{
background-image: url("Aquí va el link de la imagen para OnBus");
}
/*OnDriving*/
#cnt-platforms > .speech-bubble .tbl-platforms tbody tr td#icon_plat_10 > .platform-icon > a::after{
background-image: url("Aquí va el link de la imagen para OnDriving");
}
/*OnTool*/
#cnt-platforms > .speech-bubble .tbl-platforms tbody tr td#icon_plat_11 > .platform-icon > a::after{
background-image: url("Aquí va el link de la imagen para OnTool");
}
/*OnRouting*/
#cnt-platforms > .speech-bubble .tbl-platforms tbody tr td#icon_plat_12 > .platform-icon > a::after{
background-image: url("Aquí va el link de la imagen para OnRouting");
}
/*OnRoad*/
#cnt-platforms > .speech-bubble .tbl-platforms tbody tr td#icon_plat_13 > .platform-icon > a::after{
background-image: url("Aquí va el link de la imagen para OnRoad");
}
/*OnWall*/
#cnt-platforms > .speech-bubble .tbl-platforms tbody tr td#icon_plat_15 > .platform-icon > a::after{
background-image: url("Aquí va el link de la imagen para OnWall");
}
/*OnAlert*/
#cnt-platforms > .speech-bubble .tbl-platforms tbody tr td#icon_plat_16 > .platform-icon > a::after{
background-image: url("Aquí va el link de la imagen para OnAlert");
}
/*OnPatrol*/
#cnt-platforms > .speech-bubble .tbl-platforms tbody tr td#icon_plat_17 > .platform-icon > a::after{
background-image: url("Aquí va el link de la imagen para OnPatrol");
}
/*OnDocs*/
#cnt-platforms > .speech-bubble .tbl-platforms tbody tr td#icon_plat_18 > .platform-icon > a::after{
background-image: url("Aquí va el link de la imagen para OnDocs");
}
/*OnDelivery*/
#cnt-platforms > .speech-bubble .tbl-platforms tbody tr td#icon_plat_19 > .platform-icon > a::after{
background-image: url("Aquí va el link de la imagen para OnDelivery");
}
/*OnNavigate*/
#cnt-platforms > .speech-bubble .tbl-platforms tbody tr td#icon_plat_22 > .platform-icon > a::after{
background-image: url("Aquí va el link de la imagen para OnNavigate");
}
/*OnStatus*/
#cnt-platforms > .speech-bubble .tbl-platforms tbody tr td#icon_plat_70 > .platform-icon > a::after{
background-image: url("Aquí va el link de la imagen para OnStatus");
}
/*OnDash*/
#cnt-platforms > .speech-bubble .tbl-platforms tbody tr td#icon_plat_67 > .platform-icon > a::after{
background-image: url("Aquí va el link de la imagen para OnDash");
}
```
#### **¿Dónde aplicar el código CSS?**
Una vez que tengas el código CSS listo, sigue estos pasos:
1. Ingresa a **OnPartners.**
2. Dirígete al módulo **[Personalización de](https://docs.redgps.com/books/onpartners/page/personalizacion-de-plataformas)[ plataformas.](https://docs.redgps.com/books/onpartners/page/personalizacion-de-plataformas)**
3. Despliega la sección **Todas las plataformas.**
4. Ingresa al apartado **CSS personalizado** y agrega el código CSS con los cambios:
[](https://docs.redgps.com/uploads/images/gallery/2024-09/image-1725645132678.png)
#### **¿Necesitas personalizar una sola plataforma?**
Si solo necesitas **cambiar el nombre de una sola plataforma**, puedes utilizar el siguiente código que tiene como **ejemplo la plataforma OnTracking**:
```CSS
/*Cambio de nombre de una sola plataforma en el 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: "Aquí va el nuevo nombre para OnTracking";
}
```
Para el **cambio de icono**, tomando el mismo **ejemplo de la plataforma OnTracking**, utiliza el siguiente código:
```CSS
/*Cambio de icono de una plataforma en el 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("Aquí va el link de la imagen para OnTracking");
}
```
***IMPORTANTE**: Si deseas personalizar algún elemento de otra plataforma, solo tienes que **cambiar en el código el indicador icon\_plat\_2** por el que corresponda a la plataforma deseada de acuerdo a la siguiente tabla:*