{"id":761,"date":"2021-05-10T21:56:35","date_gmt":"2021-05-11T00:56:35","guid":{"rendered":"https:\/\/nextflow.com.br\/?p=761"},"modified":"2024-07-08T22:48:53","modified_gmt":"2024-07-09T01:48:53","slug":"como-mudar-o-visual-do-glpi-com-o-plugin-trademark","status":"publish","type":"post","link":"https:\/\/nextflow.com.br\/index.php\/2021\/05\/10\/como-mudar-o-visual-do-glpi-com-o-plugin-trademark\/","title":{"rendered":"Como mudar o visual do GLPI com o plugin Trademark"},"content":{"rendered":"\n<p>Fala galera, tudo bem?&nbsp;<\/p>\n\n\n\n<p>Esse post \u00e9 destinado para quem j\u00e1 conhece o&nbsp;<a href=\"https:\/\/www.profissionaisti.com.br\/tudo-sobre-inventario-e-gestao-de-ti-com-glpi\/\" target=\"_blank\" rel=\"noreferrer noopener\">sistema GLPI<\/a>&nbsp;e seus benef\u00edcios, mas est\u00e1 buscando dar um&nbsp;<em>UP<\/em>&nbsp;no&nbsp;visual do sistema!<\/p>\n\n\n\n<p>Com a crescente evolu\u00e7\u00e3o para melhoria de processos internos e indicadores de servi\u00e7os,&nbsp;a utiliza\u00e7\u00e3o do GLPI j\u00e1 ultrapassou a fronteira das \u00e1reas de Help Desk e Gest\u00e3o de Ativos de TI,&nbsp;sendo estendido para outros departamentos como RH, Setor de Compras, Comercial, Setor Administrativo, etc. Em conjunto com a expans\u00e3o, \u00e9 comum&nbsp;surgir a necessidade de&nbsp;alterar a identidade visual do sistema como um todo, incluindo a nossa logomarca, paleta de cores internas e altera\u00e7\u00f5es na p\u00e1gina de login, o que n\u00e3o \u00e9 uma tarefa f\u00e1cil para quem n\u00e3o tem conhecimento com desenvolvimento.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Plugin Modifications<\/h3>\n\n\n\n<p>Grande parte da comunidade que j\u00e1 utiliza o GLPI, com certeza j\u00e1 precisou efetuar algumas customiza\u00e7\u00f5es no sentido de melhorar a&nbsp;apar\u00eancia do sistema. Sem \u00f3bices em fazer propaganda, um dos plugins mais utilizados para essa finalidade \u00e9 o&nbsp;\u201c<a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/stdonato\/glpi-modifications\/\" target=\"_blank\">Modifications<\/a>\u201c, desenvolvido pelo grande Stevenes Donato, que tem um n\u00famero expressivo de mais de 27 mil downloads (at\u00e9 o momento desse artigo). O plugin pode ser&nbsp;obtido&nbsp;por meio do&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/plugins.glpi-project.org\/#\/plugin\/modifications\" target=\"_blank\">cat\u00e1logo oficial do GLPI<\/a>&nbsp;ou em seu projeto&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/stdonato\/glpi-modifications\/\" target=\"_blank\">oficial no github<\/a>. Contudo, o Modifications, apesar de pr\u00e1tico, limita-se a uma p\u00e1gina de login \u00fanica e, ainda assim, se faz necess\u00e1rio alguns tipos de customiza\u00e7\u00f5es no c\u00f3digo oficial do projeto.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>IMPORTANTE: O Plugin Modifications foi descontinuado e n\u00e3o ser\u00e1 compativel com o GLPI 10 (https:\/\/github.com\/stdonato\/glpi-modifications)<\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\">Plugin Branding<\/h3>\n\n\n\n<p>Para quem tem a&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/glpi-project.org\/pt-br\/subscriptions\/\" target=\"_blank\">subscri\u00e7\u00e3o do GLPI&nbsp;<\/a>&nbsp;pode&nbsp;usufruir do plugin \u201c<a rel=\"noreferrer noopener\" href=\"https:\/\/plugins.glpi-project.org\/#\/plugin\/branding\" target=\"_blank\">Branding<\/a>\u201c, desenvolvido oficialmente pela Teclib, e que permite com que os Administradores do sistema possam alterar as logos do sistema de maneira muito simples. Contudo, para ter acesso ao Branding, temos que pagar pelo menos a subscri\u00e7\u00e3o Basic, a uma \u201cbagatela\u201d de&nbsp;<strong>1,200\u20ac<\/strong>&nbsp;o seja,&nbsp;<strong>R$ 7.896,00<\/strong>&nbsp;(fora impostos) em valores com a cota\u00e7\u00e3o do Euro na data deste artigo. Bem caro hein?<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Plugin Trademark<\/h3>\n\n\n\n<p>Link para download: <a href=\"https:\/\/github.com\/edgardmessias\/glpi-trademark\" target=\"_blank\" rel=\"noopener\" title=\"\">https:\/\/github.com\/edgardmessias\/glpi-trademark<\/a><\/p>\n\n\n\n<p>O <strong><em>Trademark<\/em><\/strong>\u00a0foi desenvolvido pela Nextflow, empresa especializada em customiza\u00e7\u00f5es, desenvolvimentos\u00a0e consultoria sobre o GLPI com parceria com o Edgar Messias e visa facilitar a vida de quem busca personalizar o GLPI sem a necessidade de\u00a0ter\u00a0um conhecimento t\u00e9cnico avan\u00e7ado para isso.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>O Trademark \u00e9 compativel com as releases 9.3, 9.4, 9.5 e com o GLPI 10 <\/strong><\/p>\n<\/blockquote>\n\n\n\n<p>As principais funcionalidades do&nbsp;<strong>trademark<\/strong>&nbsp;s\u00e3o:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Alterar o Logotipo da sua Home Page;<\/li>\n\n\n\n<li>Incluir uma imagem de fundo a p\u00e1<\/li>\n\n\n\n<li>Altera\u00e7\u00e3o do t\u00edtulo das p\u00e1ginas do GLPI que s\u00e3o exibidas no navegador;<\/li>\n\n\n\n<li>Customiza\u00e7\u00e3o do rodap\u00e9 original, retirando as mensagens originais do sistema;<\/li>\n\n\n\n<li>O Favicon do seu sistema, substituindo a logo original do GLPI pela da sua sua empresa;<\/li>\n\n\n\n<li>Alterar a Cor da caixa do bot\u00e3o \u201cenviar\u201d da Home page conforme necessidade;<\/li>\n\n\n\n<li>Permite criar um c\u00f3digo customizado com as cores da sua empresa (neste caso precisa de um pequeno conhecimento de CSS);<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Templates&nbsp;para Home Page<\/h4>\n\n\n\n<p>O GLPI possui uma interface simples em sua p\u00e1gina inicial, com uma logo superior e uma colora\u00e7\u00e3o simples, o que n\u00e3o \u00e9 bem visto por todos, pois falta um ar de modernidade ao sistema.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"722\" height=\"612\" src=\"https:\/\/nextflow.com.br\/wp-content\/uploads\/2021\/05\/image.png\" alt=\"\" class=\"wp-image-762\" srcset=\"https:\/\/nextflow.com.br\/wp-content\/uploads\/2021\/05\/image.png 722w, https:\/\/nextflow.com.br\/wp-content\/uploads\/2021\/05\/image-300x254.png 300w\" sizes=\"(max-width: 722px) 100vw, 722px\" \/><figcaption class=\"wp-element-caption\"><strong>P\u00e1gina de l<em>ogin<\/em> GLPI 9+<\/strong><\/figcaption><\/figure><\/div>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"580\" src=\"https:\/\/nextflow.com.br\/wp-content\/uploads\/2021\/05\/login-glpi-10-1024x580.png\" alt=\"\" class=\"wp-image-1215\" srcset=\"https:\/\/nextflow.com.br\/wp-content\/uploads\/2021\/05\/login-glpi-10-1024x580.png 1024w, https:\/\/nextflow.com.br\/wp-content\/uploads\/2021\/05\/login-glpi-10-300x170.png 300w, https:\/\/nextflow.com.br\/wp-content\/uploads\/2021\/05\/login-glpi-10-768x435.png 768w, https:\/\/nextflow.com.br\/wp-content\/uploads\/2021\/05\/login-glpi-10.png 1533w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><strong>P\u00e1gina de <em>login<\/em> GLPI 10+<\/strong><\/figcaption><\/figure><\/div>\n\n\n<p>O plugin Trademark possui 9 templates e permite a altera\u00e7\u00e3o da p\u00e1gina de login do sistema para quem, assim como eu, n\u00e3o tem muita criatividade para criar novos temas.&nbsp; A p\u00e1gina conta com um bot\u00e3o lateral que permite pr\u00e9-visualizar o tema antes de aplica-lo.&nbsp;&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"722\" height=\"281\" src=\"https:\/\/nextflow.com.br\/wp-content\/uploads\/2021\/05\/image-1.png\" alt=\"\" class=\"wp-image-763\" srcset=\"https:\/\/nextflow.com.br\/wp-content\/uploads\/2021\/05\/image-1.png 722w, https:\/\/nextflow.com.br\/wp-content\/uploads\/2021\/05\/image-1-300x117.png 300w\" sizes=\"(max-width: 722px) 100vw, 722px\" \/><figcaption class=\"wp-element-caption\"><em><strong>P\u00e1gina de configura\u00e7\u00e3o do Trademark na vers\u00e3o 9.5+<\/strong><\/em><\/figcaption><\/figure><\/div>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"488\" src=\"https:\/\/nextflow.com.br\/wp-content\/uploads\/2022\/07\/Trademark-v10-1024x488.png\" alt=\"\" class=\"wp-image-1129\" srcset=\"https:\/\/nextflow.com.br\/wp-content\/uploads\/2022\/07\/Trademark-v10-1024x488.png 1024w, https:\/\/nextflow.com.br\/wp-content\/uploads\/2022\/07\/Trademark-v10-300x143.png 300w, https:\/\/nextflow.com.br\/wp-content\/uploads\/2022\/07\/Trademark-v10-768x366.png 768w, https:\/\/nextflow.com.br\/wp-content\/uploads\/2022\/07\/Trademark-v10-1536x732.png 1536w, https:\/\/nextflow.com.br\/wp-content\/uploads\/2022\/07\/Trademark-v10.png 1907w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em><strong>P\u00e1gina de configura\u00e7\u00e3o do Trademark na vers\u00e3o 10+<\/strong><\/em><\/figcaption><\/figure><\/div>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"725\" height=\"579\" src=\"https:\/\/nextflow.com.br\/wp-content\/uploads\/2021\/05\/image-3.png\" alt=\"\" class=\"wp-image-765\" srcset=\"https:\/\/nextflow.com.br\/wp-content\/uploads\/2021\/05\/image-3.png 725w, https:\/\/nextflow.com.br\/wp-content\/uploads\/2021\/05\/image-3-300x240.png 300w\" sizes=\"(max-width: 725px) 100vw, 725px\" \/><figcaption class=\"wp-element-caption\"><strong><em>Templates dos temas do trademark<\/em><\/strong><\/figcaption><\/figure><\/div>\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Aurora Boreal:<\/strong>&nbsp;tema mais escuro, com destaque a imagem de fundo com as caixas transparentes<\/li>\n\n\n\n<li><strong>Ballons:<\/strong>&nbsp;tema moderno, com bel\u00edssimo&nbsp;p\u00f4r do sol, e caixas em 3d;<\/li>\n\n\n\n<li><strong>Cloud:&nbsp;<\/strong>muito utilizado por empresas de Tecnologia&nbsp;voltados&nbsp;a&nbsp;<em>cloud computing e caixas mais&nbsp;abaloadas;<\/em><\/li>\n\n\n\n<li><strong>Desktop:&nbsp;<\/strong>destaca-se o login para a lateral, podendo ter o foco na imagem de fundo, viabilizando campanhas internas e imagens informativas;&nbsp;<\/li>\n\n\n\n<li><strong>Power Red: o<\/strong>utro tema moderno, com destaque para cores mais vivas;<\/li>\n\n\n\n<li><strong>Light:&nbsp;<\/strong>com cores mais neutras permite uma bela imagem ao fundo, e caixas de logins centralizadas (uma das minhas preferidas);<\/li>\n\n\n\n<li><strong>Neon:&nbsp;<\/strong>tema mais futurista, com o login lateral e completamente transparente;<\/li>\n\n\n\n<li><strong>Night:&nbsp;<\/strong>Similar ao Neon, por\u00e9m com uma suave transpar\u00eancia na caixa de login;<\/li>\n\n\n\n<li><strong>Prompt Developer:<\/strong>&nbsp;mais utilizado por empresas de desenvolvimento, e com uma \u201cpegada\u201d mais&nbsp;<em>dark<\/em>&nbsp;collor;<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Os templates n\u00e3o te agradaram? Tudo bem, fa\u00e7a o seu!<\/h3>\n\n\n\n<p>Se os templates ofertados pelo plugin Trademark n\u00e3o te agradaram, ainda \u00e9 poss\u00edvel fazer o&nbsp;<em>upload<\/em>&nbsp;de imagens e logotipos para montar o seu.<\/p>\n\n\n\n<p>A&nbsp;aba \u201c<strong>P\u00e1gina de Login<\/strong>\u201d permite que voc\u00ea possa escolher a cor dos bot\u00f5es; selecionar uma imagem para ser a logo da&nbsp;<strong><em>home page<\/em><\/strong>&nbsp;do sistema (podendo inclusive ajustar o tamanho conforme sua necessidade); e alterar a imagem de fundo&nbsp;que mais te agrada.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"734\" height=\"319\" src=\"https:\/\/nextflow.com.br\/wp-content\/uploads\/2021\/05\/image-4.png\" alt=\"\" class=\"wp-image-766\" srcset=\"https:\/\/nextflow.com.br\/wp-content\/uploads\/2021\/05\/image-4.png 734w, https:\/\/nextflow.com.br\/wp-content\/uploads\/2021\/05\/image-4-300x130.png 300w\" sizes=\"(max-width: 734px) 100vw, 734px\" \/><\/figure>\n\n\n\n<p>Tamb\u00e9m \u00e9 poss\u00edvel&nbsp;trocar estilos da sua p\u00e1gina sem ter que alterar o c\u00f3digo fonte, basta usar a sess\u00e3o \u201c<em>CSS personalizado para P\u00e1gina de Login<\/em>\u201d e inserir o seu tema customizado criando voc\u00ea mesmo o seu pr\u00f3prio estilo. Para quem tem pouco, ou nenhum conhecimento de c\u00f3digo, em buscas r\u00e1pidas no Google pode-se obter templates prontos para p\u00e1ginas de login.&nbsp;<\/p>\n\n\n\n<p>Na imagem abaixo h\u00e1 um CSS customizado, com destaque para a caixa de Login e logotipo centralizado, e uma bela imagem de escrit\u00f3rio ao fundo.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"679\" height=\"329\" src=\"https:\/\/nextflow.com.br\/wp-content\/uploads\/2021\/05\/image-5.png\" alt=\"\" class=\"wp-image-767\" srcset=\"https:\/\/nextflow.com.br\/wp-content\/uploads\/2021\/05\/image-5.png 679w, https:\/\/nextflow.com.br\/wp-content\/uploads\/2021\/05\/image-5-300x145.png 300w\" sizes=\"(max-width: 679px) 100vw, 679px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"715\" height=\"474\" src=\"https:\/\/nextflow.com.br\/wp-content\/uploads\/2021\/05\/image-6.png\" alt=\"\" class=\"wp-image-768\" srcset=\"https:\/\/nextflow.com.br\/wp-content\/uploads\/2021\/05\/image-6.png 715w, https:\/\/nextflow.com.br\/wp-content\/uploads\/2021\/05\/image-6-300x199.png 300w\" sizes=\"(max-width: 715px) 100vw, 715px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Alterar Favicon e T\u00edtulo da p\u00e1gina no GLPI<\/h3>\n\n\n\n<p>Outra altera\u00e7\u00e3o bastante procurada \u00e9 a altera\u00e7\u00e3o do logotipo interno, o Favicon e rodap\u00e9 do sistema, o que sutilmente chancela a identidade visual do seu GLPI.&nbsp; Para isso, a aba \u201cFavicon e T\u00edtulo\u201d torna essa altera\u00e7\u00e3o extremamente simples,&nbsp;bastando apenas fazer o&nbsp;<em>upload<\/em>&nbsp;da logo e a altera\u00e7\u00e3o do t\u00edtulo&nbsp;do navegador conforme desejar.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"724\" height=\"447\" src=\"https:\/\/nextflow.com.br\/wp-content\/uploads\/2021\/05\/image-7.png\" alt=\"\" class=\"wp-image-769\" srcset=\"https:\/\/nextflow.com.br\/wp-content\/uploads\/2021\/05\/image-7.png 724w, https:\/\/nextflow.com.br\/wp-content\/uploads\/2021\/05\/image-7-300x185.png 300w\" sizes=\"(max-width: 724px) 100vw, 724px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"782\" height=\"800\" src=\"https:\/\/nextflow.com.br\/wp-content\/uploads\/2021\/05\/image-8.png\" alt=\"\" class=\"wp-image-770\" srcset=\"https:\/\/nextflow.com.br\/wp-content\/uploads\/2021\/05\/image-8.png 782w, https:\/\/nextflow.com.br\/wp-content\/uploads\/2021\/05\/image-8-293x300.png 293w, https:\/\/nextflow.com.br\/wp-content\/uploads\/2021\/05\/image-8-768x786.png 768w\" sizes=\"(max-width: 782px) 100vw, 782px\" \/><\/figure>\n\n\n\n<p>Quem quiser conhecer mais sobre o&nbsp;trademark, estou sempre dispon\u00edvel no&nbsp;<a href=\"https:\/\/t.me\/phamorais\" target=\"_blank\" rel=\"noreferrer noopener\">Telegram<\/a>,&nbsp;<a href=\"https:\/\/www.linkedin.com\/in\/paulo-henrique-579b2164\/\" target=\"_blank\" rel=\"noreferrer noopener\">Linkedin<\/a>&nbsp;ou&nbsp;se preferir,&nbsp;mande-me um e-mail para paulo.henrique@nextflow.com.br que respondo assim que puder.<\/p>\n\n\n\n<p>O<strong>&nbsp;trademark&nbsp;<\/strong>&nbsp;foi criado com o objetivo de simplificar a vida de pessoas e empresas que buscam melhorar a interface do sistema, de maneira simples e objetiva, sem impactar no c\u00f3digo oficial do sistema, o que na maioria dos casos pode ocasionar problemas em atualizar o ambiente produtivo.<\/p>\n\n\n\n<p>Bom, \u00e9 isso&#8230; espero que gostem do plugin!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Fala galera, tudo bem?&nbsp; Esse post \u00e9 destinado para quem j\u00e1 conhece o&nbsp;sistema GLPI&nbsp;e seus benef\u00edcios, mas est\u00e1 buscando dar um&nbsp;UP&nbsp;no&nbsp;visual do sistema! Com a crescente evolu\u00e7\u00e3o para melhoria de processos internos e indicadores de servi\u00e7os,&nbsp;a utiliza\u00e7\u00e3o do GLPI j\u00e1 ultrapassou a fronteira das \u00e1reas de Help Desk e Gest\u00e3o de Ativos de TI,&nbsp;sendo estendido [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":765,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[1],"tags":[5,4,6,8,7],"class_list":["post-761","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-glpi","tag-glpi","tag-itsm","tag-login-glpi","tag-plugins-glpi","tag-trademark"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/nextflow.com.br\/index.php\/wp-json\/wp\/v2\/posts\/761","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nextflow.com.br\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nextflow.com.br\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nextflow.com.br\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nextflow.com.br\/index.php\/wp-json\/wp\/v2\/comments?post=761"}],"version-history":[{"count":7,"href":"https:\/\/nextflow.com.br\/index.php\/wp-json\/wp\/v2\/posts\/761\/revisions"}],"predecessor-version":[{"id":1235,"href":"https:\/\/nextflow.com.br\/index.php\/wp-json\/wp\/v2\/posts\/761\/revisions\/1235"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nextflow.com.br\/index.php\/wp-json\/wp\/v2\/media\/765"}],"wp:attachment":[{"href":"https:\/\/nextflow.com.br\/index.php\/wp-json\/wp\/v2\/media?parent=761"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nextflow.com.br\/index.php\/wp-json\/wp\/v2\/categories?post=761"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nextflow.com.br\/index.php\/wp-json\/wp\/v2\/tags?post=761"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}