Série Como Fazer - Botões Cor de Fonte e Texto Centralizado

classic Classic list List threaded Threaded
1 message Options
Reply | Threaded
Open this post in threaded view
|

Série Como Fazer - Botões Cor de Fonte e Texto Centralizado

jsmoraes
This post was updated on .
Continuando com o enriquecimento dos recursos de formatação da página de Edição de Mensagem, neste tópico mostraremos como introduzir novos botões para facilitar a edição de textos.

Botão Centralização de Texto:

Seguimos os mesmos passos para o botão de Texto Sublinhado já descrito em outro tópico. E implementamos uma forma mais amistosa de visualização dos botões incluindo imagens, em vez de texto, na sua descrição.

Criamos uma nova macro:

<macro name="editor_aligncentro_button">
    <td class="nowrap">
        <button type="button" onclick="Nabble.insert('span style=display:block;text-align:center')" class="toolbar"
 style="height:1.65em" title="[t]Texto Centralizado[/t]">
            <img src="http://astronomia-e-astrofotos.1069742.n5.nabble.com/file/n1264/bt_center.png"/>
        </button>
        <n.tooltip use_title="true"/>
    </td>
</macro>

O código contendo a imagem para descrição do botão:
<img src="http://astronomia-e-astrofotos.1069742.n5.nabble.com/file/n1264/bt_center.png"/>

poderia ser substituído por um simples texto:

<macro name="editor_aligncentro_button">
    <td class="nowrap">
        <button type="button" onclick="Nabble.insert('span style=display:block;text-align:center')" class="toolbar"
 style="height:1.65em" title="[t]Texto Centralizado[/t]">
            Centrar
        </button>
        <n.tooltip use_title="true"/>
    </td>
</macro>

A vantagem de se usar uma imagem de 16 px por 16 px é de diminuir o tamanho do botão, e permitir uma maior quantidade deles para outras funções.

A desvantagem é de que não existindo uma imagem disponível nos servidores da Nabble, esta imagem tem que estar publicada em algum lugar. Eu publiquei em um album exclusivamente para isto, no próprio forum.

Para evitar que algum usuário acabe por mexer e destruir o publicado e criando problemas para o funcionamento do fórum, este album tem que ter as propriedades de permissão de usuário restrita. Qualquer outro grupo, que não seja Administrador ou Author, só pode ter permissão de visualização.

A permissão de visualização é fundamental para que as imagens apareçam para todos os grupos. Caso contrário o botão estará lá, executará a função mas não terá nenhuma figura.

Em seguida temos que editar a macro de nome: editor_toolbar, acrescentando as chamadas para as novas macros.

Eis como ficou a parte das chamadas na macro editor_toolbar para todas as alterações que fiz: do sublinhado ao centralizado, passando pelas cores de fonte.

...
                <n.editor_bold_button/>
                <n.editor_italic_button/>
                <n.editor_link_button/>
                <n.editor_smiley_button/>
                <n.editor_subheaders_button/>
                <n.editor_embed_button/>
                <n.editor_more_options_button/>

                <n.editor_underline_button/>
                <n.editor_fontevm_button/>
                <n.editor_fontevd_button/>
                <n.editor_fonteaz_button/>
                <n.editor_fonteam_button/>
                <n.editor_fontebr_button/>
                <n.editor_aligncentro_button/>
...

Botões de Cor de Fonte:

Limitei a um pequeno grupo: vermelho, verde, azul, amarelo e branco. E vou mostrar somente uma das macros. As outras são semelhantes, mudando apenas os textos e endereço da imagem para o botão. Os nomes das novas macros estão descrita acima, na edição da macro editor_toolbar.

<macro name="editor_fontevm_button">
    <td class="nowrap">
        <button type="button" onclick="Nabble.insert('font color=red')" class="toolbar"
 style="height:1.65em" title="[t]Texto Vermelho[/t]">
            <img src="http://astronomia-e-astrofotos.1069742.n5.nabble.com/file/n1264/bt_fontred.png"/>
        </button>
        <n.tooltip use_title="true"/>
    </td>
</macro>

Para cada botão de cor é necessário uma nova macro igual, e nela só se mudará o seu nome, o atributo para o código font color = red (para vermelho); green (para verde); blue (para azul); yellow (para amarelo); white (para branco). A descrição Texto Vermelho, e etc. e o endereço da imagem. Caso não se use uma imagem, pode-se usar um texto meneumonico tipo: vm, vd, az e etc.

A aparência final ficará assim:



As imagens para os botões foram:

                  

Devido ao fundo da página ser branco, a imagem para botão cor branca recebeu formatação de borda. Esta formatação só está na apresentação aqui, não se encontra na imagem. E para que fiquem bem enquadrado na barra de menu não podem exceder ao tamanho de 16 pixels x 16 pixels.
Observatório de Astronomia de Vilatur - W. Herschel
Saquarema - RJ - Brasil
http://www.astronomia.pousadavilatur.com.br