Criação de portal com link

Detalhes da questão

Endereço do fórum: http://wbcforum.com
Versão do fórum: phpBB2

Descrição

Quando a gente entra na página de vocês tem três coisas que podem ser clicadas que são:. Suporte, Novidades e Serviços. Como eu crio um link assim? Eu quero colocar na primeira página, quando a pessoa acessa o fórum para ela escolher, por exemplo, a pessoa escolhe frutas, e quando a pessoa clicar a pessoa vai direto no tópico onde ela deve postar. Eu tenho recebido muita reclamação de gente que ora não faz a inscrição porque não sabe como usar o fórum, ora quem está inscrito nunca posta, porque não sabe onde postar, por favor, me ajudem a montar essa página inicial como a de vocês dando essa direção ao público alvo

Olá,

Seguindo as orientações deste tópico (clique), crie um código na mensagem da página inicial com o código:

Código:

<div class="cards">
   <!-- -->
   <!-- Botões abaixo:
   <!-- Configure os links entre as aspas do atributo "href".
   <!-- -->
   <a class="btn1" href="TOPICO_DE_FRUTAS">Frutas</a>
   <a class="btn2" href="TOPICO_DE_OUTRA_COISA">Outros</a>
   <a class="btn3" href="TOPICO_PARA_OUTROS_FINS">Qqr coisa</a>
   
   <!-- Estilos -->
   <style type="text/css">
      body {
         font-size: 17px;
         font-family: "Open Sans", sans-serif;
      }

      div.cards {
         width: 90%;
         display: -webkit-box;
         display: -ms-flexbox;
         display: flex;
         -ms-flex-pack: distribute;
               justify-content: space-around;
         margin: auto;
         padding: 15px 0px;
      }
      div.cards, div.cards * {
         box-sizing: border-box;
      }
      div.cards a {
         width: 30%;
         background-color: #39c;
         padding: 20px 30px;
         padding-bottom: 23px;
         display: inline-block;
         color: #fff;
         font-size: 22px;
         box-shadow: inset 0px -3px rgba(0, 0, 0, 0.2);
         text-decoration: none;
      }
      div.cards a.btn1 {
         background-color: green;
      }
      div.cards a.btn2 {
         background-color: red;
      }
      div.cards a.btn3 {
         background-color: orange;
      }
   </style>
</div>

A senhora pode conferir o resultado aqui:
-> https://codepen.io/0Luiz/pen/BRWgoK?editors=1000

o/

---

Tópico movido de 'Outras questões' para 'Questões sobre códigos'.

Tem como colocar tudo cinza e branco como no forum amado?
<div class="cards">
<!-- -->
<!-- Botões abaixo:
<!-- Configure os links entre as aspas do atributo "href".
<!-- -->
<a class="btn1" href="Forum Information">Forum Information</a>
<a class="btn2" href="Agriculture">Agriculture</a>
<a class="btn3" href="Food & Beverage">Food & Beverage</a>
<a class="btn4" href="Apparel, Textiles & Accessories">Apparel, Textiles & Accessories</a>
<a class="btn5" href="Gold and Precious Stones">Gold and Precious Stones</a>
<a class="btn6" href="Auto & Transportation">Auto & Transportation</a>
<a class="btn7" href="Beauty & Personal Care">Beauty & Personal Care</a>
<a class="btn8" href="Construction & Real Estate">Construction & Real Estate</a>
<a class="btn8" href="Metallurgy & Chemicals">Metallurgy & Chemicals</a>
<a class="btn9" href="Packaging, Advertising & Office">Packaging, Advertising & Office</a>
<a class="btn10" href="Investment Worldwide">Investment Worldwide</a>
<a class="btn11" href="Black List/Good List">Black List/Good List</a>
<a class="btn12" href="Non Business Things">Non Business Things</a>

<!-- Estilos -->
<style type="text/css">
body {
font-size: 17px;
font-family: "Open Sans", sans-serif;
}

