Criar Widget da forma exemplo

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Atendido / Resolvido Criar Widget da forma exemplo

Mensagem por EDU2010 em 09.06.19 17:45

Detalhes da questão


Endereço do fórum: https://www.canalinterativoonline.com/
Versão do fórum: ModernBB

Descrição


Quero criar Widgets assim como os da foto :

Imagem + descrição do Tópico e com o botão LER MAIS ,

EXEMPLO

Criar Widget da forma exemplo  Sem_tz73


Desta forma do exemplo ,
1 Widget com imagem do lado esquerdo e descrição do lado direito e outro com a imagem a direita e descrição do lado esquerdo ..

Link de onde vi

https://templated.co/retrospect


Obrigado ..
EDU2010

EDU2010
Usuário experiente

Masculino
Inscrito dia : 09/12/2010
Mensagens : 2210
Pontos Ativos : 3460

Ver perfil do usuário http://passarinhos.forumeiros.com/forum.htm

Atendido / Resolvido Re: Criar Widget da forma exemplo

Mensagem por EDU2010 em 11.06.19 3:07

Se alguém puder ajudar com a criação , agradeço !
EDU2010

EDU2010
Usuário experiente

Masculino
Inscrito dia : 09/12/2010
Mensagens : 2210
Pontos Ativos : 3460

Ver perfil do usuário http://passarinhos.forumeiros.com/forum.htm

Atendido / Resolvido Re: Criar Widget da forma exemplo

Mensagem por AquilesD. em 12.06.19 12:05

Olá,

Você quer os widget de forma editável, ou deseja eles como os últimos assuntos, só com o design igual a imagem disponibilizada?

Até mais!


Criar Widget da forma exemplo  WpZJdpr
Bem-vindo(a) ao Fórum dos Fóruns Convidado!
Leia as Regras do Fórum dos Fóruns (FDF) e o Regulamento do setor de Suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a clicando no botão resolvido para organizar o fórum.
AquilesD.

AquilesD.
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 10/02/2012
Mensagens : 5993
Pontos Ativos : 7714

Ver perfil do usuário https://ajuda.forumeiros.com

Atendido / Resolvido Re: Criar Widget da forma exemplo

Mensagem por EDU2010 em 13.06.19 4:21

@AquilesD. escreveu:Olá,

Você quer os widget de forma editável, ou deseja eles como os últimos assuntos, só com o design igual a imagem disponibilizada?

Até mais!


Se for de ultimos assuntos é melhor ainda e muito , espero resposta !
EDU2010

EDU2010
Usuário experiente

Masculino
Inscrito dia : 09/12/2010
Mensagens : 2210
Pontos Ativos : 3460

Ver perfil do usuário http://passarinhos.forumeiros.com/forum.htm

Atendido / Resolvido Re: Criar Widget da forma exemplo

Mensagem por EDU2010 em 16.06.19 22:07

Se alguém poder ajudar ?!
EDU2010

EDU2010
Usuário experiente

Masculino
Inscrito dia : 09/12/2010
Mensagens : 2210
Pontos Ativos : 3460

Ver perfil do usuário http://passarinhos.forumeiros.com/forum.htm

Atendido / Resolvido Re: Criar Widget da forma exemplo

Mensagem por AquilesD. em 21.06.19 15:09

Olá,

Vamos criar a estrutura do widget primeiro. Crie um novo widget personalizado com o código abaixo

Código:
<div class="imgref">
   <img class="imgref1" alt="Trem" src="http://www.vale.com/brasil/PT/aboutvale/news/PublishingImages/1foto_trem_Efvm.jpg" />
</div>
<div class="titulo">
   Aqui será adicionado o título
</div><br><br>
<div class="desctop">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div><br><br>
<a href="/forum" target="_self"><button class="bottom" name="button">LER MAIS!</button></a>
<style>
img.imgref1 {
    width: 300px;
    height: 251px;
    float: left;
    padding: 5px;
}
.titulo {
    padding: 10px;
    color: black;
    font-weight: bold;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 20px;
}
.desctop {
    float: right;
    max-width: 451px;
    margin-top: -40px;
}
button.bottom {
    padding: 4px;
    border: 3px solid #1f6bd8;
    border-radius: 14px;
    width: 104px;
    height: 41px;
    font-family: 'Roboto Condensed', sans-serif;
    color: #1f6bd8;
    font-weight: bold;
    margin-top: 12px;
}
button.bottom:hover {
    border: 3px solid #2e61ab;
    text-decoration: underline;
}
</style>

