ραwη єvøłuŧiøη - єsŧαмøs dє Vøłŧα є Rєcruŧαηdø ŧαмbєм - Iηscrєvα-sє Já є єηŧrє ραrα ηøssα єquiρє!

    (CSS) Personalizar o fundo o 'Citar'

    Crowler †
    Crowler †
    Membro Novato
    Membro Novato

    Mensagens : 73
    Pontos : 114
    Reputação : 5
    Data de inscrição : 24/08/2012

    (CSS) Personalizar o fundo o 'Citar' Empty (CSS) Personalizar o fundo o 'Citar'

    Mensagem por Crowler † em 8/25/2012, 22:52

    [center]Ao adicionar os Citars como:
    [quote]Exemplo ![/quote]
    Agora poderá adicionar um fundo a ele !

    1º - Teremos de aceder à "Folha de estilo CSS":
    Para que possamos personalizar as caixas de texto do Fórum, é necessário adicionar códigos CSS para criarmos o efeito desejado, sendo assim, teremos de aceder a:
    Painel de Controle -> Visualização -> Imagens e cores -> Cores -> Folha de estilo CSS


    Segue a tua versão, pois cada versão tem um código diferente. referimos-nos ás versões: PhpBB 2, PhpBB 3, PunBB e Invision.


    2º - Ter uma noção de CSS me relação ás imagens:
    Antes de adicionarmos o código, temos de saber o que estamos a personalizar, pois não basta adicionar o link da imagem, melhor dizendo, temos de saber trabalhar a aparência.
    O que podemos utilizar para personalizar a nossa caixa de texto:

    background-color:
    Nesta propriedade apenas teremos de adicionar o código hexadecimal de uma cor, existe outros tipos, mas para não complicar, analisaremos desta forma.
    EXEMPLO escreveu:
    [hide][color:9dc1=black]background-color: #FF0000;[/color][/hide]

    background-image:
    Esta propriedade, é das principais, pois ela permitirá adicionar a imagem pretendida para que se possa ter uma imagem de fundo.
    EXEMPLO escreveu:
    [hide][color:9dc1=black]background-image: url(https://illiweb.com/bl/logo.png);[/color][/hide]

    background-repeat:
    Definirá se haverá repetição da imagem ou não (no-repeat), podendo esta repetição fazer-se somente na horizontal (repeat-x), na vertical (repeat-y) ou também nos dois planos (repeat).
    EXEMPLO escreveu:
    [hide][color:9dc1=black]background-repeat: no-repeat;[/color][/hide]

    background-attachment:
    Permitirá definir se a imagem toma uma posição de rolagem (scroll), sendo que estará sempre na mesma posição, independentemente do tamanho da caixa de texto, ou de fixagem (fixed), que fará com que a imagem fique na posição definida, mesmo que a caixa de texto aumente.
    EXEMPLO escreveu:
    [hide][color:9dc1=black]background-attachment: scroll;[/color][/hide]

    background-position:
    Para definir a posição da imagem, se no topo (top), em baixo (bottom), à esquerda (left), à direita (right) ao centro (center), ou então por definição de valores em percentagem (%) ou em píxeis (px).
    EXEMPLO escreveu:
    [hide][color:9dc1=black]background-position: bottom right;
    background-position: 2px 10px;[/color][/hide]
    Atenção pois quando é utilizado palavras deve a primeiras variar entre top/center/bottom e a segunda entre left/center/right.

    color:
    Poderá definir a cor da letra do campo de texto. Nesta propriedade apenas teremos de adicionar o código hexadecimal de uma cor,
    EXEMPLO escreveu:
    [hide][color:9dc1=black]color: #FF0000;[/color][/hide]

    font-size:
    Caso queira um tamanho de letra diferente. Nesta propriedade apenas teremos de adicionar o tamanho da letra, podendo ser em várias medias,
    EXEMPLO escreveu:
    [hide][color:9dc1=black]color: 10pt;[/color][/hide]

    font-family:
    Se pretender uma diferente. Nesta propriedade apenas teremos de adicionar o o nome das fontes, podendo serem separados por vérgulas caso tenha uma ordem de prioridade,
    EXEMPLO escreveu:
    [hide][color:9dc1=black]font-family Verdana, Geneva, sans-serif;[/color][/hide]




    3º - Agora deverão copiar o código correspondere à versão:
    Tendo em conta a versão, e como as classes variam consoante estas, deverse-à escolher a que se adequa ao Fórum onde será aplicada:

    PhpBB 2
    [hide][color:9dc1=black].quote {
    propriedades
    }[/color][/hide]


    PhpBB 3
    [hide][color:9dc1=black]blockquote {
    propriedades
    }[/color][/hide]



    PunBB
    [hide][color:9dc1=black].postmain blockquote {
    propriedades
    }[/color][/hide]


    Invision
    [hide][color:9dc1=black]blockquote cite {
    propriedades
    }[/color]
    [/hide]
    /!\ É recomendavel que para a versão invision utilize propriedades de background-image, somente background-color não daria um efeito bem desejado

    4º - Vejamos um exemplo:
    Neste exemplo que é usado no FdF, iremos personalizar a caixa de quote num Fórum com versão PhpBB 3.

    Código:
    [hide][color:9dc1=black]blockquote {
    border-color: #8EBBDF;
    background-color: #D2E4F2;
    }[/color][/hide]
    Resultado:
    [img][Você precisa estar registrado e conectado para ver este link.]



    [center][img][Você precisa estar registrado e conectado para ver este link.]
    [img][Você precisa estar registrado e conectado para ver este link.]

      Tópicos similares

      -

      Data/hora atual: 8/22/2019, 03:35