div.cards {
width: 90%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: distribute;
justify-content: space-around;
margin: auto;
padding: 15px 0px;
}
div.cards, div.cards * {
box-sizing: border-box;
}
div.cards a {
width: 30%;
background-color: #39c;
padding: 20px 30px;
padding-bottom: 23px;
display: inline-block;
color: #fff;
font-size: 22px;
box-shadow: inset 0px -3px rgba(0, 0, 0, 0.2);
text-decoration: none;
}
div.cards a.btn1 {
background-color: green;
}
div.cards a.btn2 {
background-color: red;
}
div.cards a.btn3 {
background-color: orange;
}
div.cards a.btn4 {
background-color: blue;
}
div.cards a.btn5 {
background-color: grey;
}
div.cards a.btn6 {
background-color: purple;
}
div.cards a.btn7 {
background-color: lime;
}
div.cards a.btn8 {
background-color: golden;
}
div.cards a.btn9 {
background-color: gold;
}
</style>
</div>

Tem sim, troque por:

Código:

<div class="cards">
<!-- -->
<!-- Botões abaixo:
<!-- Configure os links entre as aspas do atributo "href".
<!-- -->
<a class="btn1" href="Forum Information">Forum Information</a>
<a class="btn2" href="Agriculture">Agriculture</a>
<a class="btn3" href="Food & Beverage">Food & Beverage</a>
<a class="btn4" href="Apparel, Textiles & Accessories">Apparel, Textiles & Accessories</a>
<a class="btn5" href="Gold and Precious Stones">Gold and Precious Stones</a>
<a class="btn6" href="Auto & Transportation">Auto & Transportation</a>
<a class="btn7" href="Beauty & Personal Care">Beauty & Personal Care</a>
<a class="btn8" href="Construction & Real Estate">Construction & Real Estate</a>
<a class="btn8" href="Metallurgy & Chemicals">Metallurgy & Chemicals</a>
<a class="btn9" href="Packaging, Advertising & Office">Packaging, Advertising & Office</a>
<a class="btn10" href="Investment Worldwide">Investment Worldwide</a>
<a class="btn11" href="Black List/Good List">Black List/Good List</a>
<a class="btn12" href="Non Business Things">Non Business Things</a>
 
<!-- Estilos -->
<style type="text/css">
div.cards {
width: 90%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: distribute;
justify-content: space-around;
flex-wrap: wrap;
padding: 15px 0px;
background-color: #f5f5f5;
border: solid 1px #ddd;
border-bottom: solid 2px #ddd;
border-radius: 3px;
margin: 10px auto
}
 
div.cards, div.cards * {
box-sizing: border-box;
}
 
div.cards a {
width: 30%;
background-color: #39c;
padding: 20px 30px;
padding-bottom: 23px;
display: inline-block;
color: #fff;
font-size: 22px;
box-shadow: inset 0px -3px rgba(0, 0, 0, 0.2);
text-decoration: none;
margin-bottom: 10px;
}
 
div.cards a.btn1 {
background-color: green;
}
 
div.cards a.btn2 {
background-color: red;
}
 
div.cards a.btn3 {
background-color: orange;
}
 
div.cards a.btn4 {
background-color: blue;
}
 
div.cards a.btn5 {
background-color: grey;
}
 
.cards a.btn6 {
background-color: purple;
}
 
div.cards a.btn7 {
background-color: lime;
}
 
div.cards a.btn8 {
background-color: golden;
}
 
div.cards a.btn9 {
background-color: gold;
}
</style>
</div>

o/

Luiz só mais uma coisa, por favor, por favor, que cada um desses seja de uma cor diferente, por favor, para trazer vida, por favor

Mas eles já estão com cores diferentes...
Também, qual a URL de seu fórum? É essa? http://forum.wbcforum.com/

Por que se for, não vejo o código ativo em seu fórum.

o/