Até mais!


Criar Widget da forma exemplo  WpZJdpr
Bem-vindo(a) ao Fórum dos Fóruns Convidado!
Leia as Regras do Fórum dos Fóruns (FDF) e o Regulamento do setor de Suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a clicando no botão resolvido para organizar o fórum.
AquilesD.

AquilesD.
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 10/02/2012
Mensagens : 5993
Pontos Ativos : 7714

Ver perfil do usuário https://ajuda.forumeiros.com

Atendido / Resolvido Re: Criar Widget da forma exemplo

Mensagem por EDU2010 em 22.06.19 1:15

Criei amigo , a função ler mais não funcionou e não ficou bem ajustado , também não ficou como o modelo , uma publicação a cada lado , veja la .. Esta no portal

E se ela atualizasse a cada publicação que faço em uma categoria como o Widget ( novidades ) seria top hein ! fico no aguardo ...



https://www.canalinterativoonline.com/


Obrigado
EDU2010

EDU2010
Usuário experiente

Masculino
Inscrito dia : 09/12/2010
Mensagens : 2210
Pontos Ativos : 3460

Ver perfil do usuário http://passarinhos.forumeiros.com/forum.htm

Atendido / Resolvido Re: Criar Widget da forma exemplo

Mensagem por AquilesD. em 22.06.19 2:20

Olá,

Poderia me passar o código com as suas alterações, para eu fazer as futuras alterações em cima dele? 

Até mais!


Criar Widget da forma exemplo  WpZJdpr
Bem-vindo(a) ao Fórum dos Fóruns Convidado!
Leia as Regras do Fórum dos Fóruns (FDF) e o Regulamento do setor de Suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a clicando no botão resolvido para organizar o fórum.
AquilesD.

AquilesD.
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 10/02/2012
Mensagens : 5993
Pontos Ativos : 7714

Ver perfil do usuário https://ajuda.forumeiros.com

Atendido / Resolvido Re: Criar Widget da forma exemplo

Mensagem por EDU2010 em 22.06.19 2:41

Código:
<br />
<div class="imgref">
     <img src="https://i.servimg.com/u/f71/20/00/24/55/spider10.jpg" alt="Trem" class="imgref1" />
</div>
<div class="titulo">
     O Rei Leão
</div><br /><br />
<div class="desctop">
     Simba (Donald Glover) é um jovem leão cujo destino é se tornar o rei da selva. Entretanto, uma armadilha elaborada por seu tio Scar (Chiwetel Ejiofor) faz com que Mufasa (James Earl Jones), o atual rei, morra ao tentar salvar o filhote. Consumindo pela culpa, Simba deixa o reino rumo a um local distante, onde encontra amigos que o ensinam a mais uma vez ter prazer pela vida.
</div><br /><br /><a target="_self" href="https://www.canalinterativoonline.com/t281-o-rei-leao-4#289"></a>
<button style="" name="button" class="bottom">
   LER MAIS!
</button><a target="_self" href="https://www.canalinterativoonline.com/t281-o-rei-leao-4#289"></a><style>
img.imgref1 {
    width: 300px;
    height: 251px;
    float: left;
    padding: 5px;
}
.titulo {
    padding: 10px;
    color: black;
    font-weight: bold;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 20px;
}
.desctop {
    float: right;
    max-width: 451px;
    margin-top: -40px;
}
button.bottom {
    padding: 4px;
    border: 3px solid #1f6bd8;
    border-radius: 14px;
    width: 104px;
    height: 41px;
    font-family: 'Roboto Condensed', sans-serif;
    color: #1f6bd8;
    font-weight: bold;
    margin-top: 12px;
}
button.bottom:hover {
    border: 3px solid #2e61ab;
    text-decoration: underline;
}
</style>
EDU2010

EDU2010
Usuário experiente

Masculino
Inscrito dia : 09/12/2010
Mensagens : 2210
Pontos Ativos : 3460

Ver perfil do usuário http://passarinhos.forumeiros.com/forum.htm

