Sub-fóruns aparecerem na horizontal

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

Resolvido Sub-fóruns aparecerem na horizontal

Mensagem por Galileu em 07/05/14, 09:21 pm

  • Descrição:
Em meu fórum há um problema em que, os Sub-Fóruns ficam um abaixo do outro, ou seja, aumentam a extensão da página principal. Meu interesse é o de deixar cada um, um ao lado do outro como neste print:



Meu pedido é que ele fique dessa forma, um do lado do outro, num tamanho reduzido! Para fins de verificação, deixo meu CSS atual abaixo.


a:link {
color: #000000;
text-decoration:none;
border-radius:12px;
}


img {
border: none;
vertical-align: middle;
margin: 1px;
}

a:link {
color: #111;
text-decoration: none;
border-radius: 12px;

}
table.ipbtable .forum-name a {
font-weight: 600;
font-size: 15px;
padding-left: 2px;
color: #555;
}
table.ipbtable .mods {
text-align: left;
padding-left: 15px;
color: #888;
}
table.ipbtable td .par {
text-align: left;
padding-left: 14px;
color: #888;
}
table.ipbtable td {
padding: 9px;
vertical-align: top;
padding-left: 10px;
color: #222;
}
.topic-paging a, strong.pagination a {
background: #d5d5d5;
border-radius: 3px;
color: #999;
font-size: 9px;
margin: -3px;
padding: 1px 5px;
text-decoration: none;
}

.td.row1.centered {
background: url(http://www.webcheats.com.br/forum/images/icons/icon1.png);
}
.postdetails h3 {
font-size: 20px;
margin: 10px;
margin: 10px;
}
.avatar img {
width: 160px;
margin-left: -8px;
}
.avatar {
background-color: white;
border: 1px solid white;
}

.post-entry {
margin: 15px;
overflow: hidden;
font: Verdana;
font-size: 12px;
}

table.ipbtable tfoot td {
background-color: #B81414;
font-size: 3px;
height: 5px;
border-radius: 0em 0em 5em 5em;
}
#submenu ul li a {
color: black;
margin: .0em 0em .0em 0;
padding: .5em 0em .65em 0;
text-decoration: none;
}
.module .box-content {
border-bottom: 10px solid #fff;
line-height: normal;
padding: 5px;
border-radius: 5px;
}
.post {
background-color: whiteSmoke;
border-bottom: 10px solid #D5D5D5;
}
table.ipbtable th {
background-color: #E9E9E9;
background-image: url(http://illiweb.com/fa/empty.gif);
background-repeat: repeat-x;
border-bottom: 1px solid #DBDBDB;
border-right: 1px solid #D1D1D1;
color: black;
padding: 1px 0 1px 5px;
text-align: center;
}
table.ipbtable tfoot td {
background-color: #D5D5D5;
border-radius: 0 0 5em 5em;
font-size: 3px;
height: 5px;
}
.borderwrapm, div.borderwrap {
background-color: white;
border: 1px solid whiteSmoke;
padding-left: 10px;
padding-right:0px;
padding-top:0px;
padding-bottom:0px;
border-radius: 16px;
}
.module .box-content {
border-bottom: 10px solid #fff;
border-radius: 15px;
line-height: normal;
padding: 5px;
}
.box-content {
background-color: white;
border-bottom: 10px solid #666;
border-radius: 10px;
}
.statlinks ul li a {
border-bottom: 1px dotted #464C55;
color: white;
text-decoration: none!important;
}
.statlinks ul li a:hover {
border-bottom: 1px solid #464C55;
color: white;
}
div.maintitle {
background-color: #111;
background-repeat: repeat-x;
border-bottom: 6px solid #791212;
border-radius: 5px 5px 0 0;
color: #fff;
height: 10px;
padding: 15px 8px 8px 15px;
vertical-align: middle;
zoom: 1;
}
#chatbox_header {
background-color: #333;
height: 30px;
color: white;
}

.button, .mainoption {
cursor: pointer;
font-size: 11px;
height: 20px;
padding: 0 5px;
}

div#logostrip #logo {
display: block;
float: center;
background:
black;
}