Como eu ativo esse código? Cores diferentes que eu digo é que tem muitos da mesma cor azul, e eu coloco outra cor, e continua azul Estou olhando aqui antes de colocar amado
https://codepen.io/0Luiz/pen/BRWgoK?editors=1000

Todo dia eu tenho inscrição no forum de gente nova, mas o povo diz que não posta pq não sabe onde postar, não sei mais o que fazer para deixar mais visível isso

Olá,

Ative o código seguindo as orientações do código abaixo:
-> https://ajuda.forumeiros.com/t17210-faq-criar-e-gerir-a-mensagem-na-home-page

Quanto às cores, cada botão tem uma classe, por exemplo

btn1

, que corresponde ao primeiro botão.
Para personalizar cada um deles, no código acima, procure por

</style>

, e antes disso, cole um código como este:

Código:

.btn1 {
  background-color: red!important;
}

Ele irá modificar o fundo do primeiro botão para vermelho, pois definimos, entende?

o/

e quando você clica no link da cor aparece 404
This page couldn't be found.
You can return to the index.
Não vai direto para a categoria entende?

Isso é por que no código, cada botão tem um atributo

href

.
Você deve colocar a URL de cada categoria, em cada botão. Por exemplo, um botão que leva ao fdf, seria:

Código:

<a class="btn1" href="http://ajuda.forumeiros.com/forum">Forum Information</a>

o/

Nossa, agora eu entendi, estou aprendendo isso...Se eu quiser colocar tudo em uma cor só qual código que eu uso? Vou começar a trabalhar nisso amado, muito obrigada e quando eu terminar eu volto para colocar como resolvido ou tirar mais alguma dúvida

Procure por

</style>

, e antes, adicione o código:

Código:

div.cards a {
  background-color: red!important;
}

O código acima irá mudar todas as cores para vermelho.

o/

https://codepen.io/0Luiz/pen/BRWgoK?editors=1000

Luiz como eu coloco pequenos quadrados um do lado do outro ao invés de apenas três grandes

Para ficar igual a esse http://forum.wbcforum.com/ que tem inscrito home, calendar, Gallery, neste tamanho e seguimento

Olá,

Troque por:

Código:

<div class="cards">
<!-- -->
<!-- Botões abaixo:
<!-- Configure os links entre as aspas do atributo "href".
<!-- -->
<a class="btn1" href="Forum Information">Forum Information</a>
<a class="btn2" href="Agriculture">Agriculture</a>
<a class="btn3" href="Food & Beverage">Food & Beverage</a>
<a class="btn4" href="Apparel, Textiles & Accessories">Apparel, Textiles & Accessories</a>
<a class="btn5" href="Gold and Precious Stones">Gold and Precious Stones</a>
<a class="btn6" href="Auto & Transportation">Auto & Transportation</a>
<a class="btn7" href="Beauty & Personal Care">Beauty & Personal Care</a>
<a class="btn8" href="Construction & Real Estate">Construction & Real Estate</a>
<a class="btn9" href="Metallurgy & Chemicals">Metallurgy & Chemicals</a>
<a class="btn10" href="Packaging, Advertising & Office">Packaging, Advertising & Office</a>
<a class="btn11" href="Investment Worldwide">Investment Worldwide</a>
<a class="btn12" href="Black List/Good List">Black List/Good List</a>
<a class="btn13" href="Non Business Things">Non Business Things</a>
 
<!-- Estilos -->
<style type="text/css">
div.cards {
width: 90%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: distribute;
justify-content: center;
flex-wrap: wrap;
padding: 15px 0px;
background-color: #f5f5f5;
border: solid 1px #ddd;
border-bottom: solid 2px #ddd;
border-radius: 3px;
margin: 10px auto
}
 
div.cards, div.cards * {
box-sizing: border-box;
}
 
div.cards a {
width: auto;
background-color: #39c;
padding: 20px 30px;
padding-bottom: 23px;
display: inline-block;
color: #fff;
font-size: 22px;
box-shadow: inset 0px -3px rgba(0, 0, 0, 0.2);
text-decoration: none;
margin-bottom: 10px;
margin-left: 10px
}
 