Atendido / Resolvido Re: Criar Widget da forma exemplo

Mensagem por EDU2010 em 24.06.19 1:39

Alguém pra ajudar ?!!?! obrigadooo
EDU2010

EDU2010
Usuário experiente

Masculino
Inscrito dia : 09/12/2010
Mensagens : 2210
Pontos Ativos : 3460

Ver perfil do usuário http://passarinhos.forumeiros.com/forum.htm

Atendido / Resolvido Re: Criar Widget da forma exemplo

Mensagem por AquilesD. em 24.06.19 1:59

Olá,

Poderia adicioná-lo novamente no fórum?

Até mais!


Criar Widget da forma exemplo  WpZJdpr
Bem-vindo(a) ao Fórum dos Fóruns Convidado!
Leia as Regras do Fórum dos Fóruns (FDF) e o Regulamento do setor de Suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a clicando no botão resolvido para organizar o fórum.
AquilesD.

AquilesD.
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 10/02/2012
Mensagens : 5993
Pontos Ativos : 7714

Ver perfil do usuário https://ajuda.forumeiros.com

Atendido / Resolvido Re: Criar Widget da forma exemplo

Mensagem por EDU2010 em 24.06.19 16:06

Esta la já amigo
EDU2010

EDU2010
Usuário experiente

Masculino
Inscrito dia : 09/12/2010
Mensagens : 2210
Pontos Ativos : 3460

Ver perfil do usuário http://passarinhos.forumeiros.com/forum.htm

Atendido / Resolvido Re: Criar Widget da forma exemplo

Mensagem por AquilesD. em 24.06.19 17:11

Olá,

Substitua o seu código por esse

Código:
<div class="newmodule"><br />
<div class="imgref">
    <img src="https://i.servimg.com/u/f71/20/00/24/55/spider10.jpg" alt="Trem" class="imgref1" />
</div>
<div class="titulo">
    O Rei Leão
</div><br /><br />
<div class="desctop">
    Simba (Donald Glover) é um jovem leão cujo destino é se tornar o rei da selva. Entretanto, uma armadilha elaborada por seu tio Scar (Chiwetel Ejiofor) faz com que Mufasa (James Earl Jones), o atual rei, morra ao tentar salvar o filhote. Consumindo pela culpa, Simba deixa o reino rumo a um local distante, onde encontra amigos que o ensinam a mais uma vez ter prazer pela vida.
</div><br /><br /><form method="get" action="https://www.canalinterativoonline.com/t281-o-rei-leao-4#28"><button type="submit" class="bottom">LER MAIS!</button></form>
</div><style>
img.imgref1 {
    width: 350px!important;
    height: 251px!important;
    float: left;
    padding: 5px;
}
.titulo {
    padding: 10px;
    color: black;
    font-weight: bold;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 20px;
}
.desctop {
    float: right;
    max-width: 451px;
    margin-top: -40px;
}
button.bottom {
    padding: 4px;
    border: 3px solid #1f6bd8;
    border-radius: 14px;
    width: 104px;
    height: 41px;
    font-family: 'Roboto Condensed', sans-serif;
    color: #1f6bd8;
    font-weight: bold;
    margin-top: 12px;
}
button.bottom:hover {
    border: 3px solid #2e61ab;
    text-decoration: underline;
}
</style>

Até mais!


Criar Widget da forma exemplo  WpZJdpr
Bem-vindo(a) ao Fórum dos Fóruns Convidado!
Leia as Regras do Fórum dos Fóruns (FDF) e o Regulamento do setor de Suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a clicando no botão resolvido para organizar o fórum.
AquilesD.

AquilesD.
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 10/02/2012
Mensagens : 5993
Pontos Ativos : 7714

Ver perfil do usuário https://ajuda.forumeiros.com

Atendido / Resolvido Re: Criar Widget da forma exemplo

Mensagem por EDU2010 em 24.06.19 22:57

Queria que o ´´ LER MAIS `` ficasse a direita , e não da forma que esta a esquerda , do resto falta outro códido que seria o avesso ,
EDU2010

EDU2010
Usuário experiente

Masculino
Inscrito dia : 09/12/2010
Mensagens : 2210
Pontos Ativos : 3460

Ver perfil do usuário http://passarinhos.forumeiros.com/forum.htm

