Categoria BS

Detalhes da dúvida

Versão do fórum : PunBB
Nível de acesso : Fundador
Navegador usado : Google Chrome
Imagem :

Imagem da minha dúvida:

Membros afetados : Vários usuários, uns sim e outros não
Problema começou : não
Endereço do fórum : http://unix-forum.umforum.net

Descrição do problema

Queria a barra de categoria nesse estilo, com botão de ocultar, ela reta sem curvas.
Preta e azul, obrigado.

Saudações!

Para ocultar/expandir a categoria, queira checar por gentileza:
[Tutorial] Ocultar/Mostrar categorias no estilo Invision!

Quanto ao estilo, adicione no inicio da tua CSS este código:

Código:

@font-face{font-family:Cuprum;font-style:normal;font-weight:400;src:local(Cuprum), local(Cuprum-Regular), url(http://themes.googleusercontent.com/static/fonts/cuprum/v5/wHBEZCjwNI3HN2fD1RQJgw.woff) format("woff")}@font-face{font-family:Cuprum;font-style:normal;font-weight:700;src:local('Cuprum Bold'), local(Cuprum-Bold), url(http://themes.googleusercontent.com/static/fonts/cuprum/v5/n3IzcUkIerri6e9sz7Dgbj8E0i7KZn-EPnyo3HZu7kw.woff) format("woff")}
.main .main-head .page-title h2 {
font-family: Cuprum;
font-size: 15px;
font-weight: 700;
}
#content .main .main-head, #content .main .main-head a {
color: #fff;
}
#content .main .main-foot, #content .main .main-head {
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.5);
-o-box-shadow: 0 1px 2px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.5);
background: #22242D;
border-bottom: 3px solid #2A80B9;
box-shadow: 0 1px 2px rgba(0,0,0,0.5);
min-height: 18px;
padding: 10px;
text-shadow: rgba(0,0,0,0.4) 0 -1px 0;
}

Caminho: [í]CPainel >> Visualização >> Imagens e Cores > Cores >>> Folha de estilo CSS[/i]

Até!

Desculpe pela ausência, irei testar, qualquer coisa dou edit.

Olá coloquei no início do Css, apareceu isso; https://imgur.com/rq6E32P.png
Só funcionou a fonte, se poder me ajudar entre no fórum e ajeita, please.

Eu acessei o teu fórum e está funcionando sim amigo!

Estou falando sobre a cor, é azul. Aqui não funciona.
Apareceu o erro entre chaves.

Não há erros de fechamento no código que lhe passei, está com as balizas fechadas sim!

Veja a print que tirei de teu fórum:

Até!

Aqui não aparece, oque devo fazer?

Olá, utilize este JS feito pelo nosso amigo @JScript

Código:


/***
 * Application: toggle Category
 * Description: Show/hide categories!
 * Version: 0.02632015-jq1.9.1
 *        RC1 (Release candidate 1!) - Invision
 * Author: JScript - 2015/03/26 - based on Invision.js
 * This work is free. You can redistribute it and/or modify it
 * under the terms of the WTFPL, Version 2
 */
$(function() {
  var Autor = "JScript <jscriptbrasil at live dot com>, based on Invision.js";
      style = document.createElement("style"),
      //Versions: |phpBB2----------------------------------------|  |phpBB3-------------|    |PunBB-----------------|  |Invision already have it!|
      oCat = $('#content-container .three-col td:eq(1) .forumline, #main-content .forabg, #main-content .main-head, '),
      oThis = null,
      oTemp = null,
      sEval = '';

  style.type = "text/css";
  style.innerHTML =
      '.contract, .expand {' +
      '  background: url("http://2img.net/i/fa/invision/exp_minus.gif") no-repeat scroll 50% 50% rgba(0, 0, 0, 0);' +
      '  cursor: pointer;' +
      '  float: right;' +
      '  margin-top: 3px;' +
      '}' +
      '.expand {' +
      '  background: url("http://2img.net/i/fa/invision/exp_plus.gif") no-repeat scroll 50% 50% rgba(0, 0, 0, 0);' +
      '}';
  document.getElementsByTagName("head")[0].appendChild(style);

  switch (oCat[0].className) {
      case 'forumline': //phpBB2
        sEval = "oTemp = oThis.find('tr').first();oTemp.addClass('title-bar');" +
            "oTemp.find('th:last').append('<div onclick=\"toggleCategory(\\'c' + i + '\\');\" id=\"bc' + i + '\" class=\"contract\" style=\"margin-top: -15px;\">  </div>');" +
            "oThis.find('tr').not('.title-bar').addClass('c' + i);";
        break;
      case 'forabg': //phpBB3
        sEval = "oThis.find('ul.topiclist:first dl.icon').append('<div onclick=\"toggleCategory(\\'c' + i + '\\');\" id=\"bc' + i + '\" class=\"contract\">  </div>');" +
            "oThis.find('ul.topiclist.forums').attr('id', 'c' + i);";
        break;
      case 'main-head': //PunBB
        sEval = "oThis.find('h2').append('<div onclick=\"toggleCategory(\\'c' + i + '\\');\" id=\"bc' + i + '\" class=\"contract\">  &nbsp;</div>');" +
            "oThis.next().attr('id', 'c' + i);";
        break;
  }
  for (var i = 0, len = oCat.length; i < len; i++) {
      oThis = $(oCat[i]);
      eval(sEval);
  }

  initCategories();
});
// by invision.js
function initCategories() {
  var id;
  cookies = document.cookie.split('; ');
  for (var i = 0; i < cookies.length; i++) {
      if (cookies[i].charAt(0) == '_') {
        cookie = cookies[i].split('=');
        if (cookie[1] == '1') {
            id = cookie[0].substring(1);
            if (document.getElementById(id)) {
              toggleCategory(id)
            }
        }
      }
  }
}
// by invision.js, modified by JScript
function toggleCategory(id) {
  var obj = document.getElementById(id);
  var button = document.getElementById('b' + id);
  if (obj) {
      var toggle = obj.style.display == 'none';
      obj.style.display = toggle ? '' : 'none';
  } else {
      var elems = document.getElementsByClassName(id);
      for (var i = 0, len = elems.length; i < len; i++) {
        var toggle = elems[i].style.display == 'none';
        elems[i].style.display = toggle ? '' : 'none';
      }
  }
  button.className = toggle ? 'contract' : 'expand';
  my_setcookie('_' + id, toggle ? '' : '1', true);
  return false
}

Investimento, marque (x) Índice

Abs.

Título do js?

Casie escreveu:Título do js?

Qual você preferir para sua organização

Agora preciso do botão na barra, de quando clicar ocultar.

Casie escreveu:Agora preciso do botão na barra, de quando clicar ocultar.

O código faz isso amigo. Os JavaScripts estão ativados em seu fórum?

Obrigado meu caro, os widgets estão com outras cores diferente da barra de categoria, quero deixar igual.

Seria assim?

Adicione isto a seu CSS:

Código:

.main .main-foot, .main .main-head, .title-overview {border-bottom: 3px solid #2A80B9 !Important; }

Obrigado, problema resolvido.

Somente é permitido uma questão por tópico, okay?

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

Até!