Estilos do módulo

Conceitos de Estilo

Um formulário de entrada de dados de módulo possui uma aba Avançado. Seus campos variam com o tipo de módulo e você pode ver isso por si mesmo selecionando um módulo Menu e comparando-o com um módulo Login ou Breadcrumbs. Você verá os três campos de formulário seguintes relacionados ao estilo:

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

Você pode experimentar as opções de Estilo do módulo editando um módulo e alterando o valor para ver o que isso faz na exibição do site.

• html5 gera <div class="moduletable ">
• none remove completamente a <div> externa e também o marcador <h3> do módulo.
• outline gera <div class="mod_preview_info">, com informações de posição e estilo substituindo o marcador <h3> do módulo.
• table gera uma disposição (layout) de tabela começando com <table class="moduletable "> com o antigo marcador h3 agora sendo um marcador <th>.
• card gera <div class="sidebar-right card ">, o padrão.
• noCard gera <div class="sidebar-right no-card ">

A Classe do Módulo

Neste ponto, você precisa saber um pouco sobre Cascading Style Sheets, ou CSS. Se você digitar uma única palavra no campo Classe do módulo, digamos green já 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 conterá <div class="sidebar-right card green">.

Não há nenhuma mudança visível na aparência do Site porque a classe green não está definida. Para defini-la, faça uma entrada no arquivo user.css do tema.

No menu do Administrador:

• Selecionar Sistema / Modelos do Site / Modelos e Arquivos do Cassiopeia.
• Selecionar Novo arquivo na Barra de Ferramentas
• Selecionar css na coluna esquerda, o destino do novo arquivo.
• Digitar user no campo Nome do Arquivo.
• Selecionar css na lista Tipo de Arquivo.
• Selecionar o botão Criar.

Agora você pode abrir a pasta css para encontrar e abrir o arquivo user.css para edição. Digite estas declarações de estilo e observe a grafia em inglês americano 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 outros marcadores com esse estilo em outras 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 nenhuma mudança visível no site, mas o cabeçalho agora é exibido como <h3 class="card-header blue">. Volte a editar o arquivo user.css para adicionar uma entrada para o estilo do cabeçalho:

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

O cabeçalho do módulo agora está em azul escuro. Há várias maneiras de especificar cor em CSS. As mais comuns são hexadecimal e nomes de cores padrão. Leia mais sobre isso em outro lugar!

Desafio de CSS

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