Template:NavBox: Difference between revisions

From RPGWiki
Jump to navigationJump to search
No edit summary
 
(34 intermediate revisions by the same user not shown)
Line 1: Line 1:
<includeonly>{| class="wikitable" style="background-color:#{{{cor-esquerda}}}; width: 100%;"
<includeonly>{| class="wikitable" style="background-color:{{{cor-esquerda|#EEF3E2}}}; width: {{{width|100%}}};"
|- style="text-align:left;"
|style="text-align: left; vertical-align: center; width: {{{tamanho|114px}}};"|[[File:{{{imagem}}}|{{{imagem-tamanho|30px}}}]] '''{{{nome|{{cor|{{{cor-esquerda|#EEF3E2}}}||}}}}}'''
|style="text-align: center; width: {{{tamanho}}};"|[[File:{{{imagem}}}|30px]] '''{{{nome}}}'''
|style="background:{{{cor-direita|#F6F9ED}}};"|{{{texto|{{cor|red||'''''Que tal incluir um texto aqui?'''''}}}}}
|style="background:#{{{cor-direita}}};"|{{{texto}}}
|}</includeonly><noinclude>Cria '''caixas de navegação''' com função informativa podendo conter links para outras páginas. Usada para criar templates com essas características.
|}</includeonly>
<noinclude>Cria '''Caixas de Navegação''' com função informativa, ocupando 100% da largura da página.
==Exemplo==
==Exemplo==
Isso:
<blockquote><pre>{{NavBox
|width          = 100%
|cor-esquerda  = #EEF3E2
|cor-direita    = #F6F9ED
|tamanho        = 114px
|nome          = Lorem ipsum
|imagem        = Info.png
|imagem-tamanho = 30px
|texto          = {{lorem ipsum}}
}}</pre></blockquote>
É exibido assim:
<blockquote>
{{NavBox
{{NavBox
|cor-esquerda=EEF3E2
|width          = 100%
|cor-direita=F6F9ED
|cor-esquerda   = #EEF3E2
|tamanho=12%
|cor-direita   = #F6F9ED
|nome=Lorem ipsum
|tamanho       = 114px
|imagem=Info.png
|nome           = Lorem ipsum
|texto="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
|imagem         = Info.png
}}
|imagem-tamanho = 30px
|texto         = {{lorem ipsum}}
}}</blockquote>
==Uso==
==Uso==
Para usar esse template copie o trecho de código a seguir.
Para usar esse template copie o trecho de código a seguir.
{{Tlx|NavBar|{{Tlx-meta|cor-esquerda}}{{Tlx-meta|cor-direita}}{{Tlx-meta|tamanho}}{{Tlx-meta|nome}}{{Tlx-meta|imagem}}{{Tlx-meta|texto}}}}
<pre>{{NavBox
|width          =
|cor-esquerda   =
|cor-direita   =
|tamanho       =
|nome           =
|imagem        =
|imagem-tamanho =
|texto         =
}}</pre>
Onde:
Onde:
* '''cor-esquerda''' e '''cor-direita''' devem fornecer códigos de cores HTML, sem #.
* '''width''' é a largura da NavBox. O padrão, isto é, quando o parâmetro é omitido, é de 100%.
* '''tamanho''' deve ser fornecido em porcentagem.
* '''cor-esquerda''' e '''cor-direita''' devem fornecer códigos de cores HTML, lembr-se de incluir o # na frente.
* '''tamanho''' é a largura da coluna da esquerda, deve ser fornecido em porcentagem (%) ou em pixels (px).
* '''nome''' é o nome que vai aparecer na coluna da esquerda.
* '''nome''' é o nome que vai aparecer na coluna da esquerda.
* '''imagem''' é o nome da imagem e sua extensão.
* '''imagem''' é o nome da imagem e sua extensão.
* '''imagem-tamanho''' é o tamanho da imagem em pixels. Se omitido o valor padrão será 30px. Inserir "px".
* '''texto''' é o texto que vai aparecer na coluna da direita.
* '''texto''' é o texto que vai aparecer na coluna da direita.
{{códigos de cores}}


Para produzir o exemplo acima, nós usamos:
[[Category:Meta-Templates]]</noinclude>
{{Tlx|NavBox|{{Tlx-meta|cor-esquerda|EEF3E2}}{{Tlx-meta|cor-direita|F6F9ED}}{{Tlx-meta|tamanho|12%}}{{Tlx-meta|nome|Lorem ipsum}}{{Tlx-meta|imagem|Info.png}}{{Tlx-meta|texto|"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."}}}}
[[Category:Template]]</noinclude>

Latest revision as of 15:00, 26 March 2022

Cria caixas de navegação com função informativa podendo conter links para outras páginas. Usada para criar templates com essas características.

Exemplo

Isso:

{{NavBox
|width          = 100%
|cor-esquerda   = #EEF3E2
|cor-direita    = #F6F9ED
|tamanho        = 114px
|nome           = Lorem ipsum
|imagem         = Info.png
|imagem-tamanho = 30px
|texto          = {{lorem ipsum}}
}}

É exibido assim:

Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Uso

Para usar esse template copie o trecho de código a seguir.

{{NavBox
|width          =
|cor-esquerda   =
|cor-direita    =
|tamanho        =
|nome           =
|imagem         =
|imagem-tamanho =
|texto          =
}}

Onde:

  • width é a largura da NavBox. O padrão, isto é, quando o parâmetro é omitido, é de 100%.
  • cor-esquerda e cor-direita devem fornecer códigos de cores HTML, lembr-se de incluir o # na frente.
  • tamanho é a largura da coluna da esquerda, deve ser fornecido em porcentagem (%) ou em pixels (px).
  • nome é o nome que vai aparecer na coluna da esquerda.
  • imagem é o nome da imagem e sua extensão.
  • imagem-tamanho é o tamanho da imagem em pixels. Se omitido o valor padrão será 30px. Inserir "px".
  • texto é o texto que vai aparecer na coluna da direita.

Códigos de cores HTML

Aqui tem uma tabela com as principais cores, seus nomes e códigos HTML:

Cor Hexadecimal Cor Hexadecimal
black #000000 silver #c0c0c0
gray #808080 white #ffffff
maroon #800000 red #ff0000
purple #800080 fuchsia #ff00ff
green #008000 lime #00ff00
olive #808000 yellow #ffff00
navy #000080 blue #0000ff
teal #008080 aqua #00ffff

Uma grande lista de nomes e códigos de cores pode ser encontrada na Flextool.