Atendido / Resolvido Re: Criar Widget da forma exemplo

Mensagem por EDU2010 em 27.06.19 23:47

Queria que o ´´ LER MAIS `` ficasse a direita , e não da forma que esta a esquerda , do resto falta outro códido que seria o avesso ,
EDU2010

EDU2010
Usuário experiente

Masculino
Inscrito dia : 09/12/2010
Mensagens : 2210
Pontos Ativos : 3460

Ver perfil do usuário http://passarinhos.forumeiros.com/forum.htm

Atendido / Resolvido Re: Criar Widget da forma exemplo

Mensagem por AquilesD. em 28.06.19 11:48

Olá,

Substitua o código por esse

Código:
<div class="newmodule">
    <br>
   <div class="imgref">
          <img src="https://i.servimg.com/u/f71/20/00/24/55/dengue11.jpg" alt="Trem" class="imgref1">
   </div>
   
   <div class="titulo">
          Dengue 
   </div><br><br>
   <div class="desctop">
          Com o início do inverno – que ocorreu oficialmente nesta sexta-feira (21) –, a tendência é que haja uma queda nos casos de dengue, uma vez que o clima frio ajuda a diminuir a proliferação do Aedes aegypti, mosquito transmissor da doença.
   </div><br><br>
   <form method="get" action="https://www.canalinterativoonline.com/t285-aguai-vargem-e-casa-branca-tem-maiores-indices-de-dengue">
      
      <button type="submit" class="bottom" style="float: right;">
          LER MAIS!
      </button>
      
   </form>
</div>

Até mais!


Criar Widget da forma exemplo  WpZJdpr
Bem-vindo(a) ao Fórum dos Fóruns Convidado!
Leia as Regras do Fórum dos Fóruns (FDF) e o Regulamento do setor de Suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a clicando no botão resolvido para organizar o fórum.
AquilesD.

AquilesD.
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 10/02/2012
Mensagens : 5993
Pontos Ativos : 7714

Ver perfil do usuário https://ajuda.forumeiros.com

Atendido / Resolvido Re: Criar Widget da forma exemplo

Mensagem por EDU2010 em 28.06.19 19:22

E como trocar a cor ou modelo da imagem , Ler mais ?
EDU2010

EDU2010
Usuário experiente

Masculino
Inscrito dia : 09/12/2010
Mensagens : 2210
Pontos Ativos : 3460

Ver perfil do usuário http://passarinhos.forumeiros.com/forum.htm

Atendido / Resolvido Re: Criar Widget da forma exemplo

Mensagem por AquilesD. em 28.06.19 19:26

Olá,

As alterações podem ser efetuadas diretamente no código, procure por "button.bottom {", você irá encontrar o código CSS da personalização do botão, só alterar de acordo da forma que desejar.
Se quiser um exemplo específico, posso efetuar a personalização seguindo a forma que desejar.

Até mais!


Criar Widget da forma exemplo  WpZJdpr
Bem-vindo(a) ao Fórum dos Fóruns Convidado!
Leia as Regras do Fórum dos Fóruns (FDF) e o Regulamento do setor de Suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a clicando no botão resolvido para organizar o fórum.
AquilesD.

AquilesD.
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 10/02/2012
Mensagens : 5993
Pontos Ativos : 7714

Ver perfil do usuário https://ajuda.forumeiros.com

Atendido / Resolvido Re: Criar Widget da forma exemplo

Mensagem por Roger123 em 04.07.19 14:48

Questão abandonada


Esta questão foi abandonada pelo seu autor, mas foi considerada resolvida pela equipa de suporte.


De acordo com o regulamento do setor de suporte, Art. 5/Deveres, tópicos com 5 dias serão arquivados. Apesar de abandonado, este tópico tem uma solução e portanto será marcado como resolvido e movido para o arquivo de questões resolvidas.


Seja bem-vindo ao Fórum dos Fóruns!
Veja aqui alguns links importantes a saber:



Roger123 - Ajudeiro

Criar Widget da forma exemplo  Pmb0kx10
Roger123

Roger123
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 30/06/2018
Mensagens : 1402
Pontos Ativos : 1694

Ver perfil do usuário https://todosostemas.forumeiros.com

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo


Permissão deste fórum:
Você não pode responder aos tópicos neste fórum