Acesso rápido
Últimos assuntos
REVOLUTIONSáb 26 Mar 2022 - 20:37hoanglongnhatbao
bl4{theme}Sáb 26 Mar 2022 - 9:50hoanglongnhatbao
Apresente-se no fórum dos temasQui 8 Set 2016 - 12:22Admin
Os temas do Fórum dos Temas agora são grátis!Dom 29 maio 2016 - 16:35ʂօpεɾ ოօʂმ3εძ
Quem você admira no forum dos temas?Ter 3 maio 2016 - 11:01Kae Lanzellotte
Esporte VerdeSex 11 Dez 2015 - 14:43Shek Crowley
Tema Facebook 2014Sáb 28 Nov 2015 - 11:07Admin
Qual tema usado nesses forum's ?Seg 29 Jun 2015 - 18:07Louro_Jose
Atualização do FDTTer 26 maio 2015 - 10:10Neimasinho
TEMASEIROS


Setembro/2010

Parceiros
Fórum dos Temas

Ir para baixo
JonasB.
JonasB.
Membro ativo
Mensagens : 179
Reputação : 6
Data de inscrição : 03/06/2012
Localização : São Paulo | São Paulo

Brasil Phpbb3
http://stickle.forumeiros.com/

[TUTORIAL] Widget "Bloco de notas" Empty [TUTORIAL] Widget "Bloco de notas"

Sex 22 Jun 2012 - 22:41
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.




--> Tutorial <--
Widget "Bloco de Notas"




1º - Inserindo o códgo CSS


(clique na imagem para aumentar)
[TUTORIAL] Widget "Bloco de notas" 1114

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:

/*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)
[TUTORIAL] Widget "Bloco de notas" Criar_10
[TUTORIAL] Widget "Bloco de notas" 110111 [TUTORIAL] Widget "Bloco de notas" 398853 Estrutura - Depois de aceder à "Configuração do portal", carregue em "Estrutura" da página do Portal que está a utilizar.
[TUTORIAL] Widget "Bloco de notas" 110210 [TUTORIAL] Widget "Bloco de notas" 398853 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)
[TUTORIAL] Widget "Bloco de notas" Fdfres10
[TUTORIAL] Widget "Bloco de notas" 110111 [TUTORIAL] Widget "Bloco de notas" 398853 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;
[TUTORIAL] Widget "Bloco de notas" 110210 [TUTORIAL] Widget "Bloco de notas" 398853 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;
[TUTORIAL] Widget "Bloco de notas" 110310 [TUTORIAL] Widget "Bloco de notas" 398853 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;
[TUTORIAL] Widget "Bloco de notas" 110410 [TUTORIAL] Widget "Bloco de notas" 398853 Fonte do widget - Aqui deverá colocar o código do Bloco de notas, código esse, que será fornecido nos passos seguintes;
[TUTORIAL] Widget "Bloco de notas" 110510 [TUTORIAL] Widget "Bloco de notas" 398853 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:




Conteúdo


src="https://2img.net/i/fa/admin/notepad-blue.png" width="265"
height="300">

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)
[TUTORIAL] Widget "Bloco de notas" 1170
[TUTORIAL] Widget "Bloco de notas" 110111 [TUTORIAL] Widget "Bloco de notas" 398853 Estrutura - Depois de aceder à "Configuração do portal", carregue em "Estrutura" da página do Portal que está a utilizar.
[TUTORIAL] Widget "Bloco de notas" 110210 [TUTORIAL] Widget "Bloco de notas" 398853 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.
[TUTORIAL] Widget "Bloco de notas" 110310 [TUTORIAL] Widget "Bloco de notas" 398853 "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)
[TUTORIAL] Widget "Bloco de notas" Tuto111

(clique na imagem para aumentar)
[TUTORIAL] Widget "Bloco de notas" Tuto210




--> FAQ <--
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 da imagem, abaixo a imagem é
    "https://2img.net/i/fa/admin/notepad-blue.png" (exemplo):






© Fórum dos Temas

[TUTORIAL] Widget "Bloco de notas" Act_bottom Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
Widget "Bloco de Notas"
Ir para o topo
Permissões neste sub-fórum
Não podes responder a tópicos