Personalizar menú de plataformas

A continuación te mostramos cómo personalizar los nombres e iconos de las plataformas del siguiente menú:

 

Personalizar nombres

Si necesitas cambiar el nombre de las plataformas, es necesario implementar un código CSS en donde definas los nombres que necesitas para cada plataforma.

Copia el siguiente código CSS de ejemplo e ingresa los nuevos nombres en donde dice "Aquí va el nuevo nombre para OnTracking", etc...

/*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 img {
  position: relative;
  z-index: 1;
  top: -2px;
}

#cnt-platforms > .speech-bubble .tbl-platforms tbody tr td > .name::after {
  position: absolute;
  background: var(--white);
  left: 0;
  right: 0;
}

/*OnTracking*/
#cnt-platforms > .speech-bubble .tbl-platforms tbody tr td.cliente > .name::after {
  content: "Aquí va el nuevo nombre para OnTracking";
}
/*OnReports*/
#cnt-platforms > .speech-bubble .tbl-platforms tbody tr td.reportes > .name::after {
  content: "Aquí va el nuevo nombre para OnReports";
}
/*OnBus*/
#cnt-platforms > .speech-bubble .tbl-platforms tbody tr td.onbus > .name::after {
  content: "Aquí va el nuevo nombre para OnBus";
}
/*OnDriving*/
#cnt-platforms > .speech-bubble .tbl-platforms tbody tr td.ondriving > .name::after {
  content: "Aquí va el nuevo nombre para OnDriving";
}
/*OnTool*/
#cnt-platforms > .speech-bubble .tbl-platforms tbody tr td.mantenimientos > .name::after {
  content: "Aquí va el nuevo nombre para OnTool";
}
/*OnRouting*/
#cnt-platforms > .speech-bubble .tbl-platforms tbody tr td.ruteo > .name::after {
  content: "Aquí va el nuevo nombre para OnRouting";
}
/*OnRoad*/
#cnt-platforms > .speech-bubble .tbl-platforms tbody tr td.ruteo_libre > .name::after {
  content: "Aquí va el nuevo nombre para OnRoad";
}
/*OnWall*/
#cnt-platforms > .speech-bubble .tbl-platforms tbody tr td.seguimiento > .name::after {
  content: "Aquí va el nuevo nombre para OnWall";
}
/*OnAlert*/
#cnt-platforms > .speech-bubble .tbl-platforms tbody tr td.monitoreo > .name::after {
  content: "Aquí va el nuevo nombre para OnAlert";
}
/*OnPatrol*/
#cnt-platforms > .speech-bubble .tbl-platforms tbody tr td.onpatrol > .name::after {
  content: "Aquí va el nuevo nombre para OnPatrol";
}
/*OnDocs*/
#cnt-platforms > .speech-bubble .tbl-platforms tbody tr td[class="gestión_de_flota "]  > .name::after {
  content: "Aquí va el nuevo nombre para OnDocs";
}
/*OnDelivery*/
#cnt-platforms > .speech-bubble .tbl-platforms tbody tr td.ondelivery  > .name::after {
  content: "Aquí va el nuevo nombre para OnDelivery";
}
/*OnNavigate*/
#cnt-platforms > .speech-bubble .tbl-platforms tbody tr td.onnavigate   > .name::after {
  content: "Aquí va el nuevo nombre para OnNavigate";
}
/*OnStatus*/
#cnt-platforms > .speech-bubble .tbl-platforms tbody tr td.onstatus  > .name::after {
  content: "Aquí va el nuevo nombre para OnStatus";
}

 

Personalizar iconos

Para cambiar los iconos de las plataformas en el menú, es necesario implementar un código CSS en donde ingreses el link de los iconos que necesitas para cada plataforma.

Copia el siguiente código CSS de ejemplo e ingresa el link de la imagen del icono que tendrá cada plataforma en donde dice "Aquí va el link de la imagen para OnTracking", etc...

/*Cambiar imagen de las plataformas en el menu de Plataformas*/

