Modificando o cabeçalho

Continuando a discussão do versão OJS 3.0 liberada:

vc pode editar as configurações do site e enviar uma imagem de “Logo”,

ou então enviar um arquivo CSS que modifca a classe do cabeçalho para apresentar uma imagem de fundo

.pkp_structure_head{
    background-image: url(https://addons.cdn.mozilla.net/static/img/docs/themes/header.jpg);
    background-position: top;
}

Caro ronniebrito, tentei usar o item inserir LOGO porém não esta ficando como nas imagens que vc me encaminhou! Meu pessoal de T.I. não fez ainda o outro procedimento (CSS) mas acredito que deveria funcionar as duas maneiras.

Qualquer tamanho de figura que envio não preenche a parte verde ou seja não fica adequado! Diferente das imagens que vc me enviou que cobrem toda a parte co cabeçalho do sistema, inclusive os botões atual - arquivos - sobre e buscar! Como fazer para ficar assim?
Grato

1 curtida

nessa caso precisa usar o CSS

Gente… Estou com o mesmo problema!
Como eu faço pra criar um arquivo de extensão CSS que seja passível de anexação na plataforma?!

Peço desculpas antecipadamente, pois a pergunta pode ser ridícula… Mas, não sou designer ou desenvolvedor de sites…

Daqui há pouco serão 2 anos que ninguém sabe qual dimensão de imagem é adequada para preencher o cabeçalho do OJS/SEER. Dúvidas fazendo aniversário. Parabéns pra nós!

Boa tarde.
As dimensões corretas são 1058,67px por 170,98px, porém o cabeçalho não fica responsivo.

Observação quanto a questão de ser ou não responsivo: Não sou do TI, motivo pelo qual ao deixar o cabeçalho responsivo eu acabei desconfigurando o site, mas já estou buscando solução deste problema.
Por enquanto, a melhor solução é o tamanho que comentei.

3 curtidas

Caros(as) colegas, boa tarde!

Como acrescentar o nome completo da revista e remover o rodapé, segundo as marcações em vermelho na imagem abaixo?

Grato!

Ola, como aquele REI é um banner(imagem) edita ele e coloca o nome do lado(pra mim é o jeito mais fácil)

Agora o ojs/pkp eu só consegui assim no arquivo style.css coloquei a seguinte linha:

.pkp_brand_footer a img {
color: #DDDDDD;
filter: grayscale(50%) brightness(0.4) contrast(200%) invert(75%) opacity(25%) saturate(30%) sepia(60%);
}

isso vai deixar ele com a cor do footer já que mexer nele vai alterar nas outras imagens.

Tem que alterar o tema manualmente. Não é difícil, mas requer um certo trabalho, e vc terá que aprender o básico no Guia de Tematização PKP. De qualquer maneira, colocar um “banner” aí é mais fácil do que alterar o CSS/LESS do tema. É o que eu recomendo.

Veja:

É simples, mas resolveu. E está perfeitamente responsivo:

O que eu fiz, basicamente, foi clonar o tema “default” e modificá-lo pra incluir um banner e remover o logo da PKP lá do footer.

No footer.tpl, bastou ‘comentar’ o anchor que contém a imagem:

<div class="pkp_brand_footer" role="complementary">
{*<a href="{url page="about" op="aboutThisPublishingSystem"}"><img alt="{translate key="about.aboutThisPublishingSystem"}" src="{$baseUrl}/{$brandImage}"></a> *}
</div>

No header.tpl, tive que acrescentar uma anchor pra mina imagem:

{if $displayPageHeaderLogo && is_array($displayPageHeaderLogo)}
    <a href="{$homeUrl}" class="is_img">
        <img src="{$publicFilesDir}/{$displayPageHeaderLogo.uploadName|escape:"url"}" width="{$displayPageHeaderLogo.width|escape}" height="{$displayPageHeaderLogo.height|escape}" {if $displayPageHeaderLogo.altText != ''}alt="{$displayPageHeaderLogo.altText|escape}"{else}alt="{translate key="common.pageHeaderLogo.altText"}"{/if} />
    </a>
    {* esta é a parte que interessa *}
    &nbsp;&nbsp;&nbsp;&nbsp;
    <img src="{$baseUrl}/local/da/imagem/no/server/{"site-header.png"|escape:"url"}" width="{$displayPageHeaderLogo.width|escape}" height="{$displayPageHeaderLogo.height|escape}" {if $displayPageHeaderLogo.altText != ''}alt="{$displayPageHeaderLogo.altText|escape}"{else}alt="{translate key="common.pageHeaderLogo.altText"}"
{/if} />

Fiz as mudanças, conforme sugestão. Modifiquei os arquivos citados acima e que estavam localizados em lib/pkp/templates/frontend/components.

No entanto, um texto formatado e mal distribuído é adicionado no lugar da imagem, de acordo com duas situações possíveis. Observe imagem abaixo:

  1. Se o texto alternativo não é informado, aparece Logo do cabeçalho da página ao invés da imagem;
  2. Se o texto alternativo é informado, aparece o nome da revista que foi informado no campo Texto alternativo.

Em relação ao rodapé, funcionou perfeitamente.

Grato!

Não, você não seguiu a sugestão da minha resposta. Minha sugestão foi: clonar o tema default conforme as informações constantes do Guia de Tematização PKP, em especial, na parte Configuração de Temas, e criar um banner (uma imagem com as letras já posicionadas) para fixar logo depois da anchor que carrega o logo do site.

A intenção é fazer o tema (clonado) carregar o banner sempre que vc definir um logo pro sistema (por isso aquela tag img aparece dentro da condição {if $displayPageHeaderLogo && is_array($displayPageHeaderLogo)}).

Nesse sentido:

1º- Não altere o conteúdo do core da aplicação: de acordo com a documentação, tudo o que está dentro de lib/pkp/templates é parte do sistema (veja aqui), e não é uma boa prática alterar o código do sistema. Além do evidente risco para a segurança em alterar coisas dentro desses arquivos, quando vc fizer upgrade, pode perder todas as alterações que fez se não lembrar de copiar esses arquivos alterados para a nova instalação. Por isso eu estou insistindo que vc faça um clone do tema e o modifique;

2º - Crie um banner pro sistema: ele é que aparece dentro da tag img: <img src="{$baseUrl}/local/da/imagem/no/server/{"site-header.png"|escape:"url"}" width="{$displayPageHeaderLogo.width|escape}" height="{$displayPageHeaderLogo.height|escape}" {if $displayPageHeaderLogo.altText != ''}alt="{$displayPageHeaderLogo.altText|escape}"{else}alt="{translate key="common.pageHeaderLogo.altText"}"{/if} />. Esse meu ‘site-header.png’ tem 750x95, e como vc viu nos prints, funciona perfeitamente, inclusive no modo responsivo;

3º - Talvez seja melhor usar a classe ‘is_img’: veja bem: eu modifiquei bastante esse tema que clonei, então pode ser que tenha passado alguma instrução pro CSS/LESS que altere a posição desse banner no header.tpl. Perceba que na minha resposta anterior, a tag <img> aparece fora da tag <a>, ou seja, não usa a classe ‘is_img’. Isso provavelmente não é uma boa opção pra vc (principalmente se vc insistir em mexer no core do sistema). Então, prefira fazer assim:

<a href="{$homeUrl}" class="is_img">
  <img src="{$baseUrl}/local/da/imagem/no/server/{"site-header.png"|escape:"url"}" width="{$displayPageHeaderLogo.width|escape}" height="{$displayPageHeaderLogo.height|escape}" {if $displayPageHeaderLogo.altText != ''}alt="{$displayPageHeaderLogo.altText|escape}"{else}alt="{translate key="common.pageHeaderLogo.altText"}"{/if} />
</a>

Viu como a imagem aparece dentro da anchor? Isso vai forçar posicionamento e tamanho por causa da classe ‘is_img’. (Ou vc pode criar uma classe pra isso no CSS/LESS e recarregar o tema, como eu fiz).

4º - Se o sistema não encontrar a imagem, ele vai colocar o texto no lugar: daí o motivo de vc estar questionando o fato de o ‘texto alternativo’ aparecer. Quem faz isso é o bloco {if $displayPageHeaderLogo.altText != ''}alt="{$displayPageHeaderLogo.altText|escape}"{else}alt="{translate key="common.pageHeaderLogo.altText"}"{/if} que quer dizer, basicamente: “se não encontrar a imagem declarada, vou mostrar o texto que vc configurou”.

Posso fornecer o tema que eu modifiquei pra vc revisar, adaptar e instalar na sua aplicação. Mande mensagem privada caso tenha interesse.

É isso.

boa tarde! Eu estou tentando fazer isso que você fez, de colocar um logotipo que preencha grande parte da faixa colorida e fique bem visível, mas não sou da área de TI e não estou conseguindo entender, poderia me ajudar?

Oi, Claudio! Poderia me instruir os passo a passo?