PHP | MySQL | HTML | CSS | Javascript
-
Pessoal,
Nesse tutorial irei explicar como atualizar uma tradução do Invision Power Board 4.3.x.
Realize o download da tradução no site oficial da IPS, vou usar como exemplo essa. Vá no ADMIN > Customizações > Idiomas Localize o idioma desejado, clique na seta para baixo e clique em UPLOAD DE NOVA VERSÃO. Localize o arquivo que fez o download em seu computador e faça o upload (não se esqueça de descompactar!). É só enviar e aproveitar ? Espero que tenham gostado, é bem fácil. O processo é o mesmo para TEMA, PLUGIN e HOOK.
- 2.602 visualizações
- 2 comentários
Por 403 - ForbiddeenEnviado -
-
Information: test Danger: test2 Warning: test3 Success: test4 General: test5 12345 This is an error message.
<div class="ipsMessage ipsMessage_info"> <strong>Information:</strong> test </div> <div class="ipsMessage ipsMessage_error"> <strong>Danger:</strong> test2 </div> <div class="ipsMessage ipsMessage_warning"> <strong>Warning:</strong> test3 </div> <div class="ipsMessage ipsMessage_success"> <strong>Success:</strong> test4 </div> <div class="ipsMessage ipsMessage_general"> <strong>General:</strong> test5 </div> <div class='ipsMessage ipsMessage_error'> <span class='ipsMessage_code'>12345</span> This is an error message. </div>
- 1.810 visualizações
- 0 comentários
Por GGames DevOpsEnviado -
Endereços Absolutos e Relativos
URL (de Uniform Resource Locator), em português Localizador de Recursos Universal, é o endereço dos sites. É aquele endereço que todos estamos habituados a colocar na barra de endereços do navegador de internet.
Pode-se linkar para outras páginas usando URLs absolutos ou relativos.
URL's absolutos
Um URL absoluto contém o caminho completo para a localização do ficheiro do site que se pretende.
Se por exemplo você quisesse abrir uma página chamada naka.html, que se encontrava no interior de uma pasta chamada "forum", e esta pasta se encontrava na raiz do seu site, então o URL absoluto seria:
É preferível o uso de URL's absolutos em páginas que possam mudar de posição na estrutura de pastas do site. Dessa forma se a página que contém os links mudar de pasta, os links vão continuar a funcionar.
URLs relativos
Um URL relativo indica apenas o caminho a percorrer desde a posição em que estamos.
Se por exemplo estivéssemos na página camoes.html (que se encontra dentro da pasta "poetas") e quiséssemos linkar para trás para a página principal (para a página index.html da raiz do site), então o URL relativo seria:
os dois pontos, seguidos de uma barra, dizem ao browser para subir um nível na hierarquia na estrutura de pastas do site.
O URL relativo permite que o site possa ser testado offline, quando tivermos as pastas e os ficheiros html no disco duro. Desta forma os links vão funcionar se abrirmos as páginas do site a partir do disco
Links Âncora (ou Marcadores)
Um link âncora (ou marcador) é um link interior, é um link para dentro da própria página. É um link que leva o visitante para outra secção da mesma página
(em vez de o levar para outra página ou site).
1- Para fazer um link âncora primeiro você deve ir ao local do seu código HTML para onde você quer que o link aponte. Este é o local para onde o seu visitante será encaminhado quando clicar no link âncora. Nesse local defina o seguinte código de link com o atributo "name":
"nome1" é o nome da âncora que você escolhe.
2 - Agora para linkar para aquele local da página, use a tag para links, e no endereço é só colocar cardinal seguido do nome escolhido para a âncora:
Link para E-mail
Para criar um link que permite que os seus visitantes lhe enviem e-mails basta colocar a função "mailto" na tag de link:
Mudar as Cores dos Links
Por defeito os links têm a cor azul. Mas você pode alterar as cores usando o código "link" no interior da tag <body> . Exemplo:
link - cor dos links, vermelho neste caso
vlink - links visitados, verde neste caso
alink - links ativos, amarelo neste caso
Você pode também usar os códigos HEX para definir estas cores
- 2.875 visualizações
- 0 comentários
Por NakamuraEnviado -
Inserir Imagens em Links
Para fazer com que os visitantes possam ser levados para outra página ao clicar numa imagem, basta juntar o código HTML para imagem e o código HTML para links (que vamos abordar a seguir):
Inserir Links
A tag para se inserir links é <a href=https://ggames.com.br">Nome do Link</a>.
O resultado deste código seria:
O resultado deste código seria:
Nakamura Perfil
Abrir links em Novas Janelas
Se você não quer que as pessoas abandonem o seu site quando clicarem nos links, você pode definir seus links para abrirem numa nova janela com o atributo "target='_blank'":
- 1.318 visualizações
- 0 comentários
Por NakamuraEnviado -
Imagens de Fundo e Cores de Fundo
Cor de Fundo
Para usar cores de fundo deve-se procurar uma combinação entre a cor de fundo e a cor do texto que não dificulte a leitura. Normalmente as cores de fundo claras funcionam bem com uma cor de texto escura.
Para usar uma cor de fundo na sua página você deve usar o seguinte código dentro da tag <body>:
Pode também utilizar os códigos HEX para definir as cores que combinem melhor.
Inserir uma Imagem de Fundo
Se você quiser definir uma imagem de fundo use o seguinte código:
Lembre-se que "fotos/imagem.jpg" é a localização do ficheiro da imagem. Trata-se de um URL relativo que aponta para a pasta "fotos" que está no seu site. Pode também usar um URL absoluto, que pode também apontar para o seu site ou então para outra imagem localizada algures na internet. Um exemplo do código da imagem de fundo com URL absoluto é:
Inserir Imagens
A tag para se inserir imagens é <img src="imagem.jpg"> .
Deve-se ter em atenção que o endereço da imagem a introduzir em "src" deve ter em conta a pasta onde a imagem está arquivada no servidor. Assim se a nossa página estiver na raiz, e a imagem estiver numa pasta chamada "fotos", a nossa tag para aquela imagem deveria ser:
Atributo "alt"
O atributo "alt" deve ser usado para quando queremos que um texto apareça sempre que passarmos o rato sobre a imagem. Este texto também aparece como texto descritivo quando a exibição das imagens não está ativa. A tag fica:
Definir Altura e Largura
Para a largura usa-se o atributo "width" e para altura o "height". Podem-se definir os valores em pixels ou em percentagem:
Definir Altura e Largura
Para a largura usa-se o atributo "width" e para altura o "height". Podem-se definir os valores em pixels ou em percentagem:
Múltiplos Atributos
Se quisermos definir as dimensões da imagem, um contorno, e um texto "alt", podemos definir a tag com todos esses atributos. A ordem em que os colocamos não é importante:
- 1.437 visualizações
- 0 comentários
Por NakamuraEnviado -
Bom como o conteúdo sobre o HTML é muito grande vou dividir esse tópico em partes do básico ate aonde eu souber kk ❤️
Noções Básicas sobre HTML
O código HTML é composto por TAGS (ou comandos), que são usadas no inicio e no final do texto que vai ser afetado pelo código. Uma tag de inicio é por exemplo a tag <b> que é usada para colocar uma porção de texto em negrito. A tag de fecho correspondente será </b> que será usada no final desse texto que queremos formatar. Assim, se quisermos colocar em negrito a palavra "Olá!" na frase abaixo, então o código HTML fica:
e o resultado será:
Estrutura Básica do Código HTML de um Documento
Comece por definir o layout básico do documento. Pode copiar e colar este código no "Bloco de Notas" ou outro editor de texto:
As tags <html> e </html> dizem ao navegador de internet aonde começa e aonde acaba o código HTML.
As tags <title> e </title> dizem ao browser qual é o título da página. O título pode ser visto identificando o respectivo separador no seu navegador de internet. O texto que for definido entre estas tags também é normalmente o texto que é usado como título pelos motores de busca quando apresentam as páginas nos resultados de uma pesquisa.
A tag <meta name="description" ...> é informação que pode ser útil para os motores de busca. Eles podem usar o que você escreveu na descrição para descrever a página quando ela é apresentada nos resultados de uma pesquisa. Ou então, por vezes, os motores de busca usam também uma porção aleatória do que estiver no <body> da sua página.
A tag <meta name="keywords" ...> também pode ser usada pelos motores de busca na indexação da página. Coloque as palavras chave separadas por virgulas no interior desta tag.
Entre as tags <body> e </body> é colocado o conteúdo da página, que é o que é visualizado no browser.
Após inserir os códigos HTML e o conteúdo pretendido, deve-se guardar o ficheiro com a extensão ".html". Ou seja, damos-lhe um nome e acrescentamos a extensão ".html". Ficariamos por exemplo com o ficheiro "index.html". Depois disso, para visualizar a página no browser basta clicar sobre o ficheiro.
Tags Básicas para Fonte e Texto
Itálico: <i>texto</i>
Sublinhado: <u>texto</u>
Negrito: <b>texto</b>
Texto Riscado: <s>texto</s>
Novo Parágrafo: <p>texto</p>
Esta tag inicia um novo parágrafo introduzindo uma linha em branco entre o novo parágrafo e o anterior.
Quebra de linha: <br>
Esta tag faz com que o texto que vier a seguir mude para a linha seguinte. Introduzir esta tag duas vezes seguidas faz o mesmo efeito que a tag de parágrafo.
Centrar: <center>texto</center>
Alinhar texto à esquerda: <p align="left">texto</p>
Alinhar texto à direita: <p align="right">texto</p>
Mudar cor do texto: <font color="red">texto</font>
Pode também utilizar os códigos HEX para definir as mais variadas cores. Por exemplo para definir vermelho em vez red podia usar o código HEX para o vermelho que seria #FF0000.
Mudar a fonte: <font face="Arial">texto</font>
Mudar o tamanho: <font size="2">texto</font>
(escolher entre 1 e 7)
Pode-se formatar um texto usando várias tags em simultâneo. Assim, por exemplo eu posso formatar um texto em negrito, itálico e sublinhado, colocando todas as tags ao mesmo tempo, acumulando os efeitos:
Resultado:
Nakamura
Créditos: Nakamura
- 1.347 visualizações
- 0 comentários
Por NakamuraEnviado -
Com seu Bloco de Notas aberto, escreva seu código HTML como preferir.
Agora quando salvar
"Salvar como"
Coloque o nome do arquivo e .html
- 1.709 visualizações
- 0 comentários
Por NakamuraEnviado -
Antes de tudo faça backup do seu tema.
Passo 1:
Vá até o ACP > Customization > Themes e escolha o tema que quer editar
Passo 2:
Procure por postContainer no template
Passo 3:
Procure por:
<li class='cAuthorPane_photo'> {template="userPhoto" app="core" group="global" params="$comment->author(), 'large', $comment->warningRef()"} </li>
Passo 4:
Substitua por:
<li class='cAuthorPane_photo'> {template="userPhoto2" app="core" group="global" params="$comment->author(), 'variable', $comment->warningRef()"} </li>
Passo 5:
Crie um novo HTML Template
Name: UserPhoto2
Variables:
$member, $size='small', $warningRef=NULL, $classes='', $hovercard=TRUE Location: Add To an existing location
Existing Location: front
Group: Add to an existing group
Existing Group: global
Passo 6:
Encontre HTML template "UserPhoto2" e cole o seguinte código nele
{{if $member->member_id and \IPS\Member::loggedIn()->canAccessModule( \IPS\Application\Module::get( 'core', 'members' ) )}} {{$memberURL = ( $warningRef ) ? $member->url()->setQueryString( 'wr', $warningRef ) : $member->url();}} <a href="{$memberURL}" {{if $hovercard}}data-ipsHover data-ipsHover-target="{$memberURL->setQueryString( 'do', 'hovercard' )}"{{endif}} class="ipsUserPhoto ipsUserPhoto_{$size}{{if $classes}} {$classes}{{endif}}" title="{lang="view_user_profile" sprintf="$member->name"}"> <img src='{{if $member->pp_main_photo}}{file="$member->pp_main_photo"}{{else}}{file="$member->photo"}{{endif}}' alt='{$member->name}'> </a> {{else}} <span class='ipsUserPhoto ipsUserPhoto_{$size} {{if $classes}}{$classes}{{endif}}'> <img src='{file="$member->photo"}' alt='{$member->name}'> </span> {{endif}}
Passo 7:
Na aba do CSS encontre o custom.css e cole o seguinte código no final do mesmo
.ipsUserPhoto_variable img, img.ipsUserPhoto_variable, .ipsUserPhoto_variable:after { width: 170px; {{if theme.rounded_photos}} border-radius: 0px; {{endif}} }
Salve tudo e atualize a pagina do fórum e vá até um tópico e veja se deu certo
- 2.272 visualizações
- 0 comentários
Por GGames DevOpsEnviado -
Bom hoje vou mostrar a vocês como personalizar os grupos do seu fórum ❤️
1º Va no HTML de seu tema e procuro pela código "ipsWidget_inner ipsPad"
2º Siga o caminho: Core > Widgets
3º Escolha o Widget que deseja modificar
6º Insira o código
Obs: esse é um código simples como exemplo de texto a ser colocado, você pode editar como os códigos do grupo do seu fórum
- 2.737 visualizações
- 0 comentários
Por NakamuraEnviado -
Entre no Admin CP > Customização > Temas > Editar HMTL e CSS > Guia CSS > Abra custom.css
.ipsTags a[href*="/tags/microsoft/"], a.ipsTag_prefix[href*="/tags/microsoft/"] { background: SeaGreen !important; } html[dir="ltr"] .ipsTags a[href*="/tags/microsoft/"]:before, html[dir="ltr"] a.ipsTag_prefix[href*="/tags/microsoft/"]:before { border-color: transparent Seagreen transparent transparent !important; } Mude "microsoft" pelas tags existentes no seu forum
Mude "SeaGreen" por outro código Hexa (#xxxxxx) para alterar a cor
- 1.231 visualizações
- 0 comentários
Por GemadaoTVEnviado -
Pessoal, esse tutorial é bem fácil, vou ensina-los a instalar um APP no Invision Power Board 4.x.x.
1. Vá até o MARKET PLACE da Invision Power Board - https://invisioncommunity.com/files/
2. Selecione o APP desejado - Se for pago, tem que comprar rs
3. Clique em DOWNLOAD e aceite os TERMOS.
4. Após realizar o download do .ZIP vá no ADMIN CP > Recursos do Site > Aplicativos
5. Click em INSTALAR (lá na parte superior).
6. Descompacte o arquivo .ZIP e selecione o arquivo .TAR dentro da pasta e em seguida clique em INSTALAR.
7. Prontinho, agora é só usar como desejar.
Tutorial de minha autoria ?
- 1.043 visualizações
- 0 comentários
Por 403 - ForbiddeenEnviado -
Pessoal, nesse tutorial irei explicar como mover a publicidade que fica no início da SIDEBAR para o final dela.
Também é possível colocar duas publicidades, uma no início e outra no final, como eu fiz no GGames.
Enfim, vamos ao tutorial.
Vá em Customização > Aparência > Temas Agora clique em EDITAR CÓDIGO Utilize o sistema de busca e SIDEBAR, você encontrará o arquivo correto em CORE > GLOBAL > SIDEBAR Localize {advertisement="ad_sidebar"} e inseria depois de {template="widgetContainer" group="global" app="core" params="'sidebar', 'vertical'"} - Se você quiser um encima e outro embaixo, copie e cole ao invés de recortar e colar. Caso seu anúncio fique muito colado com a sidebar, crie uma DIV com um padding-top de 10px para dar espaço. <div class="google_center_div"style="padding-top:10px"> <center>{advertisement="Sidebar"}</center> </div>
É isso, espero que tenham gostado, curtam e compartilhem, Tutorial de minha autoria.
- 1.135 visualizações
- 0 comentários
Por 403 - ForbiddeenEnviado -
Fala pessoal,
Esse é oficialmente meu primeiro tutorial no GGames para Invision Power Board. Faz tempo que não mexo nele, mas um amigo perguntou como criar uma regra simples no qual após eu alcançar um determinado número de posts, sou promovido.
Ressaltando que estou usando a tradução do Painel.
1. Vá em MEMBROS > GRUPOS
2. Crie os grupos desejados - são 2, no caso qual é o padrão e qual será o 'upgrade' que o grupo padrão receberá após alcançar um determinado número de posts. Usarei MEMBROS e ELITE como exemplo.
3. Feito isso, vá em MEMBROS > PROMOÇÕES DE GRUPOS e clique em CRIAR NOVO.
4. Em NOME, informe o título do upgrade e em TOTAL DE POSTAGENS, insira o valor desejado, selecione também o grupo que será MOVIDO em AÇÕES > MOVER PARA O GRUPO.
Após realizar as mudanças, é só salvar. Para ter certeza da regra faça um teste simples... crie ela e deixe apenas 1 post. Se mover deu certo, aí altera o valor para o desejado.
Lembrando que dá para ir além, como pode ver escolher datas específicas, por reputações etc etc.
Créditos: 403 Forbiddeen - GGames Forums
- 1.248 visualizações
- 0 comentários
Por 403 - ForbiddeenEnviado
