Personalizar o menu de plataformas

A seguir, mostramos como personalizar os nomes e ícones das plataformas no menu. Por exemplo:

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

/*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.

/*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 plataforma
3. Desdobre a seção Todas as plataformas.
4. Acesse a parte CSS personalizado e adicione o código CSS com as alterações:

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:

/*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:

/*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: