[Joomla] Como remover borda de modulo

Templates e Joomla - criando novas classes css

 

Uma das grandes mudanças do Joomla! 1.5.x em relação ao Joomla! 1.0.x foi sua adequação as webstandards determinados pelo W3C Consortion, particularmente no que refere-se à separação "conteúdo - layout". Agora, você pode determinar como o website irá comportar-se em termos de apresentação, utilizando a abstração implementada pelo Joomla 1.5.x. Ou seja, você poderá criar novas classes no css, novas posições no TemplateDetails.xml e se fizer um template de acordo com a Web 2.0, terá como resultado um projeto totalmente acessível, mesmo que esteja utilizando o Joomla!

Encontrei o artigo abaixo, publicado no repositório de documentação do Joomla! e resolvi disponibilizar para vocês.

Joomla! utiliza templates e os templates possuem folhas de estilos para controlar a aparência da página. Isto inclui coisas como fontes, cores, margens e fundo. Os arquivos CSS são parte do template e ficam no diretório /css. Geralmente possuem o nome de template.css

Quando Joomla! instancia um conteúdo, ele cria diferentes classes CSS que são, então, referenciadas no arquivo CSS para especificar o estilo que será aplicado a quais partes da página HTML estejam ligados. Estes nomes de classes são pré-programados no Joomla!. Mas o Joomla! permite modificar ou adicionar classes CSS por meio dos parâmetros "Class Suffix" (sufixo de classe). Isso permite que você possa ajustar a aparência das páginas específicas com nenhuma programação e muito pouco trabalho. A melhor maneira de entender isto é ver exemplos específicos.

Em que usar um sufixo de classe?

Digamos, por exemplo, que o seu site contém uma série de layouts do tipo Blog de Seção, cada um para uma seção diferente. Se você está feliz tendo todas essas páginas com estilos iguais, então você não precisaria usar um sufixo de classe específico. No entanto, se você deseja que cada uma dessas seções possuam um estilo diferente dos outros, por exemplo, talvez você queira uma cor de fundo diferente ou uma imagem diferente para cada seção, ou ainda
outra opção seria ter o título em sua primeira página diferente do título em outras páginas.

Em todos os casos, se você modificar o estilo de seu arquivo "template.css" para as classes padrão CSS, todos os itens de menu serão afetados e passarão a usar essas classes CSS. Por exemplo, se você mudar o estilo para a classe CSS "componentheading", isto irá afetar todos os itens de menu que usam essa classe.

No entanto, se você adicionar um sufixo de classe específico para um item de menu, em seguida, o Joomla! criará novas classes CSS para cada item de menu para que o estilo possa ser instanciado de forma diferente.

Sufixo de classe

Antes de começar, os exemplos certifique-se que o seu website em Joomla! está publicado com os exemplos de conteúdo instalados. Além disso, certifique-se o template padrão definido é o "rhuk_milkyway" (em Extensões → Template Manager).

Como funciona sem uma classe de Sufixo


Antes de adicionar uma classe de sufixo a página, vamos ver como esta página funciona sem a mesma. No front-end, navegue até Example Pages → Blog da Seção. No seu navegador, selecione a opção para exibir o código fonte da página. Por exemplo, no Firefox, pressione Ctrl + U. No Internet Explorer, selecione Exibir código-fonte →. No Safari, selecione View → View Source.

Usando o comando "Procurar", localize a primeira ocorrência da palavra "componentheading". Ele deve deve ter um aspecto semelhante ao seguinte:

<div>

Navegue para baixo no arquivo até encontrar as seguintes marcas:

<table cellpadding="0" cellspacing="0">

<table>

<td width="100%">

<table>

Nota: As imagens abaixo foram feitas usando um add-in livre do Firefox chamado "Firebug". Firebug permite-lhe ver rapidamente a relação entre os elementos de HTML em sua origem e de texto e gráficos mostrados na página. É uma ferramenta muito útil, e você pode obtê-lo aqui. Há também um vídeo tutorial gratuito sobre como usar o Firebug com o Joomla! disponíveis aqui.

A imagem abaixo mostra o componentheading "classe". É a área de título da página acima do artigo de blog.

imagem 1 tutorial sufixo

Esta imagem mostra-lhe toda a classe do "blog". Esta é a tabela externa em que todos os artigos irão aparecer.

imagem 2 tuto sufixo

Esta imagem mostra o a classe "contentpaneopen" para o corpo do artigo. Isto inclui o autor e a data da informação, bem como o texto do artigo real.

imagem 3 tuto sufixo

Então isso nos dá uma boa compreensão de como o Joomla! implementa o estilo de elementos em um layout de Blog da Seção. O Joomla! escreve estas classes, como parte do HTML. E o template contém o CSS que fornece as informações de estilo para estes diversos elementos e classes.

Page Class Suffix (sem espaço)

Agora que vamos ver como isso funciona sem uma página de sufixo de classe, vamos tentar com um. Na parte final, navegue até Menus Exemplo → Artigos e clique em "Blog da Seção". Isso deve exibir a tela "Menu Item: [Edit]" para o Layout Blog seção. Clique em Parâmetros (System) para mostrar os parâmetros do sistema. No campo "Page Class Suffix" digite o valor "_myBlogSuffix" e clique no botão Salvar.

Agora, volte para o frontend e novamente para navegar Example Pages → Blog da Seção. Aviso desde já que perdemos o estilo da página e os títulos do artigo. Vamos olhar mais de perto para ver o porquê.

Usando comando "Procurar" do navegador, localize a primeira ocorrência de "_myBlogSuffix". É em uma "tag"  div e se parece com isto:

<div>

Se você olhar através do código-fonte, você também deve ver as seguintes classes: blog_myBlogSuffix, contentpaneopen_myBlogSuffix e contentheading_myBlogSuffix.

Ao adicionar a página de sufixo de classe, mudamos todos estes nomes de classe. Isso significa que o estilo especial no arquivo CSS que se refere à base de "nomes" de classe (como componentheading, blog, e assim por diante) não será aplicada, uma vez que estas classes não existem mais na página.

Agora, você pode corrigir este problema editando o arquivo template.css para adicionar o mesmo estilo para as novas classes (por exemplo, "componentheading_myBlogSuffix"). Mas há uma maneira muito mais fácil de fazer isso - simplesmente adicionando um espaço à esquerda para o parâmetro.

Page Class Suffix (com um espaço Leading)


Mais uma vez, no final, volte para o menu Exemplo → Páginas → Blog da Seção. Nós estamos indo para alterar o valor da classe de página Suffix. Desta vez, vamos entrar em um espaço à esquerda e chamá-lo <espaço> + "myBlogClass", conforme mostrado abaixo.

imagem 4 tuto sufixo

Agora, volte para o frontend e vá até exemplo Pages → Blog da Seção. Observe que o nosso estilo está de volta! Vamos analisar o código HTML para ver o que está acontecendo. Abra o fonte e encontre a primeira ocorrência de "myBlogClass". Deve ser assim:

<div>

Porque nós colocamos um espaço na página de sufixo de classe, criamos uma segunda classe em vez de mudar o nome da primeira classe (que é permitido e apoiado por todos os navegadores modernos). Então, nós não quebramos nenhum dos estilos CSS existentes para esta página. (Um aviso: é preciso certificar-se que o novo nome de classe é diferente de qualquer um dos outros nomes de classe utilizado na página. Caso contrário, poderíamos obter um estilo que não queremos.)

Adicionando novas classes na folha de estilos

Neste ponto, nós criamos uma nova classe CSS no HTML para permitir algum novo estilo. Agora precisamos usar essa classe nova para realmente mudar a aparência de nossa página. A primeira coisa que precisamos fazer é encontrar o arquivo CSS aplicável. Neste caso, é <joomla_root> / templates / rhuk_milkyway / css / template.css.

Vamos dizer que nós queremos adicionar uma cor de fundo, mas apenas para esta seção de Blog específica. (Lembre-se, se quiséssemos apenas mudar todas as páginas do Blog da Seção em nosso site, nós poderíamos apenas alterar o estilo CSS para classes de base, como "componentheading" ou "blog".) O que nós precisamos fazer é descobrir qual área (componentheading "," blog ", ou" contentpaneopen ") queremos alterar o estilo. Dizemos que só queríamos o estilo componentheading "área.

Primeiro, vamos usar o seletor de CSS "div.myBlogClass" e adicionar o seguinte código para o final do nosso arquivo CSS:.)

/* Custom Styling */
div.myBlogClass {
background-color: #FFE4E1; /* mistyrose */       
}

O resultado é que nesta posição a página agora tem a cor de fundo, como mostrado abaixo.

imagem 5 tuto sufixo

Agora, isso funciona bem no nosso exemplo, porque as outras classes são definidas para "tabelas" e não tags "div". Mas é normalmente melhor para ser mais específico em nosso seletor de estilo que apenas os elementos que têm tanto a classe base desejada e a nova classe. Por exemplo, vamos substituir o código acima com o seguinte código:

/* Custom Styling */
.blog.myBlogClass {
background-color: #FAFAD2; /* lightgoldenrod */  
}

Isso especifica que o novo estilo será aplicado somente ao blog que utiliza estilo "ea myBlogClass". Isso nos dá a cor de fundo sobre toda a área do blog, conforme mostrado abaixo.

imagem 6 tuto sufixo

A grande coisa sobre a criação de uma nova classe (com o truque espaço à esquerda) é que não precisamos de copiar todos os estilos existentes para as classes de base. Nós podemos apenas focar o novo estilo que nós queremos.

Agora, neste exemplo, estamos focados no Blog layout Seção. Os nomes de classe para os diferentes componentes podem ser diferentes, mas o processo será o mesmo. A tabela abaixo mostra alguns layouts e uma lista de nomes de classe e sufixos comuns Joomla!.

imagem 7 tuto sufixo

Assim, para resumir o que aprendemos sobre como usar o parâmetro Page Class Suffix:

1. Use um espaço à esquerda para criar uma nova classe CSS. Desta forma, você não precisa se preocupar em refazer ou quebrar estilos existentes CSS.
2. Olhe no código fonte HTML para encontrar a localização da base e novas classes.
3. Se desejar, use o Firebug para ver os elementos HTML que correspondem a áreas da página.
4. Adicionar um estilo personalizado para o final do template.css ", especificando o nome da classe base desejada e a classe personalizada no formulário. Baseclass.customclass como no exemplo acima.

O parâmetro sufixo de classe do módulo funciona da mesma forma como o Page Class Suffix. Vamos passar por um exemplo, utilizando o módulo Últimas Notícias.

Na parte final administrativa, navegue até Extensões → Módulo Manager e encontre o módulo "Últimas Notícias". Clique nele para abri-lo para edição, e entra <espaço> + "customLatestClass" no campo de parâmetro Module Class Suffix, conforme mostrado abaixo:

imagem 8 tuto sufixo

Agora, vá até a home page no frontend e veja o código fonte da página. A imagem abaixo foi feita usando o Firebug. Ela mostra o HTML da home page e o estilo para o módulo Últimas Notícias personalizado.

imagem 9 tuto sufixo

A parte superior da tela, apresentada em azul claro, é o elemento div para o módulo. Abaixo, na janela de HTML, vemos o HTML da seguinte forma:
<div>
e, em seguida
<ul>

As classes "moduletable" e "latestnews" são criadas automaticamente. A nova classe ", customLatestNews" foi criada porque nós começamos com um espaço, o campo parâmetros sufixo de classe do módulo.

Agora, vamos usar a nossa nova classe para adicionar algum estilo personalizado. Novamente, vá até Extensões->Templates->rhuk_milkyway e edite o arquivo template.css, adicionando o seguinte código:

div.customLatestClass {
background-color: #FFFFD2;
}

div.customLatestClass h3, ul.customLatestClass, ul.customLatestClass a {
color: #8B4513;
}

Salve o arquivo e atualize o frontend (F5). Deve ficar como a imagem abaixo:

imagem 10 tuto sufixo

O seletor CSS div.customLatestClass define a cor de fundo para toda a área. Os três seletores h3 div.customLatestClass, ul.customLatestClass, ul.customLatestClass uma cor a escolha da fonte para o h3 "posição, as balas (" tag "ul), e o" sim uma ", respectivamente. Note que, se nós só queríamos o estilo para o elemento "ul", não precisaríamos de um sufixo de classe de módulo a  menos que tivéssemos mais de um módulo "Últimas Notícias". Em vez disso, nós poderíamos apenas ter definido o CSS usando a classe padrão "latestnews".

Tenha cuidado para não quebrar o estilo existente

Nos menus, precisamos ter cuidado para não quebrar o estilo existente no CSS.

Vamos ver como isso funciona. No backend, navegue até Extensões → Module Manager e abra o menu principal para edição. Clique sobre os parâmetros avançados. Observe que a classe sufixo do módulo é definida como "_menu", sem um espaço à esquerda.

Agora, vá à página inicial, no frontend e veja o código fonte (ou use Firebug). A imagem abaixo mostra o código HTML para o menu principal.

imagem 11 tuto sufixo

Observe que a classe é chamada de "module_menu" por causa do sufixo de classe do módulo. Além disso, observe que existe um estilo especial no template.css e o arquivo blue.css para a classe module_menu. Por exemplo, há uma imagem de fundo que fornece parte da borda azul ao redor do menu.

Podemos confirmar isto retornando para o back-end e mudando o sufixo de classe do módulo, deixando-o em branco. Volte ao frontend e aperte (F5) para atualizar. Agora o menu principal irá aparecer sem o estilo do module_menu, como mostrado abaixo:

imagem 12 tuto sufixo

Isso mostra um ponto importante. Módulos existentes, especialmente os menus, podem ter um estilo CSS que depende da classe de sufixo do módulo. Então precisamos ter cuidado ao fazer alterações.

E se a gente ainda quiser acrescentar algum estilo especial apenas para o menu principal? Uma maneira um pouco complicada, é adicionar uma classe CSS segundo o sufixo existente. Para ver isso, volte para o backend no Gerenciamento de Módulos e abra o menu principal para edição. Desta vez, na classe de sufixo do módulo, entre _menu, um espaço e, em seguida myMenuClass, conforme mostrado abaixo:

imagem 13 tuto sufixo

Agora, no backend, siga Extensões->Templates->rhuk_milkyway -> Editar css e  adicione o seguinte código no final do arquivo template.css

div.myNewClass {
font-size: 1.2em;
}

Volte à Página Inicial no frontend e perceba que agora a fonte no menu principal é maior, como mostrado abaixo.
imagem 14 tuto sufixo

Se abrir o Firebug, podemos ver o que o HTML e CSS parece, como mostrado abaixo:

imagem 15 tuto sufixo

Ao colocar um espaço entre o _menu "e" MyNewClass ", nós adicionamos a nova classe para o HTML. Em seguida, selecionando a nova classe no arquivo CSS, mudamos o tamanho da fonte.

Menu Class Suffix and Menu Tag ID

Todos os módulos do core do Joomla! permitem que você insera um módulo de classe de sufixo, como discutido acima. Módulos de Menu têm dois parâmetros adicionais: Menu Class Suffix e Menu Tag ID.

Menu class sufix

O Menu Class Suffix insere um sufixo extra na classe para a lista ordenada que se apresenta no menu. Se não editada, a classe é "menu". Se acrescentar "_myMenuClass" em Advanced Parameters → Menu Class Suffix, a nova marca será "menu_myMenuClass".

(Este comportamento é só para o estilo de menu do tipo "Lista". Se escolher "compatibilidade - Vertical" ou "compatibilidade - horizontal", o sufixo de classe será adicionado aos links na tabela, o que será, então, o sufixo "mainlevel_myMenuClass". Quando escolher a lista compatibilidade Flat, o sufixo será adicionado aos links (como nas duas outras compatibilidades de listas), mas também será adicionado à tag ul, mas como um id ao invés de uma classe, a identificação será "mainlevel_myMenuClass ".)

Menu Tag ID parameter

Agora, vamos olhar para o parâmetro Menu ID Tag. No Backend, abra o menu principal do módulo de edição, e digite "myTagID" no parâmetro Menu ID Tag.

Adicione o seguinte código no fim do arquivo template.css do template rhuk_milkyway:

#myTagID {
list-style-type: square;
}

Agora, atualize o frontend (F5) para ver a mudança. O menu principal deve aparecer agora, como mostrado abaixo:

imagem 16 tuto sufixo

Finalmente, podemos olhar o HTML e CSS no Firebug, conforme mostrado abaixo.

imagem 17 tuto sufixo

Joomla! acrescentou o atributo id = "myTagID" para a  tag "ul" do HTML para o menu principal. Isto nos permitiu mudar o estilo para esse ID. Note-se que, uma vez que este é um atributo "id", nós usamos o seletor de CSS # myTagID (com uma "#" em vez de um ".").

Conclusão


O sufixo de classe e os parâmetros Menu Tag ID permitem que você ajuste o estilo CSS de seu site. Ao utilizar um espaço à esquerda no nome do sufixo, podemos criar uma nova classe. Este é o método preferido, desde que o novo nome da classe não entre em conflito com uma classe existente na folha de estilos já que isto implicaria na quebra da estilização.

 

Fonte: http://docs.joomla.org Tradução e adaptação: Joomla Brasília

.