div.cards a.btn1 {
background-color: green;
}
 
div.cards a.btn2 {
background-color: red;
}
 
div.cards a.btn3 {
background-color: orange;
}
 
div.cards a.btn4 {
background-color: blue;
}
 
div.cards a.btn5 {
background-color: grey;
}
 
.cards a.btn6 {
background-color: purple;
}
 
div.cards a.btn7 {
background-color: lime;
}
 
div.cards a.btn8 {
background-color: gold;
}
 
div.cards a.btn9 {
background-color: pink;
}
   
div.cards a.btn10 {
background-color: orangered;
}
   
div.cards a.btn11 {
background-color: crimson;
}
   
div.cards a.btn12 {
background-color: darkcyan;
}
   
div.cards a.btn13 {
background-color: magenta;
}
</style>
</div>

Aproveitei e já coloquei uma cor diferente para cada.

o/

Amado eu estou fazendo aqui olha: https://codepen.io/0Luiz/pen/BRWgoK?editors=1000
Eu estou colocando os tópicos para a pessoa clicar e ir parar direto na página onde ela tem que psotar, para não ficarem abrindo tópicos desnecessários, mas eu preciso diminuir o tamanho, deixar quadradinhos pequenos para caber todos os tópicos entende

Aqui está:
-> https://codepen.io/0Luiz/pen/BRWgoK?editors=1000

o/

http://forum.wbcforum.com/
Olha como está ficando, assim a pessoa já clica no produto e já vai parar onde ela deve postar, o negócio que eu tenho que diminuir e muito esse tamanho do quadrado onde fica o nome do produto para não ficar muito grande entende?

Troque o código por:

Código:

<div class="cards">
<!-- -->
<!-- Botões abaixo:
<!-- Configure os links entre as aspas do atributo "href".
<!-- -->
<a class="btn1" href="http://forum.wbcforum.com/t58-soybeans-here">Soybeans</a>
<a class="btn2" href="http://forum.wbcforum.com/t413-organic-beans">Organic Beans</a>
<a class="btn3" href="http://forum.wbcforum.com/t415-peas-discussions-here">Peas</a>
<a class="btn4" href="http://forum.wbcforum.com/t410-kidney-beans">Kidney Beans</a>
<a class="btn5" href="http://forum.wbcforum.com/t419-lima-beans">Lima Beans</a>
<a class="btn6" href="http://forum.wbcforum.com/t418-butter-beans">Butter Beans</a>
<a class="btn7" href="http://forum.wbcforum.com/t417-broad-beans">Broad Beans</a>
<a class="btn8" href="http://forum.wbcforum.com/t416-black-beans">Black Beans </a>
<a class="btn8" href="http://forum.wbcforum.com/t414-mung-beans">Mung Beans</a>
<a class="btn9" href="http://forum.wbcforum.com/t412-lentils-here">Lentils</a>
<a class="btn10" href="http://forum.wbcforum.com/t411-vigna-beans">Vigna Beans</a>
<a class="btn11" href="http://forum.wbcforum.com/t223-chickpeas-here">Chickpeas</a>
<a class="btn12" href="http://forum.wbcforum.com/t45-cocoa-beans-here">Cocoa Beans</a>
<a class="btn10" href="http://forum.wbcforum.com/t395-silos-thread">Silos</a>
<a class="btn11" href="http://forum.wbcforum.com/t454-robusta-coffee-beans-here">Robusta Coffee Beans</a>
<a class="btn12" href="http://forum.wbcforum.com/t453-java-coffee-beans-here">Java Coffee Beans</a>
<a class="btn11" href="http://forum.wbcforum.com/t452-liberica-coffee-beans-here">Liberica Coffee Beans</a>
<a class="btn12" href="http://forum.wbcforum.com/t59-arabica-coffee-beans-here">Arabica Coffee Beans</a>
<a class="btn12" href="http://forum.wbcforum.com/t440-animal-oil-here">Animal Oil</a>
<a class="btn12" href="http://forum.wbcforum.com/t439-seasoning-oil-here">Seasoning Oil</a>
<a class="btn12" href="http://forum.wbcforum.com/t438-ginger-oil-here">Ginger Oil</a>
<a class="btn12" href="http://forum.wbcforum.com/t437-camellia-oil-here">Camellia Oil</a>
<a class="btn12" href="http://forum.wbcforum.com/t436-castor-oil-here">Castor Oil</a>
<a class="btn12" href="http://forum.wbcforum.com/t435-sesame-oil-here">Sesame Oil</a>
<a class="btn12" href="http://forum.wbcforum.com/t434-rapeseed-oil-here">Rapeseed Oil</a>
<a class="btn11" href="http://forum.wbcforum.com/t433-corn-oil-here">Corn Oil</a>
<a class="btn12" href="http://forum.wbcforum.com/t432-olive-oil-here">Olive Oil</a>
<a class="btn12" href="http://forum.wbcforum.com/t431-peanut-oil-here">Peanut Oil</a>
<a class="btn11" href="http://forum.wbcforum.com/t430-soybean-oil-here"> Soybean Oil</a>
<a class="btn12" href="http://forum.wbcforum.com/t429-sunflower-oil-here"> Sunflower Oil</a>
<a class="btn12" href="http://forum.wbcforum.com/t280-used-cooking-oil-here">Used Cooking Oil</a>
<a class="btn11" href="http://forum.wbcforum.com/t109-palm-oil-here">Palm Oil</a>
<a class="btn12" href="http://forum.wbcforum.com/t65-coconut-oil-here">Coconut Oil</a>
   