div.maintitle .contract, div.maintitle .expand {
background: url(http://1.bp.blogspot.com/-NgwBbgykgjU/Ue7yeALVqOI/AAAAAAAAANQ/HLnayhsrYiU/s1600/collapse_tcat+c%C3%B3pia.png) no-repeat 50% 50%;
border-bottom: 1px solid #111;
border-radius: 5px;
cursor: pointer;
float: right;
height: 25px;
margin: -9px 0 -17px -17px;
width: 50px;
}
a.topictitle {
color: #791212;
font-size: 13px;
font-weight: 700;
}
a.topictitle a:hover {
color:#417394;
font-size:14px;
font-weight:bold;
text-decoration:underline;
}

#userlinks ul {
float: right;
list-style: none;
font-size: 10px;
}

#userlinks {
background-color: whiteSmoke;
border-bottom: 1px solid #F0F0F0;
font-size: 18px;
padding: .5em;
color: #417394;
}

p.topic-desc{
color: #444;
}

#submenu ul li a a:hover {
backgroung: #fff;
}

#submenu ul {
list-style: none;
text-align: center;
background: #0C0C0C url(http://4.bp.blogspot.com/-00_1m_A-WeI/UJLXI4astRI/AAAAAAAACCg/ha62LT34_w0/s1600/menu.jpg) center no-repeat;
border-radius: 7px;
}

div#logostrip {
background-color: #630f0f;
background-image: url(http://illiweb.com/fa/empty.gif);
background-repeat: repeat-x;
color: #212121;
min-height: 68px;
text-align: center;
}

div#logostrip #logo {
background: #630f0f;
display: block;
float: center;
}
div.maintitle {
background-color: #111;
background-repeat: repeat-x;
border-bottom: 6px solid #791212;
border-radius: 5px 5px 0 0;
color: #fff;
height: 10px;
padding: 15px 8px 8px 15px;
vertical-align: middle;
zoom: 1;
}
.vote {
padding: 4px 1px 4px 1px;
text-align: center;
width:20px;
background-color: #eaeaea;
border: 1px solid #d4d6d5;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-top-left-radius:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-bottom-right-radius:5px;
}

.vote .vote-no-bar {
display: none;
}

.vote .vote-bar {
border-left: 0px;
border-right: 0px;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #d4d6d5;
font-size: 0px;
height: 50px;
margin: 0px;
width: 20px;
padding: 3px 0px 3px 0px;
}

.vote .vote-bar-plus {
margin-left: 7px;
width: 6px;
}

.vote .vote-bar-minus {
margin-left: 7px;
width: 6px;
}

.vote .vote-button a[href $="plus"] {
background:url('http://i49.tinypic.com/1eb5at.png');
background-position: center;
background-repeat: no-repeat;
color:transparent;
display:block;
height:21px;
width:22px;
}

.vote .vote-button a[href $="minus"] {
background-image:url('http://i50.tinypic.com/16055w3.png');
background-position: center;
background-repeat: no-repeat;
color:transparent;
display:block;
height:21px;
width:22px;
}

#submenu ul {
background: #000;
border-radius: 0;
list-style: none;
text-align: center;
margin-top: -1px;
}

#submenu {
background: white;
color: white;
text-align: right;
padding: 0;
}

#navstrip li.begin {
background: url(http://hitskin.com/themes/18/90/56/i_icon_mini_offline.png) right center no-repeat;
border-right: 0;
margin-left: 0;
padding: 8px 25px;
}
#navstrip li {
background: url(http://hitskin.com/themes/18/90/56/i_icon_mini_offline.png) right center no-repeat;
border-right: 0;
float: left;
margin: 0;
padding: 8px 25px;
margin-left: -15px;
}
#navstrip {
color: #555;
font-weight: 700;
list-style: none;
margin: 0;
}

table.ipbtable td {
padding: 5px 0px 5px 10px;
vertical-align: top;
}

.chatbox {
background-color: whiteSmoke;
border-top: 5px solid #444;
border-radius: 5px;
}

.borderwrapm, div.borderwrap {
background-color: none;
border: 0;
border-radius: 0;
padding: 1px;
}

#chatbox_members {
border-right: 2px solid #D0D0D0;
bottom: 0px;
overflow: auto;
position: absolute;
top: 30px;
width: 180px;
}

#message, #submit_button {
background: #d9d9d9;
border-bottom: 5px solid #f5f5f5;
border-radius: 4px;
border-width: 1px;
margin: 2px 5px;
padding: 3px 10px;
font-size: 12px;
}
#chatbox_footer {
background-color: #f5f5f5;
bottom: 0;
left: 0;
padding: 5px;
position: absolute;
right: 0;
border-radius: 0px 0px 7px 7px;
}

.popupmenu ul {
list-style: none;
width: 296px;
border: 5px solid #E8E8E8;
padding: 5px;
background: white;
}

.popupmenu li {
background-color: white;
background-image: url(http://illiweb.com/fa/invision/menu_item.gif);
background-position: 2px 50%;
background-repeat: no-repeat;
border-bottom: 0;
display: block;
padding: 7px;
text-decoration: none;
white-space: nowrap;
}

.popupmenu .avatar {
background: url(http://illiweb.com/fa/invision/pp-blank-thumb-50px.png) no-repeat;
background-color: #fff;
border: 0;
float: right;
height: 50px;
margin: 5px;
width: 50px;
}

#profile-advanced-details .message-block {
margin-left: 160px;
zoom: 1;
}

.postprofile{text-align:center;
background: #f0f0f0;
}
dd-textarea textarea {
border: 0
}

#content-container div#right {
float: right;
margin-top: 39px;
overflow: hidden;
margin-right: 12px;
}
div.maintitle div.toggle, div.maintitle h1, div.maintitle h2, div.maintitle h3 {
font-size: 14px;
margin-top: -5px;
}
div.pagination b {
background-color: #444;
color: #fff;
font-weight: 400;
padding: 5px 9px;
margin-right: 2px;
border-radius: 3px;
}

div.pagination a {
background-color: #e9e9e9;
padding: 5px 9px;
text-decoration: none;
border-radius: 3px;
margin-left: 0px;
}

#navstrip li a:hover {
color: #417394;
}

.row1, .row2 {border-bottom: 2px solid #f8f8f8!important;
}

.popmenubutton a {
background-color: #f0f0f0;
background-image: url(http://illiweb.com/fa/invision/menu_action_down.gif);
background-position: 98% 50%;
background-repeat: no-repeat;
border: 1px solid #fff;
color: #417394;
font-size: 11px;
font-weight: 700;
padding: 2px 16px 2px 8px;
text-align: center;
text-decoration: none;
white-space: nowrap;
}

#pagef {background: url(http://2.bp.blogspot.com/-ih4beIsW5uY/UW8V0l_CjwI/AAAAAAAAAKc/AeX213z0orw/s1600/Sem+T%C3%ADtulo-1.png);
height: 110px;
padding-top: 200px;
}
.avatar img {margin-left: auto !important;width: 50px !important;}

.module .maintitle {
background: #e5e5e5;
border-bottom: 0;
border-left: 8px solid #d5d5d5;
border-radius: 5px;
color: #555;
font-size: 13px;
margin: 2px;
padding: 12px;
}

.maintitle.floated div.toggle, .maintitle.floated h2, .maintitle.floated h3 {
background: #791212;
border-radius: 10px 10px 0 0;
float: left;
height: 8px;
margin-top: -20px;
padding: 15px;
font-size: 12px;
}

.popmenubutton {
float: right;
height: 22px;
margin-top: -5px;
}

div.pagination a.goto {
background-color: #f5f5f5;
background-image: url(http://illiweb.com/fa/invision/menu_action_down.gif);
background-position: 97% 50%;
background-repeat: no-repeat;
padding: 2px 15px 2px 4px;
margin-left: 21px;
}
#username_reg {
border:2px solid red!important;
}
#username_reg.okusername {
border:2px solid green!important;
}
.mini_ava img {
-moz-box-shadow: 0 2px 2px rgba(0,0,0,0.1);
-webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.1);
background: #fff;
border: 1px solid #D5D5D5;
box-shadow: 0 2px 2px rgba(0,0,0,0.1);
height: 36px;
margin: 0 5px;
padding: 1px;
width: 36px;
float: left;
border-radius: 6px;
margin-left: 2px;
}
.attach {
float: right;
}

div.main-content.chatbox.clearfix {
border: 0px;
border-radius: 4px;
padding: 0px;
}
div.maintitle {
border-bottom: 6px solid #104E8B!important;
}
.maintitle.floated div.toggle, .maintitle.floated h2, .maintitle.floated h3 {
background: none repeat scroll 0 0 #104E8B!important;
}
div#logostrip, div#logostrip #logo {
background-color: #104E8B !important;
}

  • Informações:
Fórum:http://e-gamesbrasil.forumeiros.comVersão:INVISION
Tipo:Pedido de códigoTags:Sub-fóruns,aparecerem,horizontal



Última edição por Galileu em 07/05/14, 11:46 pm, editado 1 vez(es)
avatar

Galileu
Nível 9

Masculino
Inscrito dia : 16/12/2012
Mensagens : 189
Pontos Ativos : 291

Ver perfil do usuário http://cidadezumbi.forumeiros.com

