Sub-fóruns aparecerem na horizontal

[Galileu]

• 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(https://2img.net/i/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(https://2img.net/i/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('https://2img.net/h/oi49.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('https://2img.net/h/oi50.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(https://2img.net/i/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(https://2img.net/i/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(https://2img.net/i/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(https://2img.net/i/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.com	Versão:	INVISION
Tipo:	Pedido de código	Tags:	Sub-fóruns,aparecerem,horizontal

---

[Kyo Panda]

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.

[Galileu]

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.

[Kyo Panda]

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

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

[Galileu]

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

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

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

[Kyo Panda]

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.

[Galileu]

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

[Kyo Panda]

Claro.

Adicione ao CSS:

Código:

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

[Galileu]

Que moço ajudeiro.
Obrigado, camarada!