Isto é uma pré-visualização de um tema em Hitskin.com
Instalar o tema • Voltar para a ficha do tema
Criar Widget da forma exemplo
2 participantes
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre a aparência do fórum :: Questões resolvidas sobre a aparência do fórum
Página 1 de 1
Criar Widget da forma exemplo
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
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 ..
Re: Criar Widget da forma exemplo
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!
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!
Re: Criar Widget da forma exemplo
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 !
Re: Criar Widget da forma exemplo
Olá,
Vamos criar a estrutura do widget primeiro. Crie um novo widget personalizado com o código abaixo
Até mais!
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!
Re: Criar Widget da forma exemplo
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
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
Re: Criar Widget da forma exemplo
Olá,
Poderia me passar o código com as suas alterações, para eu fazer as futuras alterações em cima dele?
Até mais!
Poderia me passar o código com as suas alterações, para eu fazer as futuras alterações em cima dele?
Até mais!
Re: Criar Widget da forma exemplo
- 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>
Re: Criar Widget da forma exemplo
Olá,
Substitua o seu código por esse
Até mais!
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!
Re: Criar Widget da forma exemplo
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 ,
Re: Criar Widget da forma exemplo
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 ,
Re: Criar Widget da forma exemplo
Olá,
Substitua o código por esse
Até mais!
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!
Re: Criar Widget da forma exemplo
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!
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!
Re: Criar Widget da forma exemplo
Questão abandonadaEsta 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. |
Convidado- Convidado
Tópicos semelhantes
» Criar um pop up como no exemplo abaixo
» Widget em forma de slide
» Tem alguma forma de fazer um widget...
» Existe forma de criar forums de anuncios
» Como criar sub-fórum em forma de link??
» Widget em forma de slide
» Tem alguma forma de fazer um widget...
» Existe forma de criar forums de anuncios
» Como criar sub-fórum em forma de link??
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre a aparência do fórum :: Questões resolvidas sobre a aparência do fórum
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos