Entrar
Os membros mais ativos do mês
Nenhum usuário |
Quem está conectado?
Há 8 usuários online :: 0 registrados, 0 invisíveis e 8 visitantes Nenhum
[ Ver toda a lista ]
O recorde de usuários online foi de 23 em Seg Jun 08, 2020 3:43 am
Últimos assuntos
[TUTORIAL] Widget "Bloco de notas"
Web ASA Fórum | Oficial :: Geral :: :: Serviços Web Sites :: Suporte Forumeiros :: Forumeiros & Você :: Tutoriais, dicas e astúcias :: Widgets e módulos personalizados
Página 1 de 1
[TUTORIAL] Widget "Bloco de notas"
Neste tutorial você irá aprender como pode fazer um "bloco de notas" igual ao que possui em seu Painel de Controle mas, que o mesmo seja impossível de ser editado pelos membros, somente através da Gestão dos Widgets.
Os pontos de maior relevância do mesmo é o facto de, o administrador poder deixar recados para os membros, convidados e moderadores ou, até mesmo os administradores, dependendo do modo de permissão que escolher.
1º - Inserindo o códgo CSS
Para que o bloco funcionar correctamente, você deverá adicionar um código CSS na sua folha de estilos para que ela não apresente problemas:
Painel de Controle -> Visualização -> Imagens e Cores -> Cores
Selecciona o separador Folha de estilo CSS, e cole o seguinte código:
Após adcionado, não se esqueça de clicar em Validar para salvar as alterações no código CSS.
2º - Teremos de criar um widget personalizado, pois somente poderemos aplicar este método a widgets editáveis;
Painel de Controle -> Módulos -> Portal & Widgets -> Configuração do portal
Depois terá de escolher:
Estrutura -> Criar um widget personalizado
3º - Teremos de configurar a aparência do nosso Widget:
4º - Agora teremos de aplicar o conteúdo no widget. Copie exactamente como está em baixo, para poder distinguir, quais as partes que terá de modificar;
Agora que já colocamos o código no widget, vamos modificar os conteúdos:
- Conteúdo -> Aqui você deverá escrever todos os anúncios que deseja adicionar a este "Bloco de Notas".
5º - Agora teremos de colocar o widget criado, na estrutura do Portal.
Para isso terá de aceder a:
Painel de Controle -> Módulos -> Portal & Widgets -> Configuração do portal -> Estrutura
6º - O resultado final em uma imagem:
Os pontos de maior relevância do mesmo é o facto de, o administrador poder deixar recados para os membros, convidados e moderadores ou, até mesmo os administradores, dependendo do modo de permissão que escolher.
--> Tutorial <--
Widget "Bloco de Notas"
Widget "Bloco de Notas"
1º - Inserindo o códgo CSS
(clique na imagem para aumentar)
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
Para que o bloco funcionar correctamente, você deverá adicionar um código CSS na sua folha de estilos para que ela não apresente problemas:
Painel de Controle -> Visualização -> Imagens e Cores -> Cores
Selecciona o separador Folha de estilo CSS, e cole o seguinte código:
- Código: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
/*Notepad*/
.notepad {
margin: 0px auto 15px;
width: 265px
}
.notepad-content .notepad-box {
width: 265px;
position: relative;
height: 300px
}
.notepad-content #notepad {
border-right: transparent 1px dotted;
border-top: transparent 1px dotted;
background: none transparent scroll repeat 0% 0%;
left: 25px;
overflow: auto;
border-left: transparent 1px dotted;
width: 211px;
border-bottom: transparent 1px dotted;
position: absolute;
top: 61px;
height: 218px;
cursor: default;
}
Após adcionado, não se esqueça de clicar em Validar para salvar as alterações no código CSS.
2º - Teremos de criar um widget personalizado, pois somente poderemos aplicar este método a widgets editáveis;
Painel de Controle -> Módulos -> Portal & Widgets -> Configuração do portal
Depois terá de escolher:
Estrutura -> Criar um widget personalizado
(carregue na imagem para aumentar)
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] | Estrutura - Depois de aceder à "Configuração do portal", carregue em "Estrutura" da página do Portal que está a utilizar. |
Criar um widget personalizado - Terá de carregar neste botão para poder criar o seu novo widget; |
3º - Teremos de configurar a aparência do nosso Widget:
(carregue na imagem para aumentar)
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
Nome do widget - Terá de colocar um título para o widget, de forma a poder identifica-lo na lista dos widgets pessoais do Painel de Controle; |
Utilizar um table type - Escolhe a opção "Não", para que o widget, não apresente nenhuma estrutura, ou, poderá escolher "sim para que tenha a estrutura dos Widgets do seu fórum; |
Título do widget - Neste campo, terá de atribuir um título, o que será visualizado no seu fórum. Caso tenha marcado a opção acima, colocar ou não será indiferente; |
Fonte do widget - Aqui deverá colocar o código do Bloco de notas, código esse, que será fornecido nos passos seguintes; |
Salvar - Por fim, após colocar o código, terá de "salvar" o seu widget personalizado. E mantenha-se na mesma página. |
4º - Agora teremos de aplicar o conteúdo no widget. Copie exactamente como está em baixo, para poder distinguir, quais as partes que terá de modificar;
- Código normal que iremos utilizar:
<div class="notepad"><div class="notepad-content"><div class="notepad-box"><span id="notepad">
Conteúdo
</span><img src="https://2img.net/i/fa/admin/notepad-blue.png" width="265" height="300"></div></div></div>
Agora que já colocamos o código no widget, vamos modificar os conteúdos:
- Conteúdo -> Aqui você deverá escrever todos os anúncios que deseja adicionar a este "Bloco de Notas".
5º - Agora teremos de colocar o widget criado, na estrutura do Portal.
Para isso terá de aceder a:
Painel de Controle -> Módulos -> Portal & Widgets -> Configuração do portal -> Estrutura
(carregue na imagem para aumentar)
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
Estrutura - Depois de aceder à "Configuração do portal", carregue em "Estrutura" da página do Portal que está a utilizar. |
Widget personalizado - Depois de entrar na estrutura da página, terá de localizar o widget personalizado, que se encontra no separador "Widgets pessoais", por baixo da matriz do Portal. |
"Salvar" Portal - Agora que está localizado o widget, mova-o para a matriz do Portal, através do método drag&drop (arrastar e soltar). Depois de efectuar essa acção, terá de carregar em "salvar", para que o Portal seja actualizado. |
6º - O resultado final em uma imagem:
Utilizando table type | Não utilizando table type |
(clique na imagem para aumentar) [Tens de ter uma conta e sessão iniciada para poderes visualizar este link] | (clique na imagem para aumentar) [Tens de ter uma conta e sessão iniciada para poderes visualizar este link] |
--> FAQ <--
Widget "Bloco de Notas"
Widget "Bloco de Notas"
- O que posso colocar no local: "Conteúdo"?
Poderá colocar todo o tipo de conteúdos, desde textos normais, textos formatados, códigos multimédia, etc, todo o tipo de conteúdos. - Mas, terá de ser em códigos HTML específicamente?
Sim, como estamos utilizando um Widget, teremos de trabalhar a base de tags HTML pois as demais não serão aceitas.
- Posso adicionar quantos Widgets deste eu quiser?
Pode, mas quando adiciona o mesmo Widget mais de uma vez no Portal, um se torna a cópia do outro, ou seja o conteúdo de ambos será igual.
Mas caso queira adicionar conteúdos diferenciados terá de criar mais Widgets para tal, assim terá de repetir o tutorial a partir do passo dois em diante.
- Posso utilizar outras imagens?
Sim, mas pode ser a sua imagem não se encaixe como deve no Widget para tal terá de criar um tópico no fórum "Problemas com um script" para que possamos adequar o código a sua imagem. - Onde devo altera-la?
A imagem pode ser alterada atravéz do código HTML fornecido no passo de número 4. Nelas bastará alterar o valor que está em vermelho/negrito:[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]" width="265" height="300">
© Fórum dos Fóruns
Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: [Dúvida] Widget "Bloco de Notas" |
Tópicos semelhantes
» [TUTORIAL] Criar um "Widget duplo"
» [TUTORIAL] Widget com conteúdos aleatórios
» [TUTORIAL] Criar um widget de parceiros
» [TUTORIAL] Adicionar fóruns à um widget
» [TUTORIAL] Widget que oculta conteúdo
» [TUTORIAL] Widget com conteúdos aleatórios
» [TUTORIAL] Criar um widget de parceiros
» [TUTORIAL] Adicionar fóruns à um widget
» [TUTORIAL] Widget que oculta conteúdo
Web ASA Fórum | Oficial :: Geral :: :: Serviços Web Sites :: Suporte Forumeiros :: Forumeiros & Você :: Tutoriais, dicas e astúcias :: Widgets e módulos personalizados
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos
|
|
Dom Jun 24, 2012 11:15 am por Alisson Silva
» [Re-Apresentação] Fábio
Sex maio 25, 2012 4:45 pm por Fábio
» PixelZIP ~ design&programção em só lugar
Sex maio 25, 2012 4:44 pm por Fábio
» Pedido de logo
Dom maio 20, 2012 10:06 am por Alisson Silva
» Kernel - Apresentação
Sáb maio 19, 2012 9:49 am por Alisson Silva
» [Galeria] Gabriel Schiavi - Atualizado (20/02 - !5:21)
Sáb maio 19, 2012 9:48 am por Alisson Silva
» HEBBO HOTEL 24 HORAS ONLINE !!
Sex maio 04, 2012 7:20 pm por Alisson Silva
» Pedido de Layout
Sex maio 04, 2012 5:23 pm por Fonsecca
» [RESOLVIDO]TV CCE HPS 2071-D (IMAGEM SÓ EMBAIXO, ACIMA, LINHAS DE RETRAÇO E FAIXA PRÊTA NO TOPO DA TELA).
Qua Abr 11, 2012 4:07 pm por Fry
» [contato] Deixo aqui meus contatos virtuais
Qua Abr 11, 2012 3:25 pm por Fry