body#plataforma-mapa #topnavbar .navbar-inner #main_menu_container #base-platform-menu #cnt-platforms .speech-bubble .tbl-platforms tbody tr td .platform-icon a {
  position: relative;
}
body#plataforma-mapa #topnavbar .navbar-inner #main_menu_container #base-platform-menu #cnt-platforms .speech-bubble .tbl-platforms tbody tr td .platform-icon a img {
  opacity: 0;
}
body#plataforma-mapa #topnavbar .navbar-inner #main_menu_container #base-platform-menu #cnt-platforms .speech-bubble .tbl-platforms tbody tr td .platform-icon a::after {
  content: "";
  width: 50px;
  height: 50px;
  background-position: center;
  background-size: cover;
  position: absolute;
  top: 5px;
  left: calc(50% - 25px);
}
/*OnTracking*/
body#plataforma-mapa #topnavbar .navbar-inner #main_menu_container #base-platform-menu #cnt-platforms .speech-bubble .tbl-platforms tbody tr td.ontracking .platform-icon a::after {
  background-image: url("Aquí va el link de la imagen para OnTracking");
}
/*reportes*/
body#plataforma-mapa #topnavbar .navbar-inner #main_menu_container #base-platform-menu #cnt-platforms .speech-bubble .tbl-platforms tbody tr td.reportes .platform-icon a::after {
  background-image: url("Aquí va el link de la imagen para OnReports");
}
/*onbus*/
body#plataforma-mapa #topnavbar .navbar-inner #main_menu_container #base-platform-menu #cnt-platforms .speech-bubble .tbl-platforms tbody tr td.onbus .platform-icon a::after {
  background-image: url("Aquí va el link de la imagen para OnBus");
}
/*ondriving*/
body#plataforma-mapa #topnavbar .navbar-inner #main_menu_container #base-platform-menu #cnt-platforms .speech-bubble .tbl-platforms tbody tr td.ondriving .platform-icon a::after {
  background-image: url("Aquí va el link de la imagen para OnDriving");
}
/*ontool*/
body#plataforma-mapa #topnavbar .navbar-inner #main_menu_container #base-platform-menu #cnt-platforms .speech-bubble .tbl-platforms tbody tr td.ontool .platform-icon a::after {
  background-image: url("Aquí va el link de la imagen para OnTool");
}
/*onrouting*/
body#plataforma-mapa #topnavbar .navbar-inner #main_menu_container #base-platform-menu #cnt-platforms .speech-bubble .tbl-platforms tbody tr td.onrouting .platform-icon a::after {
  background-image: url("Aquí va el link de la imagen para OnRouting");
}
/*onroad*/
body#plataforma-mapa #topnavbar .navbar-inner #main_menu_container #base-platform-menu #cnt-platforms .speech-bubble .tbl-platforms tbody tr td.onroad .platform-icon a::after {
  background-image: url("Aquí va el link de la imagen para OnRoad");
}
/*onwall*/
body#plataforma-mapa #topnavbar .navbar-inner #main_menu_container #base-platform-menu #cnt-platforms .speech-bubble .tbl-platforms tbody tr td.onwall .platform-icon a::after {
  background-image: url("Aquí va el link de la imagen para OnWall");
}
/*onalert*/
body#plataforma-mapa #topnavbar .navbar-inner #main_menu_container #base-platform-menu #cnt-platforms .speech-bubble .tbl-platforms tbody tr td.onalert .platform-icon a::after {
  background-image: url("Aquí va el link de la imagen para OnAlert");
}
/*onpatrol*/
body#plataforma-mapa #topnavbar .navbar-inner #main_menu_container #base-platform-menu #cnt-platforms .speech-bubble .tbl-platforms tbody tr td.onpatrol .platform-icon a::after {
  background-image: url("Aquí va el link de la imagen para OnPatrol");
}
/*ondocs*/
body#plataforma-mapa #topnavbar .navbar-inner #main_menu_container #base-platform-menu #cnt-platforms .speech-bubble .tbl-platforms tbody tr td.ondocs .platform-icon a::after {
  background-image: url("Aquí va el link de la imagen para OnDocs");
}
/*ondelivery*/
body#plataforma-mapa #topnavbar .navbar-inner #main_menu_container #base-platform-menu #cnt-platforms .speech-bubble .tbl-platforms tbody tr td.ondelivery .platform-icon a::after {
  background-image: url("Aquí va el link de la imagen para OnDelivery");
}

 

¿Dónde aplicamos el código CSS?

Una vez que ya tenemos el código CSS con las variables necesarias, ingresamos a OnPartners y nos dirigimos al módulo Personalización de plataformas, desplegamos la sección Todas las plataformas e ingresamos al apartado Css personalizado:

Se debe agregar el código CSS editado con los cambios necesarios para cambiar los nombres y/o los iconos de cada plataforma para que puedan verse reflejados en el menú.