Como criar modelos de design para o IPB

Escrito por todd campitelli | Traduzido por milene hermenegildo
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como criar modelos de design para o IPB
Crie skins para o IPB (typing on a computer keyboard image by TEMISTOCLE LUCARELLI from Fotolia.com)

Nos últimos 10 anos, a Invision Power Services Inc. vem fazendo o Invision Power Board, comumente referido como IPB, um software de fórum baseado em PHP e MySQL, que tem sido usado nos sites de comunidade de entidades como NASA, NBC, O'Reilly e Skype. Criar sua própria skin, ou modelo de design, para o IPB requer um pouco de HTML e muito conhecimento de CSS. No entanto, construindo sua própria skin personalizada, pode personalizar completamente a aparência do seu fórum.

Nível de dificuldade:
Moderado

Outras pessoas estão lendo

O que você precisa?

  • Programa de FTP
  • Editor de CSS
  • Editor de imagem

Lista completaMinimizar

Instruções

  1. 1

    Criar um quadro de desenvolvimento. Ao fazer uma nova skin para o IPB, o melhor é começar com uma nova instalação do fórum. Isso garantirá que, se você cometer erros, não afetará seu fórum principal. Coloque uma nova instalação do Invision Power Board em seu hospedeiro de web ou em seu hospedeiro local, usando um aplicativo de servidor, como o XAMPP.

  2. 2

    Popule seu fórum com algumas mensagens de teste e dados. Deve-se adicionar alguns testes para que você possa ver como as alterações de estilo irão afetá-lo. No mínimo, tenha um fórum normal, um de redirecionamento, um subfórum e um fórum bloqueado. Crie postagens, incluindo uma postagem fechada, uma movida, uma não aprovada, uma nova, uma para ser lida, uma destacada e uma de anúncio.

  3. 3

    Entre no painel de controle administrativo. Clique na guia "Looks & Feel". Isso mostrará uma lista de skins já instaladas.

  4. 4

    Clique no botão "New Template", no cabeçalho da tabela. No campo "drop-down" que aparece, dê um nome novo para a sua skin. Quando o modelo for criado, clique no nome dele para ir para a página de skins.

  5. 5

    Clique no botão "Edit Settings" e defina "Cache CSS to text file" para "Yes". Isso ajudará a acelerar seu desenvolvimento em CSS.

  6. 6

    Encontre o número de identificação do novo modelo. Clique em "Edit Settings" novamente e verifique a URL no navegador. No final da URL, deve haver um número. Esse é o número de identificação da sua skin.

  7. 7

    Baixe sua folha de estilo. Abra o programa de FTP e navegue até a instalação do fórum. Na raiz do fórum, sua folha de estilo está localizada em "/style_images/css_ID.css", onde ID é o número de identificação da folha de estilo.

  8. 8

    Edite a folha de estilo. Usando o editor de CSS favorito, adicione e modifique as tags e as regras de CSS a seu gosto.

  9. 9

    Quando terminar de editar, volte para o menu "Looks & Feel" do fórum. Selecione sua skin nova e, em seguida, selecione "Drop Menu". Sob esse menu, selecione "Edit Stylesheet Advanced Mode". Copie e cole o CSS do editor na caixa de texto da página de folha de estilo. Salve as alterações.

  10. 10

    Crie imagens que correspondam à aparência do quadro. Comece baixando um conjunto de imagens de referência. Pode-se encontrá-las na raiz do fórum, na pasta "style_images". Baixe essa pasta para sua área de trabalho e mude seu nome para coincidir com o nome da skin que você está criando.

  11. 11

    Trabalhe com as imagens, editando-as em um editor de imagens ou criando a sua própria. Mantenha o mesmo nome da imagem para ter certeza de que tudo é carregado corretamente quando fizer o upload da nova pasta de imagem para o fórum.

  12. 12

    Faça o upload da nova pasta de imagens na pasta "style_images" e atribua-a pelo seu conjunto de skins. Você pode atribuir as imagens navegando para o modelo na aba "Looks & Feels" e selecionando a opção de editar as configurações. No campo "Use Image Directory?" escolha o nome da pasta que acabou de enviar.

  13. 13

    Personalize ainda mais o HTML do fórum, selecionando "Edit template HTML" no menu "Looks & Feel". Isso mostrará uma lista de todos os modelos usados ​​na criação do quadro. Para editá-lo, basta navegar para o modelo que deseja alterar e modifique o HTML. Quando terminar a edição, selecione o botão "Save Template Bit".

Dicas & Advertências

  • Quando terminar de editar, é melhor ver suas modificações em alguns navegadores, para garantir que o fórum aparece como você deseja para todos os visitantes.
  • Sempre faça uma pasta de backup de imagens, folhas de estilo e HTML antes de começar a editá-los, para que possa revertê-las se cometer um erro.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível