Estilos do módulo

Conceitos de estilo

Um formulário de edição de dados de módulo tem um separador Avançado. Os seus campos variam consoante o tipo de módulo e pode verificar isto por si próprio selecionando um módulo de Menu e comparando-o com um módulo de autenticação ou um módulo de Trilhos de navegação. Verá os seguintes três campos de formulário relacionados com o estilo:

• Classe do módulo é um campo de texto que lhe permite adicionar a sua própria classe CSS à etiqueta do contentor do módulo, geralmente uma <div>.
• Classe do cabeçalho é um campo de texto que lhe permite adicionar a sua própria classe CSS à etiqueta do cabeçalho, por predefinição uma etiqueta <h3>.
• Estilo do módulo é uma lista que lhe permite selecionar um de entre vários estilos padrão. A lista contém none, html5, outline, table, card e noCard. O predefinido é card, proveniente dos estilos do tema Cassiopeia.

Pode experimentar as opções de Estilo do módulo editando um módulo e alterando o valor para ver o que isso faz à exibição do sítio.

• html5 dá <div class="moduletable ">
• none remove completamente a <div> externa e também a etiqueta <h3> do módulo.
• outline dá <div class="mod_preview_info">, com informações de posição e estilo a substituir a etiqueta <h3> do módulo.
• table dá um esquema de tabela começando por <table class="moduletable ">, com a antiga etiqueta h3 agora uma etiqueta <th>.
• card dá <div class="sidebar-right card ">, a predefinição.
• noCard dá <div class="sidebar-right no-card ">

A classe do módulo

Nesta etapa precisa de saber um pouco sobre Cascading Style Sheets ou CSS. Se introduzir uma única palavra no campo Classe do módulo, digamos green, uma vez que as classes CSS são, por convenção, todas em minúsculas, e com o Estilo do módulo definido como inherited, a saída contém <div class="sidebar-right card green">.

Não há qualquer alteração visível na aparência do sítio porque a classe green não está definida. Para a definir, faça uma entrada no ficheiro user.css do tema.

No menu do Administrador:

• Selecione Sistema / Temas do sítio / Temas e ficheiros Cassiopeia.
• Selecione Novo ficheiro na Barra de ferramentas
• Selecione css na coluna da esquerda, o destino do novo ficheiro.
• Digite user no campo Nome do ficheiro.
• Selecione css na lista Tipo de ficheiro.
• Selecione o botão Criar.

Pode agora abrir a pasta css para encontrar e abrir o ficheiro user.css para edição. Introduza estas declarações de estilo e repare na grafia americana de color:

.sidebar-right.card.green {
    background-color: #ddffdd;
}
.sidebar-right.card.green .card-body {
    background-color: #eeffee;
}

O estilo poderia ter usado apenas .green, mas isso poderia ter afetado outras etiquetas com esse estilo noutras páginas.

A classe do cabeçalho

Volte ao formulário de edição do módulo e adicione blue no campo Classe do cabeçalho. O módulo não apresenta qualquer alteração visível no sítio, mas o cabeçalho mostra agora <h3 class="card-header blue">. Volte a editar o ficheiro user.css para adicionar uma entrada para o estilo do cabeçalho:

.card-header.blue {
    color: navy;
}

O cabeçalho do módulo está agora a azul-escuro. Existem várias formas de especificar cores em CSS. As mais comuns são hexadecimal e nomes de cores padrão. Leia mais sobre isto noutro lugar!

Desafio CSS

• Mude a cor da margem do módulo para azul-marinho!
• Mude também a margem inferior do cabeçalho.
• Aplique este estilo a vários módulos em vez de um de cada vez