Gestão de Pessoas - Manual do Usuário > Informações adicionais > Principais rotinas > Recrutamento e Seleção > Currículo Web > Customização de estilos do Currículo Web

Customização de Estilos do Currículo Web

Este recurso não está disponível no Gestão de Pessoas | HCM GO UP. Saiba mais.

Como customizar

Para a customização do currículo web via CSS, é necessário seguir os seguintes procedimentos abaixo:

  1. Criar um arquivo CSS que servirá para a customização;
  2. Adicionar este arquivo no diretório de páginas do Currículo Web. No exemplo foi criado uma pasta com o nome customizacao e adicionado o arquivo customizacao.css dentro desta pasta.
  3. Cadastrar este arquivo na guia Customização do configurador do Currículo Web para o perfil em que se deseja aplicar esta customização. No exemplo foi cadastrado somente para o perfil 001 do currículo, conforme demonstrado na imagem abaixo.

  1. Após estas configurações, o arquivo CSS adicionado será aplicado à tela de login do Currículo WEB, ao Currículo Web, à guia Oportunidade e Candidatura e à tela de área pública, conforme mostrado nas imagens abaixo:

Dicas para customizações do currículo WEB

Alterar imagem da tela de login

Para alterar a imagem da tela de login, conforme destacado na imagem abaixo, basta adicionar o código abaixo no CSS customizado.

A seguir temos um exemplo de código para a alteração desta imagem.

/* Código responsável pela troca da imagem da tela de login */
#cv-div-geral-login{

background-image: url('../imagens/logosenior.png');

}

Alterar logo da empresa no cabeçalho do currículo

Para alterar o logo da empresa apresentado no cabeçalho do currículo web, conforme mostrado na imagem abaixo, adicione este código no CSS customizado.

/* Código responsável pela troca do logo no cabeçalho do currículo WEB.

A pasta img é uma pasta dentro do diretório customizacao */

#logo{

background: url('img/meulogo.png'); /* Imagem do logo */

background-repeat: no-repeat; /* Exibir a imagem somente uma vez */

width: 500px; /* Largura para apresentação da imagem */

}

Alterar ícones dos botões

Para a alteração de ícones dos botões no currículo é necessário adicionar na guia customização um arquivo javascript.

Observação:

Mais detalhes de como adicionar um arquivo javascript para customização no currículo web podem ser vistos na página Customizacao_Curriculo_Web.

Os ícones para os botões podem ser escolhidos no site da biblioteca JQuery-ui, posicionando o cursor do mouse sobre o ícone desejado aparecerá um texto que será utilizado para fazer a troca do ícone do botão desejado, conforme mostrado abaixo.

O código abaixo traz uma função genérica para alteração de ícones de botões. No parâmetro aBotao deve ser passado o objeto do botão e no parâmetro aClasseIcone deve ser passado o nome da classe do ícone sem o ponto (.). Esta função genérica será utilizada nos exemplos abaixo para a troca dos ícones dos botões do currículo WEB.

/* Função com o objetivo de facilitar a troca de ícone dos botões */

function AlterarIcone(aBotao, aClasseIcone){

// Armazena o span que contém o ícone do botão em uma variável

var xSpanIcone = $(aBotao).find("span.ui-icon");

// Verifica se o span com o ícone existe

if (xSpanIcone.length > 0){

//Se existe, troca o ícone conforme passado por parâmetro

xSpanIcone.attr('class', 'ui-icon ' + aClasseIcone);

}

}

A imagem abaixo demonstra os botões presentes na tela de login do Currículo Web.

A seguir está um exemplo de código javascript para alteração dos ícones dos botões da tela de login do Currículo Web.

