Visibilidade de Widgets

Detalhes da questão

Endereço do fórum: https://videoaulaskelvin.forumeiros.com/
Versão do fórum: phpBB3

Descrição

Olá!

Estive fazendo alguns testes para colocar widgets no meu fórum e no portal, entretanto, não consigo. Parece que eles ficam "encobertos". Eu gostaria de gerir os widgets do fórum, mas creio que meu CSS limitou a largura do fórum, por isso não estou conseguindo.

Por exemplo, do modo como está agora, como eu faria para adicionar um widget com os últimos posts do instagram, ou um widget de "Palavras Chave"?

Eis o CSS:

Código:

.ME8,
.ME8 * {
  box-sizing: border-box;
  scrollbar-color: #0006 #0003;
  scrollbar-width: thin;
}
:root {
  --fondo-uno: #111;
  --fondo-dos: #181818;
  --borde: #262626;
  --texto: #777;
  --hover: #ac471d;
}
.ME8 {
  min-width: 900px;
  margin: auto;
  padding-top: 250px;
  background-position: center;
  background-size: cover;
  border: 1px solid var(--borde);
  font: 12px Lato;
  color: var(--texto);
}
.inME8 {
  background: var(--fondo-uno);
  border-top: 1px solid var(--borde);
  position: relative;
  min-height: 200px;
  font-size: 0px;
  letter-spacing: -5px;
}
.ttME8 {
  font: bold 50px/30px Prompt;
  letter-spacing: 20px;
  position: absolute;
  bottom: calc(100% - 1px);
  width: 100%;
  text-align: center;
  color: var(--fondo-uno) !important;
  text-transform: uppercase;
  padding: 20px 0 0 20px;
  -webkit-text-stroke: 1px var(--borde);
  overflow: hidden;
}
.linksME8 {
  padding: 5px;
  border-bottom: 1px solid var(--borde);
  display: flex;
}
.linksME8 a {
  margin: 5px;
  flex: 1;
  text-align: center;
  background: var(--fondo-dos);
  padding: 5px 3px 5px 5px;
  transition: 0.5s;
  color: var(--texto);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: bold;
  border: 1px solid var(--borde);
}
.linksME8 a:hover {
  flex: 1.5;
  color: var(--hover);
}
.moME8 {
  display: inline-block;
  vertical-align: middle;
  letter-spacing: normal;
}
.moME8.mmst {
  background: var(--fondo-dos);
  padding: 20px;
  border-right: 1px solid var(--borde);
  width: 270px;
}
.moME8.mmst > div {
  display: flex;
}
.moME8.mmst > div > div {
  margin: 5px;
  flex: 1;
  height: 120px;
  border: 5px solid;
  box-shadow: inset 0 0 0 1px var(--borde);
  position: relative;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  transition: 0.5s;
}
.moME8.mmst > div > div:hover {
  border: 5px solid var(--hover);
}
.moME8.mmst > div > div > div {
  position: absolute;
  background: var(--fondo-uno);
  width: 100%;
  height: 100%;
  display: flex;
  font-size: 20px;
  align-items: center;
  justify-content: center;
  transition: 0.5s;
  flex-wrap: wrap;
  top: 100%;
  padding: 20px 0;
}
.moME8.mmst > div > div:hover > div {
  top: 0%;
}
.moME8.mmst a {
  padding: 0 10px;
  color: var(--texto);
  transition: 0.3s;
  transform: scale(0.8);
}
.moME8.mmst a:hover {
  transform: scale(1);
  color: var(--hover);
}
 
.moME8.mmam {
  width: 60px;
  padding: 0 5px;
  text-align: center;
}
.moME8.mmam a {
  display: block;
  font-size: 20px;
  margin: 15px 0;
  transform: scale(0.8);
  transition: 0.3s;
  color: var(--texto);
}
.moME8.mmam a:hover {
  transform: scale(1);
  color: var(--hover);
}
.moME8.mmbo {
  height: 170px;
  background: var(--fondo-dos);
  border-left: 1px solid var(--borde);
  border-right: 1px solid var(--borde);
  width: calc(100% - 580px);
}
.moME8.mmbo > div {
  margin: 30px;
  font: 12px Lato;
  height: calc(100% - 60px);
  overflow: auto;
  text-align: justify;
  hyphens: auto;
  padding-right: 5px;
}
.moME8.mmwh {
  padding: 20px;
  width: 250px;
}
.moME8.mmwh > div {
  font: 12px Lato;
  height: 125px;
  overflow: auto;
  text-align: justify;
  hyphens: auto;
}
.moME8.mmwh > div span {
  display: block;
  margin-bottom: 10px;
  clear: both;
}
.moME8.mmwh > div strong {
  font: 30px/30px Prompt;
  float: left;
  margin-right: 5px;
  color: var(--hover);
  width: 40px;
  text-align: center;
}
.moME8.mmwh > div a {
  color: var(--hover);
}
 
.miME8 {
  display: block;
  font: 10px arial;
  letter-spacing: 2px;
  text-align: center;
  transition: 0.5s;
}
.miME8:hover {
  letter-spacing: 10px;
}
.ME8 div::-webkit-scrollbar {
  width: 5px !important;
  height: 5px !important;
  background: #0006 !important;
}
.ME8 div::-webkit-scrollbar-thumb {
  background: #0003 !important;
}