<!-- Estilos -->
<style type="text/css">
div.cards {
width: 90%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: distribute;
justify-content: space-around;
flex-wrap: wrap;
padding: 15px 0px;
background-color: #f5f5f5;
border: solid 1px #ddd;
border-bottom: solid 2px #ddd;
border-radius: 3px;
margin: 10px auto
}
 
div.cards, div.cards * {
box-sizing: border-box;
}
 
div.cards a {
width: auto;
margin-left: 20px;
background-color: #39c;
padding: 10px 15px;
padding-bottom: 12px;
display: inline-block;
color: #fff;
font-size: 15px;
box-shadow: inset 0px -6px rgba(0, 0, 0, 0.2);
text-decoration: none;
margin-bottom: 10px;
}
div.cards a {
  background-color: grey!important;
}
   
</style>
</div>

o/

Um pouco menor amado, e mais perto um do outro para ter espaço que ainda tem muito para colocar, me ajuda, por favor, http://forum.wbcforum.com/

Cá está:

Código:

<div class="cards">
<!-- -->
<!-- Botões abaixo:
<!-- Configure os links entre as aspas do atributo "href".
<!-- -->
<a class="btn1" href="http://forum.wbcforum.com/t58-soybeans-here">Soybeans</a>
<a class="btn2" href="http://forum.wbcforum.com/t413-organic-beans">Organic Beans</a>
<a class="btn3" href="http://forum.wbcforum.com/t415-peas-discussions-here">Peas</a>
<a class="btn4" href="http://forum.wbcforum.com/t410-kidney-beans">Kidney Beans</a>
<a class="btn5" href="http://forum.wbcforum.com/t419-lima-beans">Lima Beans</a>
<a class="btn6" href="http://forum.wbcforum.com/t418-butter-beans">Butter Beans</a>
<a class="btn7" href="http://forum.wbcforum.com/t417-broad-beans">Broad Beans</a>
<a class="btn8" href="http://forum.wbcforum.com/t416-black-beans">Black Beans </a>
<a class="btn8" href="http://forum.wbcforum.com/t414-mung-beans">Mung Beans</a>
<a class="btn9" href="http://forum.wbcforum.com/t412-lentils-here">Lentils</a>
<a class="btn10" href="http://forum.wbcforum.com/t411-vigna-beans">Vigna Beans</a>
<a class="btn11" href="http://forum.wbcforum.com/t223-chickpeas-here">Chickpeas</a>
<a class="btn12" href="http://forum.wbcforum.com/t45-cocoa-beans-here">Cocoa Beans</a>
<a class="btn10" href="http://forum.wbcforum.com/t395-silos-thread">Silos</a>
<a class="btn11" href="http://forum.wbcforum.com/t454-robusta-coffee-beans-here">Robusta Coffee Beans</a>
<a class="btn12" href="http://forum.wbcforum.com/t453-java-coffee-beans-here">Java Coffee Beans</a>
<a class="btn11" href="http://forum.wbcforum.com/t452-liberica-coffee-beans-here">Liberica Coffee Beans</a>
<a class="btn12" href="http://forum.wbcforum.com/t59-arabica-coffee-beans-here">Arabica Coffee Beans</a>
<a class="btn12" href="http://forum.wbcforum.com/t440-animal-oil-here">Animal Oil</a>
<a class="btn12" href="http://forum.wbcforum.com/t439-seasoning-oil-here">Seasoning Oil</a>
<a class="btn12" href="http://forum.wbcforum.com/t438-ginger-oil-here">Ginger Oil</a>
<a class="btn12" href="http://forum.wbcforum.com/t437-camellia-oil-here">Camellia Oil</a>
<a class="btn12" href="http://forum.wbcforum.com/t436-castor-oil-here">Castor Oil</a>
<a class="btn12" href="http://forum.wbcforum.com/t435-sesame-oil-here">Sesame Oil</a>
<a class="btn12" href="http://forum.wbcforum.com/t434-rapeseed-oil-here">Rapeseed Oil</a>
<a class="btn11" href="http://forum.wbcforum.com/t433-corn-oil-here">Corn Oil</a>
<a class="btn12" href="http://forum.wbcforum.com/t432-olive-oil-here">Olive Oil</a>
<a class="btn12" href="http://forum.wbcforum.com/t431-peanut-oil-here">Peanut Oil</a>
<a class="btn11" href="http://forum.wbcforum.com/t430-soybean-oil-here"> Soybean Oil</a>
<a class="btn12" href="http://forum.wbcforum.com/t429-sunflower-oil-here"> Sunflower Oil</a>
<a class="btn12" href="http://forum.wbcforum.com/t280-used-cooking-oil-here">Used Cooking Oil</a>
<a class="btn11" href="http://forum.wbcforum.com/t109-palm-oil-here">Palm Oil</a>
<a class="btn12" href="http://forum.wbcforum.com/t65-coconut-oil-here">Coconut Oil</a>
 
<!-- Estilos -->
<style type="text/css">
div.cards {
width: 90%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: distribute;
justify-content: space-around;
flex-wrap: wrap;
padding: 15px 0px;
background-color: #f5f5f5;
border: solid 1px #ddd;
border-bottom: solid 2px #ddd;
border-radius: 3px;
margin: 10px auto
}
 
div.cards, div.cards * {
box-sizing: border-box;
}
 
div.cards a {
width: auto;
margin-left: 5px;
background-color: #39c;
padding: 7px 9px;
padding-bottom: 9px;
display: inline-block;
color: #fff;
font-size: 15px;
box-shadow: inset 0px -3px rgba(0, 0, 0, 0.2);
text-decoration: none;
margin-bottom: 10px;
}
div.cards a {
  background-color: grey!important;
}
 
</style>
</div>

o/

Muito obrigada amado, ficou perfeito, vou trabalhar aqui para ajudar o povo a aprender a postar no fórum e depois eu vou quebrar o resto da minha cabeça para aprender a montar aquele formulário para ajudar aqui, muito obrigada amado, que Deus te abençoe, a Paz

Disponha.

---

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada. Tópico marcado como Resolvido e movido para "Questões resolvidas".