Resolvido Re: Sub-fóruns aparecerem na horizontal

Mensagem por Kyo Panda em 07/05/14, 09:27 pm

Olá,

A minha sugestão é que adicione o link dos subfóruns direto na descrição de um fórum. Exemplo:

Código:
Apresente-se para os outros membros do fórum!<br />
<a href="/f4-">Anúncios e Novidades</a>, <a href="/f5-">Ouvidoria</a>

Abraços. Feliz
avatar

Kyo Panda
Super usuário

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4638
Pontos Ativos : 5914

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

Resolvido Re: Sub-fóruns aparecerem na horizontal

Mensagem por Galileu em 07/05/14, 09:57 pm

Vou esperar para ver se mais alguém oferece opções, rs. Para o que estou pensando em fazer, colocar tudo na descrição vai ficar exorbitante, eu acho.
avatar

Galileu
Nível 9

Masculino
Inscrito dia : 16/12/2012
Mensagens : 189
Pontos Ativos : 291

Ver perfil do usuário http://cidadezumbi.forumeiros.com

Resolvido Re: Sub-fóruns aparecerem na horizontal

Mensagem por Kyo Panda em 07/05/14, 09:58 pm

Nyeh, senti que minha sugestão foi inútil. XD

No seu fórum, poderia habilitar alguns subfóruns para bolarmos um código? Feliz
avatar

Kyo Panda
Super usuário

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4638
Pontos Ativos : 5914

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

Resolvido Re: Sub-fóruns aparecerem na horizontal

Mensagem por Galileu em 07/05/14, 10:39 pm

@Kyo Panda escreveu:Nyeh, senti que minha sugestão foi inútil. XD

No seu fórum, poderia habilitar alguns subfóruns para bolarmos um código? Feliz

Claro. Piscada
Antes existiam alguns, mas os retirei por ficarem muito "feios". Já habilitei um na Off-Topic. Procure no final do fórum.
avatar

Galileu
Nível 9

Masculino
Inscrito dia : 16/12/2012
Mensagens : 189
Pontos Ativos : 291

Ver perfil do usuário http://cidadezumbi.forumeiros.com

Resolvido Re: Sub-fóruns aparecerem na horizontal

Mensagem por Kyo Panda em 07/05/14, 10:49 pm

Adicione isso a um novo módulo Javascript, com investimento no índice:

Código:
$(function() {
  $('.ipbtable td[style="padding-right: 0px; padding-left: 90px;"]').each(function() {
    var self, parent, deliver;
    self = $(this);
    parent = self.parent();
    deliver = parent.prev().find('.forum-desc');
    if (deliver.length) {
      deliver.append(self.find('.forumtitle').addClass('subforum'));
      parent.remove();
    }
  });
});

E isso ao CSS:

Código:
table.ipbtable .forum-name a.subforum {
  font-size: 12px;   
}

table.ipbtable .forum-name a.subforum:after {
  content: ", ";
}

table.ipbtable .forum-name a.subforum:last-child:after {
  content: "";
}

Abraços. Feliz
avatar

Kyo Panda
Super usuário

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4638
Pontos Ativos : 5914

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

Resolvido Re: Sub-fóruns aparecerem na horizontal

Mensagem por Galileu em 07/05/14, 11:31 pm

Puts, funcionou muito bem! Mas eu queria perguntar uma coisa: Tem como deixar a cor da fonte desse sub-fórum em azul? (#104E8B)
avatar

Galileu
Nível 9

Masculino
Inscrito dia : 16/12/2012
Mensagens : 189
Pontos Ativos : 291

Ver perfil do usuário http://cidadezumbi.forumeiros.com

Resolvido Re: Sub-fóruns aparecerem na horizontal

Mensagem por Kyo Panda em 07/05/14, 11:37 pm

Claro.

Adicione ao CSS:

Código:
table.ipbtable .forum-name a.subforum {
  color: #104E8B;
}

Feliz
avatar

Kyo Panda
Super usuário

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4638
Pontos Ativos : 5914

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

Resolvido Re: Sub-fóruns aparecerem na horizontal

Mensagem por Galileu em 07/05/14, 11:46 pm

Que moço ajudeiro. Piscada
Obrigado, camarada!  Positivo 
avatar

Galileu
Nível 9

Masculino
Inscrito dia : 16/12/2012
Mensagens : 189
Pontos Ativos : 291

Ver perfil do usuário http://cidadezumbi.forumeiros.com

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

- Tópicos similares

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