/**/
#left {
  display: flex!important;
  align-items: stretch;
  max-width: 100%;
}
 
#left .module {
  width: 30%;
}
 
#left .module:not(:first-child) {
  margin-left: 1em;
}
 
#content-container #container {
    margin-left: 0!important;
}

.temp-geral {
    height: 320px;
    background-color: #e1f2f0;
    margin: 0px 0px 0px;
}
.temp-links {
    height: 200px;
    margin: 20px;
    position: absolute;
    margin-left: 15px;
}
.temp-links i {
    color: #ffffff;
    padding: 15px;
    font-size: 30px;
    background-color: #136966;
    margin: 5px;
    width: 35px;
    text-align: center;
    transition: 1s;
}
.fa, .fas {
    font-weight: 900;
}
.fa, .far, .fas {
    font-family: "Font Awesome 5 Free";
}
.fa, .fab, .fal, .far, .fas {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
}
.temp-links i:hover {
    background-color: #d88225;
}
.fa-book:before {
    content: "\f02d";
}
.fa-discord:before {
    content: "\f392";
}
.fa-file-alt:before {
    content: "\f15c";
}
.fa-id-card:before {
    content: "\f2c2";
}
.fa-list-alt:before {
    content: "\f022";
}
.fa-project-diagram:before {
    content: "\f542";
}
.fa-chart-bar:before {
    content: "\f080";
}
.fa-map-marked-alt:before {
    content: "\f5a0";
}
.temp-texto {
    position: absolute;
    width: 325px;
    margin-left: 19px;
    margin-top: 100px;
    text-align: justify;
    font-size: 12px;
    line-height: 17px;
    padding: 20px;
    border: 1px solid #E0E0E0;
    background-color: #ffffff;
    color: #222;
}
.temp-staff {
    position: absolute;
    margin-top: 95px;
    margin-left: 390px;
}
.staff {
    width: 371px;
    height: 193px;
    display: inline-block;
    background-size: 100;
    background-position: center;
    margin: 5px;
}
#tab-cont img {
    width: 24px;
    margin-left: 1081px;
    margin-top: 25px;
    position: absolute;
    z-index: 0;
    background-color: #136966;
    padding: 123px 10px;
}
#comments_scroll_div {
    width: 268px;
    overflow: auto;
    overflow-x: hidden;
    height: 238px;
    font-family: roboto;
    font-size: 12px;
    line-height: 19px;
    text-align: left;
    padding: 15px;
    margin-top: 25px;
    margin-left: 775px;
    position: absolute;
    color: #131313;
    background-color: #ffffff;
    border: 1px solid #dad8d8;
}
#comments_scroll_div > .marquee > .js-marquee-wrapper {
    animation: none !important;
    margin-top: 0 !important;
}
#comments_scroll_div a {
    font-weight: 900;
    color: #136966;
}

 
#wrap {
    padding: 15px 15px!important;
    width: 1150px!important;
    transition: 1s!important;
    overflow-x: hidden!important;
    font-size: 10px!important;
    margin-top: 130px!important;
    margin-bottom: 30px!important;
}
#wrap {
    background-color: #fff;
    border: 1px solid #;
    margin: 0 auto;
    min-width: 948px;
    padding: 5px;
    width: 98%;
}
#wrap {
    background-color: #fff;
    border: 1px solid #;
    margin: 0 auto;
    min-width: 948px;
    padding: 5px;
    width: 98%;
}
 
 
.forabg {
    margin-top: -5px;
    margin-bottom: 0px;
    padding: 15px;
    background-color: #f0f0f03b;
    border: 1px solid #E0E0E0;
}
.forabg {
    background-color: #;
    background-image: url(https://2img.net/i/fa/empty.gif);
    background-position: 0 0;
    background-repeat: repeat-x;
    border: 2px solid #;
    clear: both;
    margin-bottom: 4px;
    padding: 0 5px;
}
 
ul.topiclist {
    background-image: url(https://2img.net/i/fa/empty.gif);
    background-repeat: repeat-x;
    color: #444;
    list-style-type: none;
    margin: 0;
}
ul.topiclist li {
    display: block;
    margin: 0;
}
li.header {
    background-image: url(https://images6.alphacoders.com/480/thumb-1920-480421.jpg);
    background-size: 100%;
    background-attachment: fixed;
    padding: 30px 0px 0px 0px;
    margin: -10px -15px 10px!important;
    color: white;
    text-align: center;
    overflow: hidden;
    height: 80px;
}
.subtable-title h2 {
    color: white;
    margin-top: -10px;
    color: white;
    opacity: 0.15;
    font-size: 100px;
    line-height: 50px;
    font-weight: 900;
    font-family: playfair display;
    text-transform: uppercase;
    letter-spacing: -10px;
    cursor: default;
    text-align: center;
    height: 0px;
}
.table-title, .table-title h2 {
    color: #fff;
    display: inline;
    
}
.table-title h2 {
    font-family: verdana;
    font-size: 28px;
    font-weight: 300;
    letter-spacing: 20px;
    text-transform: uppercase;
    display: block;
    margin-top: -8px;
    text-align: center;
}
.table-title, .table-title h2 {
    color: #fff;
    display: inline;
    font-size: 1em;
}
h2 {
    color: #a77794;
    font-family: Verdana;
    font-size: 2em;
    font-weight: 400;
    margin: .8em 0 .2em;
}
ul.forums {
    background-color: #;
    background-image: none;
}
ul.topiclist {
    background-image: url(https://2img.net/i/fa/empty.gif);
    background-repeat: repeat-x;
    color: #444;
    list-style-type: none;
    margin: 0;
}
.forabg .row {
    height: 189px;
    overflow: hidden!important;
    padding: 10px;
    border-top: 0px;
    margin-left: 10px;
    width: 1096px;
    background-color: white;
    margin-bottom: 15px;!important;
}
ul.topiclist li {
    display: block;
    margin: 0;
}
.row:nth-child(even) {
    border-left: 1px solid #CCC;
}
ul.forums li.row dl {
    min-height: 0;
}
ul.topiclist li.row dl {
    padding: 2px 0;
}
ul.topiclist dd.dterm, ul.topiclist dt {
    display: block;
    float: left;
    font-size: 1.1em;
    padding-left: 5px;
    padding-right: 5px;
    width: 60%;
}
ul.forums dd {
    border-color: transparent;
    border-left-style: solid;
    border-left-width: 1px;
}
ul.topiclist dd {
    border-left: 1px solid transparent;
    display: block;
    float: left;
    padding: 4px 0;
}
.hierarchy {
    border: none;
    display: inline;
    font-size: 1em!important;
    text-transform: none;
}
.forumtitle2 {
position: relative;
width: 710px;
margin-lefT: 430px;
margin-top: -16px;
padding: 1px 10px 10px 0px;
text-align: center;
background: white;
border-bottom: 1px solid #E0E0E0;
background-color: #f0f0f073;
}

.row:nth-child(even) .forumtitle2 {
margin-left: -16px;
width: 659px;
border-left: 0px;
padding-left: 10px;
}

a.forumtitle {
    color: #f26b36;
    padding: 15px;
    font: 900 40px/50px Playfair display;
    letter-spacing: -2px;
    transition: 0.5s;
}

a.forumtitle:hover {
    color: #136966;
   text-decoration: none;
}
.descskew {
    transform: skew(-12deg);
    overflow: hidden;
    width: 475px;
    height: 210px;
    margin-lefT: -39px;
    margin-top: -75px;
    border-right: 8px solid #e2e2e2;
    z-index: 1;
    position: relative;
}
.descimg {
    width: 500px;
    height: 210px;
    filter: grayscale(0%);
    z-index: 1;
    position: relative;
    transform: skew(12deg);
    background-image: url(http://placehold.it/500x210);
    background-size: auto 100%;
}
.desctext {
    width: 595px;
    height: 60px;
    overflow: auto;
    margin-left: 470px;
    margin-top: -130px;
    margin-bottom: -6px;
    background: white;
    color: #444;
    text-align: justify;
    backgorund: white;
    font: 400 11px/14px Roboto;
    outline: 1px solid #E0E0E0;
    border: 10px solid white;
}
.subforuns:hover {
    opacity: 1;
}
.subforuns {
    position: absolute;
    margin-top: -167px;
    margin-lefT: -17px;
    font-size: 0px;
    width: 472px;
    height: 210px;
    opacity: 0;
    text-align: center;
    background-image: url(https://i.imgur.com/yZhBwg0.png);
    background-size: 115%;
    background-position: right;
    z-index: 99!important;
    transition: 0.5s;
}
.subforuns2 {
    margin: 30px 40px;
    margin-left: 30px;
    width: 350px;
}
.subforuns a {
    background: #efefef;
    color: #1b1b1b;
    display: inline-block;
    margin: 0px 5px 5px 0px;
    padding: 6px 9px;
    font-family: Roboto;
    font-size: 10px;
    letter-spacing: 0px;
    font-weight: 900;
    text-transform: uppercase;
    width: 174px;
    text-align: center;
    transition: 0.5s;
}
.subforuns a:hover {
    background: #f26b36;
    color: white;
}
.forabg dd.topics {
    margin: 60px 0px 0px -235px!important;
}
.row:nth-child(even) dd.topics {
    margin: 65px 0 0 -33px !important;
}
.row:nth-child(even) dd.posts {
    margin: 107px 0px 0px -27px!important;
}
.forabg dd.posts, .forabg dd.topics {
    border-radius: 180px;
    width: 33px;
    box-shadow: 0px 0px 0px 1px #bbb;
    height: 26px;
    padding-top: 5px;
    background: white;
    position: relative;
    margin: 107px 0px 0px -262px;
    z-index: 99;
    font-size: 14px;
    text-align: center;
    font-family: Roboto;
    color: #f26b36;
    font-weight: 900;
}
ul.forums dd {
    border-color: transparent;
    border-left-style: solid;
    border-left-width: 1px;
}
ul.topiclist dd {
    border-left: 1px solid #fff!important;
    display: block!important;
    float: left!important;
    padding: 4px 0;
}
ul.topiclist dfn {
    display: none;
}
.forabg dd.posts {
    margin: 107px 0px 0px -245px;
}
.forabg dd.lastpost {background: #f26b36;width: 655px;height: 15px;overflow: hidden;text-align: center;padding: 11px 20px;padding-left: 30px;margin-left: 400px;margin-top: 1px;font: 400 13px roboto condensed;color: #ffffff;position: relative;transition: 1s;}

.lastpostdados {
float: right;
}

.forabg dd.lastpost:hover {filter: grayscale(0%);opacity: 1;}
li dd.lastpost span a {margin-left: 10px; color: white; font-weight: 700;}
.forabg dd.lastpost strong {color: white!important;margin-right: 5px;}
.forabg dd.lastpost a {color: white; font-weight: 700; transition: 0.4s;margin-right: 0px;
text-decoration: underline;}
.forabg dd.lastpost a:hover {color: #c31919; }
.lastpost br {display:none;}
.forabg .last-post-icon {margin-top: -5px; margin-left: -5px; position: absolute; z-index: 9!important;}

.row:nth-child(even) dd.lastpost {
text-align: right;
margin-left: -10px;
margin-top: 1px;
padding-left: 20px;
padding-right: 30px;
color: white;
}

.row:nth-child(even) dd.lastpost .lastpostdados {
display: inline;
float: left!important;
margin-right: 10px;
color: white;
}

.row:nth-child(even) .descskew {
    margin-lefT: 640px!important;
    border-left: 8px solid #e2e2e2;
    z-index: 1;
    position: relative;
    transform: skew(12deg);
}
.row:nth-child(even) .descimg {
    margin: 0px 0px 0px -20px;
    transform: skew(-10deg);
}
.row:nth-child(even) .desctext {
    margin-left: 0px;
    text-align: justify;
}
.row:nth-child(even) .subforuns {
    margin-left: 629px;
    text-align: center;
    width: 471px;
    background: url(https://i.imgur.com/jy1PFIp.png);
    background-position: left;
    background-size: 112%;
}
.row:nth-child(even) .subforuns .subforuns2 {
    margin-left: 70px;
}
/***Categorias em Abas***/
.fa-category-controller {
    margin: 10px -18px -6px;
    margin-top: 15px;
    text-align: center;
    border-bottom: 0px;
    outline: 0px solid white;
}

.fa-category-controller a {display: inline-block;position: relative;color: #fff;padding: 15px 0px;text-transform: uppercase;font-family: roboto;font-size: 11px;background: #136966;font-weight: 700;opacity: 90;transition: all 1s cubic-bezier(0.68, 0.04, 0, 0.92), background-size 0s cubic-bezier(0.42, 0, 0.46, 1.01);width: 20%!important;}

.fa-category-controller a:after {
background-color: white;
bottom: 0;
right: -10px;
content: ' ';
position: absolute;
top: 0;
transform: skew(-20deg);
width: 20px;
}

.fa-category-controller a:before {
background-color: white;
bottom: 0;
left: -8px;
content: ' ';
position: absolute;
top: 0;
transform: skew(-20deg);
width: 16px;
}

.fa-category-controller > a:hover {background: #d88225;color: white;transition: 0.5s;}

.forabg {
margin: 0px -6px;
border: 1px solid #E0E0E0;
}
 
li > a.mainmenu[href="/calendar"] { display : none; }
li > a.mainmenu[href="/faq"] { display : none; }
li > a.mainmenu[href="/memberlist"] { display : none; }
li > a.mainmenu[href="/groups"] { display : none; }
li > a.mainmenu[href="/privmsg?folder=inbox"] { display : none; }
li > a.mainmenu[href="/profile?mode=editprofile"] { display : none; }
li > a.mainmenu[href="/search"] { display : none; }


/*topicos*/
.forumbg {
    clear: both;
    border-bottom: 40px solid #333333;
    padding: 0px;
    padding-bottom: 5px;
    margin: 0px -15px;
}
.forumbg {
    background-color: transparent!important;
    background-image: url(https://2img.net/i/fa/empty.gif);
    background-position: 0 0;
    background-repeat: repeat-x;
    border: 2px solid transparent;
    border-bottom: 40px solid #333;
    clear: both;
    margin: 0 -14px 4px;
    padding: 0 5px;
}
ul.topiclist {
    background-image: url(https://2img.net/i/fa/empty.gif);
    background-repeat: repeat-x;
    color: #222;
    list-style-type: none;
    margin: 0;
}
ul.topiclist li {
    display: block;
    margin: 0;
}
li.header2 {
    background-image: url(https://i.imgur.com/zocqC7H.png);
    background-blend-mode: overlay;
    background-position: center;
    background-attachment: fixed;
    background-color: #545454a8;
    background-size: cover;
    text-align: center;
    margin: 0px -20px 0px!important;
    height: 65px;
    overflow: hidden;
    font-size: 50px;
    color: white;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -3px;
    padding: 30px;
}
.fa-comments:before {
    content: "\f086";
}
span.corners-top {
    background-image: url(https://2img.net/i/fa/prosilver/corners_left.gif);
    background-position: 0 0;
    margin: 0 -5px;
}
span.corners-bottom, span.corners-bottom span, span.corners-top, span.corners-top span {
    background-repeat: no-repeat;
    display: block;
    font-size: 1px;
    height: 5px;
    line-height: 1px;
}
ul.topiclist.bg_none {
    background: none;
}
ul.topiclist {
    background-image: url(https://2img.net/i/fa/empty.gif);
    background-repeat: repeat-x;
    color: #222;
    list-style-type: none;
    margin: 0;
}
li.row.row2:nth-child(odd) {
    background: #86868612!important;
}
ul.topiclist li {
    display: block;
    margin: 0;
}
li.row.row2 {
    border-radius: 0px!important;
    margin: 4px 15px -5px!important;
    padding: 12px 10px!important;
    font-family: roboto!important;
    font-size: 12px!important;
    border: 1px solid #E0E0E0!important;
}
.row2 {
    background-color: #;
}
dl.icon {
    background-position: 10px 50%;
    background-repeat: no-repeat;
    height: auto;
    min-height: 35px;
}
ul.topics dd.dterm, ul.topics dt {
    padding-left: 0px;
}
li.topicos dd.dterm {
    background-position: -5px!important;
    width: 1080px !important;
    margin-top: -12px;
    height: 55px;
    margin-bottom: -12px;
    margin-left: -10px;
}
dl.icon dd.dterm, dl.icon dt {
    background-position: 5px 50%;
    background-repeat: no-repeat;
}
ul.topics dd.dterm, ul.topics dt {
    display: block;
    float: left;
    padding-left: 45px;
    width: 50%;
}
ul.topiclist dd.dterm, ul.topiclist dt {
    display: block;
    float: left;
    font-size: 1.1em;
    padding-left: 5px;
    padding-right: 5px;
    width: 60%;
}
ul.topiclist dd {
    border-left: 1px solid transparent;
    display: block;
    float: left;
    padding: 4px 0;
}
div.topic-title-container {
    display: inline;
}
.hierarchy {
    border: none;
    display: inline;
    font-size: 1em!important;
    text-transform: none;
}
.topic-title {
    display: inline;
    font-size: 12px;
    text-align: left;
}
h2 {
    color: #333;
    font-family: Roboto;
    font-size: 2em;
    font-weight: 400;
    margin: .8em 0 .2em;
}
li.topicos a.topictitle {
    font-family: roboto;
    font-size: 14px;
    font-weight: 600;
}
li.topicos a.topictitle {
    font-family: roboto;
    font-size: 14px;
    font-weight: 600;
    margin-top: 12px!important;
    display: block;
    margin-left: 5px;
}
a.topictitle {
    color: #333;
    font-family: Roboto;
    font-size: 1.1em;
    font-weight: 700;
    text-decoration: none;
}
li.topicos .span-tab {
    margin-top: -14px !important;
    margin-left: 5px;
    display: block;
    position: relative;
}
.span-tab {
    font-size: .9em;
}
li.topicos .span-tab {
    margin-top: -14px !important;
    margin-left: 5px;
    display: block;
    position: relative;
}
.span-tab {
    font-size: .9em;
}
.postagens {
    font-weight: 600;
    color: #333;
    position: absolute;
    margin-left: 650px;
    margin-top: 0px;
}
.fa-comment-alt:before {
    content: "\f27a";
padding-right: 4px;
}
ul.topiclist dd {
    border-left: 1px solid transparent;
    display: block;
    float: left;
    padding: 4px 0;
}
ul.topics dd {
    display: block;
    float: left;
}
.visualizacoes {
    font-weight: 600;
    color: #333;
    position: absolute;
    margin-left: 650px;
    margin-top: 20px;
}
.fa-eye:before {
    content: "\f06e";
padding-right: 4px;
}
.ultimamensagem {
    position: absolute;
    margin-left: 820px;
    color: #555;
    line-height: 18px;
    margin-top: -1px;
}
.fa-user:before {
    content: "\f007";
padding-right: 4px;
}
.fa-clock:before {
    content: "\f017";
padding-right: 4px;
}
li.row.row1:nth-child(odd) {
    background: #86868612;
}
li.row.row1 {
  background-color: #fff;
    border-radius: 0px;
    margin: 4px 15px -5px!important;
    padding: 12px 10px;
    font-family: roboto;
    font-size: 12px;
    border: 1px solid #E0E0E0;
}
ul.topics dd.dterm, ul.topics dt {
    padding-left: 60px;
}
li.row.row2 dd.dterm {
    background-position: -5px!important;
    width: 1080px !important;
    margin-top: 0px;
    height: 55px;
    margin-bottom: -12px;
    margin-left: 0px;
}
li.header {
    font-size: 44px!important;
}

/*HOVER NOS BOTÕES*/
.postbody ul.profile-icons img:hover, .post-options img:hover, .posting-icons img:hover, .borderwrap div div a img:hover, .options a img:hover, .right a img:hover, .noprint a img:hover {
bottom: -2px;
opacity: 0.7;
padding: 0px;
position: relative;
}
  
 
/*******CURTIR NO POST********/
  #rep_post .reput_vote {
  background-color: #daedfb;
  color: #666;
  -khtml-user-select: none;
  -moz-transition: all,0.15s;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-transition: all,0.15s;
  -webkit-touch-callout: none;
  -webkit-transition: all,0.15s;
  -webkit-user-select: none;
  background: #f0f0f0 url(https://cdn1.iconfinder.com/data/icons/social-media-13/24/Like-16.png) no-repeat 6px center;
  background-size: 12px;
  clear: both;
  color: #666;
  cursor: pointer;
  display: table;
  font-size: 11px;
  font-weight: 400;
  line-height: 18px;
  margin: 5px;
  padding: 3px 5px 3px 25px;
  text-align: right;
  transition: all,0.15s;
}
.reput_vote.zero {
  background-color: #6a6a6a;
}
  
  
  .BS_like:hover {
  background-color: #daedfb;
  color: #666;
}
.BS_like {
  -khtml-user-select: none;
  -moz-transition: all,0.15s;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-transition: all,0.15s;
  -webkit-touch-callout: none;
  -webkit-transition: all,0.15s;
  -webkit-user-select: none;
  background: #f0f0f0 url(https://cdn1.iconfinder.com/data/icons/social-media-13/24/Like-16.png) no-repeat 6px center;
  background-size: 12px;
  clear: both;
  color: #666;
  cursor: pointer;
  display: table;
  font-size: 11px;
  font-weight: 400;
  line-height: 18px;
  margin: 5px;
  padding: 3px 5px 3px 25px;
  text-align: right;
  transition: all,0.15s;
  user-select: none;
}
 
.BS_like:before {
  content: "Curtir";
}
  
  #rep_post .bs_inline {
  list-style: none;
}
  
  .BS_like:hover {
  background-color: #daedfb;
  color: #666;
}
  
#rep_post {white-space: nowrap;margin: 6px 4px;float: right;}
#rep_post .bs_inline {list-style: none;}
#rep_post .bs_inline > li {display: inline-block;margin: 0 3px;}
#rep_post .bs_inline > li:first-child {margin-left: 0;}
#rep_post .bs_inline img {display: none;}
#rep_post span img {cursor: pointer;}
 
 
.reput_vote.positive {background-color: #8db13e;}
.reput_vote.zero {background-color: #6a6a6a;}
 
#rep_post .reput_vote:before {
  content: "Curtidas ";
}
/***********FIM CURTIR************/
 
/***********MENU************/
ul.navlinks {
    background-color: #136966!important;
    border-bottom: 5px solid #f26b36!important;
    border-radius: 4px 2px 0 0!important;
    font: bold 14px Verdana;
    text-transform: uppercase;
    color: #fff!important;
    margin: 0px 0px 0px!important;
    padding: 1em!important;
    position: relative!important;
    text-shadow: none!important;    
}
#page-header > div.navbar > div > ul a{color:#fff!important;margin:6px!important;}

a.mainmenu:hover {
    border-bottom: 2px solid #f26b36;
    padding-bottom: 10px;
}
/***********FIM MENU************/

/***********PERFIL************/
.postprofile {
    display: none!important;
}
.online {
    background-image: none!important;
}
.postbody {
    padding: 9px!important;
    width: 93%!important;
}
.postbody .topic-title {
    border: none;
    color: #e4e3e1;
    font-family: arial;
    font-size: 1.5em;
    font-weight: 700;
    line-height: 125%;
    margin: 0 0 .3em!important;
    padding: 2px 0 0;
    text-transform: none;
}
.topic-title {
    display: inline;
    font-size: 12px;
    text-align: left;
}
.postbody ul.profile-icons {
    display: block;
    list-style: none;
    margin-left: 40px;
    margin-top: 63px;
    padding: 0;
    position: absolute;
    width: auto;
}
.postbody ul.profile-icons {
    float: right;
    list-style: none;
    margin-right: 45px;
    padding: 0;
    width: auto;
}
.postbody .topic-title a {
    background: #136966;
    border-bottom: 10px solid #f26b36;
    border-top: 20px solid #136966;
    color: #f9f8f7;
    display: block;
    font-family: Oswald;
    font-size: 30px;
    font-weight: lighter;
    height: 40px;
    text-align: center;
    text-transform: uppercase;
    width: 1107px;
}
p.author {
    background: #f26b36;
    color: #e4e3e1;
    display: block;
    font-size: 8px;
    letter-spacing: 1px;
    margin-top: -2px;
    padding: 5px;
    text-align: center;
    text-transform: uppercase;
    width: 1107px;
    word-spacing: 1px;
}
p.author {
    font-family: arial;
    font-size: 1em;
    line-height: 1.2em;
    margin: 0 15em .6em 0;
    padding: 0 0 5px;
}
.sprite-icon_post_target {
    background: url(https://2img.net/i/fa/sprite_icons.png) no-repeat top left;
    background-position: -765px 0;
    height: 9px;
    width: 11px;
}

Olá,

Retire o JS abaixo do seu fórum, e veja se os widgets vão aparecer.

Código:

$(function() {
    $(' #content-container div#left').remove();
});

Até mais!

Removi o JS em questão, e foi esse o resultado:



Ficaram meio que enfileirados um do lado do outro

Olá,

Adiciona esse código na sua Folha de estilo CSS

Código:

#left {
    display: block!important;
}


Até mais!

resultado:



Pelo que vi, vai levar um trabalho enorme voltar a ativar os widgets, sem danificar nenhuma parte da estrutura do fórum, não é?
Nesse caso, te peço um conselho: você acha melhor trabalhar para reativar normalmente os widgets, ou colocar os widgets que desejo integrados nesse widget que há no topo do fórum?
No caso, eu queria integrar as redes sociais: facebook e instagram, coms os últimos posts.

Olá,

Realmente acho que será mais prático você fazer integrado igual o widget no topo do fórum, mas se ainda deseja tentar organizar a estrutura do fórum, podemos tentar esse caminho. Fica a sua escolha.

Até mais!

Pesquisei por aqui, e encontrei essa questão: Incorporar widget Instagram no fórum

Fui atrás do site em questão (esse), e gerei um quadro de testes, que ficou assim:

Código:

<!-- LightWidget WIDGET --><script src="https://cdn.lightwidget.com/widgets/lightwidget.js"></script><iframe src="//lightwidget.com/widgets/56fa553ff2015f1abe0e0404202cdfcf.html" scrolling="no" allowtransparency="true" class="lightwidget-widget" style="width:100%;border:0;overflow:hidden;"></iframe>

Como eu poderia integrá-lo àquele widget do topo? Eu gostaria de adicionar também um widget do tipo para o facebook, logo ao lado.

Meu Index_body está assim:

Código:

{JAVASCRIPT}
<!-- BEGIN switch_user_logged_in --><p class="right rightside">{LAST_VISIT_DATE}</p><!-- END switch_user_logged_in -->
<p>{CURRENT_TIME}</p>
{CAT_NAME}
<br class="clear" />
 
<!-- BEGIN switch_user_login_form_header -->
<div class="panel">
    <div class="inner"><span class="corners-top"><span></span></span>
        <form action="{S_LOGIN_ACTION}" method="post" name="form_login">
            <div class="user_login_form center">
                <label>{L_USERNAME} : <input class="post" type="text" size="10" name="username" /></label>&nbsp;
                <label>{L_PASSWORD} : <input class="post" type="password" size="10" name="password" /></label>&nbsp;
                <label>{L_AUTO_LOGIN} : <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label>&nbsp;
                {S_HIDDEN_FIELDS}<input class="mainoption button1" type="submit" name="login" value="{L_LOGIN}" />
 
                <!-- BEGIN switch_social_login -->
                <div class="social_btn">
                    <!-- BEGIN fb_connect -->
                    <div class="fb-login-button"></div>
                    <!-- END fb_connect -->
                    <!-- BEGIN topicit_connect -->
                    <div class="ti-connect"></div>
                    <!-- END topicit_connect -->
                </div>
                <!-- END switch_social_login -->
            </div>
        </form>
    <span class="corners-bottom"><span></span></span></div>
</div>
<!-- END switch_user_login_form_header -->
 
<!-- BEGIN message_admin_index -->
    <div class="panel introduction">
        <div class="inner"><span class="corners-top"><span></span></span>
    <!-- BEGIN message_admin_titre -->
        <div class="h3">{message_admin_index.message_admin_titre.MES_TITRE}</div>
    <!-- END message_admin_titre -->
 
    <!-- BEGIN message_admin_txt -->
        <div class="mes-txt">{message_admin_index.message_admin_txt.MES_TXT}</div>
    <!-- END message_admin_txt -->
        <span class="corners-bottom"><span></span></span></div>
    </div>
<!-- END message_admin_index -->
 
<div class="temp-geral">
<div class="temp-links">
<a href="https://www.kelvinsistemadeensino.com.br/" title="Site Kelvin Sistema de Ensino"><i class="fas fa-graduation-cap"></i></a>
<a href="/" title="Discord"><i class="fab fa-discord"></i></a>
<a href="https://www.facebook.com/kelvinsistemadeensino/" title="Facebook"><i class="fab fa-facebook-square"></i></a>
<a href="/" title="Whatsapp"><i class="fab fa-whatsapp-square"></i></a>
<a href="https://www.instagram.com/kelvinsistemaensino/?hl=pt-br" title="Instagram"><i class="fab fa-instagram"></i></a>
<a href="https://ead.colegiokelvin.com.br/login/index.php" title="Plataforma Digital"><i class="fas fa-project-diagram"></i></a>
<a href="https://www.kelvinsistemadeensino.com.br/revista/revista-2a-edicao/" title="Revista Kelvin"><i class="fas fa-book-open"></i></a>
<a href="https://www.youtube.com/channel/UCmZT80fjW0HLoN9foUhx1Zg/featured" title="Canal do Youtube"><i class="fab fa-youtube"></i></a>
<a href="/" title="Contato"><i class="fas fa-phone-square-alt"></i></a>
<a href="/" title="Pedidos"><i class="fas fa-align-justify"></i></a>
</div>
 
<div class="temp-texto">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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
 
<div class="temp-staff">
<a href="/" title="Kelvin Sistema de Ensino"><div class="staff" style="background-image: url(https://i.servimg.com/u/f40/15/53/26/66/dsc_0010.jpg)"></div></a>
</div>
 
<div id="tab-cont"></div>
 
<div id="comments_scroll_div">
 
 
</div>
</div>
</div>
 
{CHATBOX_TOP}
{BOARD_INDEX}
 
<!-- BEGIN disable_viewonline -->
 
    <!-- BEGIN switch_viewonline_link -->
    <div class="h3"><a href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a></div>
    <!-- END switch_viewonline_link -->
 
    <!-- BEGIN switch_viewonline_nolink -->
    <div class="h3">{L_WHO_IS_ONLINE}</div>
    <!-- END switch_viewonline_nolink -->
 
<img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" class="img-whois" />
<p>{TOTAL_USERS_ONLINE}<br />
{RECORD_USERS}
 
<br />
{LOGGED_IN_USER_LIST}
 
{L_ONLINE_USERS}
{L_CONNECTED_MEMBERS}<br />
{L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}
 
<br />
<em>{LEGEND}&nbsp;:&nbsp;{GROUP_LEGEND}</em>
 
</p>
<div class="clear"></div>
 
    <!-- BEGIN switch_statistics_link -->
    <div class="h3"><a href="{U_STATISTICS}" rel="nofollow">{L_STATISTICS}</a></div>
    <!-- END switch_statistics_link -->
 
    <!-- BEGIN switch_statistics_nolink -->
    <div class="h3">{L_STATISTICS}</div>
    <!-- END switch_statistics_nolink -->
 
<p class="page-bottom">
{TOTAL_POSTS}
</p>
<p class="page-bottom">
{TOTAL_USERS}
</p>
<p class="page-bottom">
{NEWEST_USER}
</p>
    <!-- BEGIN switch_chatbox_activate -->
    <div class="h3"><a href="{S_JOIN_CHAT}" target="ChatBox">{CHATBOX_NAME}</a></div>
    <div class="page-bottom">
    {TOTAL_CHATTERS_ONLINE}&nbsp;:&nbsp;
    {CHATTERS_LIST}<br />
    </div>
        <!-- BEGIN switch_chatbox_popup -->
        <div id="chatbox_popup"></div>
        <script type="text/javascript">
        insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
        </script>
        <!-- END switch_chatbox_popup -->
    <!-- END switch_chatbox_activate -->
<!-- END disable_viewonline -->
 
{CHATBOX_BOTTOM}
 
<!-- BEGIN switch_user_login_form_footer -->
<div class="panel">
    <div class="inner"><span class="corners-top"><span></span></span>
        <form action="{S_LOGIN_ACTION}" method="post" name="form_login">
            <div class="user_login_form center">
                <label>{L_USERNAME} : <input class="post" type="text" size="10" name="username" /></label>&nbsp;
                <label>{L_PASSWORD} : <input class="post" type="password" size="10" name="password" /></label>&nbsp;
                <label>{L_AUTO_LOGIN} : <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label>&nbsp;
                {S_HIDDEN_FIELDS}<input class="mainoption button1" type="submit" name="login" value="{L_LOGIN}" />
 
                <!-- BEGIN switch_social_login -->
                <div class="social_btn">
                    <!-- BEGIN fb_connect -->
                    <div class="fb-login-button"></div>
                    <!-- END fb_connect -->
                    <!-- BEGIN topicit_connect -->
                    <div class="ti-connect"></div>
                    <!-- END topicit_connect -->
                </div>
                <!-- END switch_social_login -->
            </div>
        </form>
    <span class="corners-bottom"><span></span></span></div>
</div>
<!-- END switch_user_login_form_footer -->
 
<br style="clear:both" />
 
<!-- BEGIN switch_legend -->
<ul id="picture_legend">
    <li><img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" />{L_NEW_POSTS}</li>
    <li><img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" />{L_NO_NEW_POSTS}</li>
    <li><img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" />{L_FORUM_LOCKED}</li>
</ul>
<!-- END switch_legend -->
 
{AUTO_DST}

Olá,

Gera o código com o seu instagram e facebook, pode utilizar os sites abaixo,

https://www.powr.io/plugins
https://snapwidget.com/

Os dois é possível gerar um código para o Instagram e Facebook

Até mais!

Olá! Desculpe a demora!

Gerei o código, e ficou assim:

Insta

Código:

<!-- SnapWidget -->
<script src="https://snapwidget.com/js/snapwidget.js"></script>
<iframe src="https://snapwidget.com/embed/794624" class="snapwidget-widget" allowtransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden;  width:100%; "></iframe>

Facebook:

Código:

<!-- SnapWidget -->
<iframe src="https://snapwidget.com/embed/794629" class="snapwidget-widget" allowtransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden;  width:495px; height:596px"></iframe>

Onde devo colocá-los?

Olá,

Substitua o seu template "index_body" por esse

https://pastebin.com/Azwghkjh

Até mais!