$(document).ready(function(){

/* Armazena em uma variável o formulário de login */

var xFormLogin = $("#cv-div-geral-login");

// Verifica se o formulário de login existe

if (xFormLogin.length > 0){

// Altera o ícone do botão Novo currículo

AlterarIcone(xFormLogin.find("#BtnPreCadastro"), "ui-icon-document");

// Altera o ícone do botão ENTRAR

AlterarIcone(xFormLogin.find("#btnEntrar"), "ui-icon-circle-triangle-e");

//Altera o ícone do botão Vagas disponíveis

AlterarIcone(xFormLogin.find("#rs-cv-btn-vagasdisponiveis"), "ui-icon-person");

}

}

A imagem abaixo demonstra os botões presentes na tela do Currículo Web.

O código javascript abaixo pode ser utilizado para alterar os ícones dos botões do cabeçalho da tela do Currículo Web.

$(document).ready(function(){

/* Armazena em uma variável o cabeçalho do currículo */

var xDivLogo = $("#cv-div-logo");

// Verifica se o div de logo existe

if (xDivLogo.length > 0){

// Altera o ícone do botão Alterar senha

AlterarIcone(xDivLogo.find(".cv-button-senha "), " ui-icon-refresh ");

// Altera o ícone do botão Salvar

AlterarIcone(xDivLogo.find(".cv-button-salvar "), " ui-icon-document ");

// Altera o ícone do botão Salvar e sair

AlterarIcone(xDivLogo.find(".cv-button-salvar-sair "), " ui-icon-arrowreturnthick-1-e ");

}

}

O exemplo de código javascript a seguir permite alterar o ícone do botão de inclusão de registros na grid.

$(document).ready(function(){

/* Armazena em uma variável o formulário do currículo */

var xFrmCurriculo = $("#cv-div-logo");

// Verifica se o div de logo existe

if (xFrmCurriculo.length > 0){

// Altera o ícone do botão Inserir registro na grid

AlterarIcone(xFrmCurriculo.find(".cv-button-inserir-grid"), "ui-icon-check");

}

}

A função “AlterarIcone” utilizada nos exemplos acima também pode ser utilizada para alterar o ícone de qualquer botão do Currículo Web.

Alterar tema do Currículo Web

Para alterar o tema padrão do currículo WEB basta seguir os passos abaixo.

Observação

O CSS a ser gerado deve ser compatível com a versão de JQuery utilizada pela aplicação no momento.

  1. Acessar o site da biblioteca JQuery-ui para fazer o download de um novo tema para o Currículo Web. A imagem abaixo mostra o configurador de temas do JQuery-ui.

  1. Nesta página é possível criar o seu próprio tema para o currículo utilizando a guia “Roll Your Own”. Após a montagem do tema customizado, para efetuar o download basta clicar no botão Download Theme .
  2. A página disponibiliza também uma galeria de temas prontos para serem baixados conforme ilustrado pela imagem abaixo. Para efetuar o download de algum dos temas basta clicar no botão Download listado abaixo do tema desejado.

  1. Na tela de download do tema, deixe todas as opções marcadas e clicar no botão Download.

  1. O downLoad resultará em um arquivo .zip com a seguinte estrutura apresentada abaixo. O nome da pasta "pepper-grinder" varia com base no tema escolhido; ela sempre terá o nome do tema baixado.

  1. Copiar a pasta com o nome do tema que está dentro da pasta CSS, conforme demonstrado acima.
  2. 7. Colar esta pasta dentro do diretório de HTML do Currículo Web. Para maior organização, recomenda-se utilizar a estrutura de pastas customizacao/temas/<pasta do tema>.
  3. 8. No configurador de perfil do Currículo Web, na guia Customização, cadastrar um arquivo CSS. Este arquivo deve apontar para o arquivo que está na pasta do tema baixado (“jquery-ui-1.9.2.custom.css” , no exemplo acima) conforme a imagem abaixo:

Observação:

O novo tema será aplicado somente para o perfil em que foi cadastrado o arquivo CSS do tema.

  1. Depois de efetuados os passos acima, o Currículo Web já estará com o novo tema conforme ilustrado na imagem abaixo.

Observação:

A Senior não se responsabiliza pelo conteúdo do site em que o Jquery-ui disponibiliza recursos para as customizações.

Este artigo ajudou você?