Category in Tabs question for phpbb2

Hi Forumotioners, I have installed this succesfully on my testforum phpbb2 a while ago from tis topic which is in the Tips & tricks section: 
https://help.forumotion.com/t66614-display-your-categories-as-tabs by @Ange Tuteur  but for some reason I have no acces to it anymore..

Now I've tried to install this at my official forum, also phpbb2, but it won't work as it's supposed to.
when I activate the script it shows the tabs correctly but it also stretches the page and pushes the rigth side widgets off the screen for the most part and gives me a horizontal scrollbar at the bottom of the page..

Both forums are phpbb2 and have exactly the same skin, I don't know why this happens or what I can do to make this right.. 
I would love to have this on my official forum because we have so much forums, it would be so helpful to tidy the place up with this awesome script.
For now I have disabled it again because the page looks ugly with that scrollbar and widgets out of sight.

Any help would be much appreciated   

(If needed this is my Offical Forum and my testforum is in my profile)

hello

i do not know if this is the case but i see that the original forum has a diffrent width from the test forum

See if this is similar: http://fmdesign.forumotion.com/t472-category-tabs#5772 ?

Thank you very much for your reply @skouliki I'll check that out and post back if that was the cause   

Thank you @SLGray for your reaction, yes I found that one too and that is the same script, as you can see I already posted a topic for help there 4 days ago, a day before your post that it works on ModernBB but it seems there's hardly any activity at all, so I decided to ask for help overhere. 
Since it was published here in the Tips & tricks section, where I originally read about the script at first, so I had put that page in my browser's favorites, but when trying to re-open it now, it won't give me acces anymore, saying it is only for users who are granted special acces rights so I assumed that I could ask help with it here, if I am wrong, please forgive me and feel free to delete the topic  

UPDATE:
@skouliki I have checked that and made sure both forums had the same width of widgets, the rest was already the same. Then I retried and activated the script again with no luck.. but when I take a closer look at it, it seems to me that the scroll arrows that are supposed to be there when there are more categories than the forumwidth allows, are missing.. so maybe that's the cause why the forumwidth get stretched out? See the picture:

Screenshot:

did you check also this? general..forum..configuration




what is this to your active forum on the right side? Background picture? some CSS code for your banner?

skouliki wrote:did you check also this? general..forum..configuration




what is this to your active forum on the right side? Background picture? some CSS code for your banner?

Thanks for checking it out @skouliki yes I've checked that, both forums are configured at 100% width.. have the same skin css only the official forum has more JS scripts and added css than my testforum..

And about the picture, yes that was a background picture, I forgot to remove that from my official forum, it's gone now, but sadly it was not the cause of the problem, I retried and the result was still the same, there are no scrolling arrows, so it shows the full width of categories at once which is apperently wider than the forum itself ..

Does your official forum have more categories than your test forum? Also are the titles longer?

Try this:  Add this to your CSS styelsheet

Code:

#content-container #left {
    margin-left: -YOUR NUMBERpx;
}

SLGray wrote:Does your official forum have more categories than your test forum? Also are the titles longer?

Yes @SLGray it has lots more categories than the test forum and yes some of the titles are much longer than the ones on my testforum..

SLGray wrote:Try this:  Add this to your CSS styelsheet

Code:

#content-container #left {
    margin-left: -YOUR NUMBERpx;
}

Thank you very much for your replies SLGray, I'll give that a try and report back the result tomorrow

Ok. We will wait for your reply.

SLGray wrote:Try this:  Add this to your CSS styelsheet

Code:

#content-container #left {
    margin-left: -YOUR NUMBERpx;
}

This with minus 110px did put things back in sight @SLGray as you can see but it creates another problem which now I think of it could be the problem of it all..

Screenshot:

The space we had before on the left side is needed on the right side too, although the forum is configured at 100% width, because that's needed to get a pagewide banner and navigation, the actual page body is set to 85% in the css as you can see below, to keep a good oversight:

Code:

body {
  margin: 0px;
}
.bodyline {
  margin: 0px;
  padding: 0px;
  border: none;
  background-color: #F0F8FF;
}
#i_logo{
margin-top: -13px;
/margin-top: -5px;
margin-bottom: -5px;
/margin-bottom: 150px;
position:enherid;
/position:relative;
}
/* --- START header --- */
.bodylinewidth .bodyline > table:first-child {
  background: url(https://i11.servimg.com/u/f11/19/66/17/09/banner10.jpg) no-repeat top center; /* header afbeelding */
  padding: 20px 5%;
  height: 300px; /* hoogte header afbeelding */
  border-bottom: 1px solid #050505;
  box-shadow: 1px 1px 2px rgba(5,5,5,0.2);
}
.maintitle, .maintitle h1 {
  color: #FEFEFE;
  font-family: helvetica;
  font-size: 32px;
  text-shadow: 2px 2px 5px rgba(255, 255, 255, 1);
}
/* --- END header --- */
/* --- START navbar --- */
.bodylinewidth .bodyline > table:nth-child(2) td {
  padding: 3px 0px;
}
.bodylinewidth .bodyline > table:nth-child(2) {
  overflow: hidden;
  width: 99%;
  margin: -45px auto 0px auto;
  padding: 0px;
  background-color: rgba(0,0,0,0.25);
  border-radius: 3px 3px 0px 0px;
  box-shadow: 0px -4px 18px -13px #050505 inset;
}
.bodylinewidth .bodyline > table:nth-child(2) a.mainmenu {
  text-decoration: none;
  line-height: 2.75em;
  font-size: 14px;
  padding: 10px;
  margin: 0px;
  color: rgba(255,255,255,0.8);
}
.bodylinewidth .bodyline > table:nth-child(2) a.mainmenu:hover {
  background: rgba(0, 0, 0, 0.15);
  color: rgba(255,255,47,0.8);
  text-decoration: none !important;
  border-radius: 3px;
}
.bodylinewidth .bodyline > table:nth-child(2) a.mainmenu img {
  display: none;
}
/* --- END navbar --- */
/* --- START forumpagina --- */
#page-body {
  width: 85%;
  margin: 20px auto;
}
.forumline {
  border-width: 1px;
  border-spacing: 0px;
  border-radius: 5px;
  overflow: hidden;
}
.forumline th {
    position: relative;
    background-position: 0 0;
    box-shadow: inset 0px 5px 5px -5px rgba(5, 5, 5, 0.4);
}
.forumline .row1 {
  padding: 5px 5px 5px 10px;
}
/*  crumb path */
td.nav {
  padding-right: 15px;
}
span.nav, div.nav {
  display: block;
  background-color: #FBFBFB;
  border-radius: 3px;
  border: 1px solid #DDD;
  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.05);
  padding: 0px;
  margin: 0px;
  font-size: 0pt;
}
a.nav {
  padding: 6px 6px 6px 12px;
  line-height: 26px;
  position: relative;
}
a.nav::before {
  content: " ";
  display: block;
  width: 0px;
  height: 0px;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  border-left: 6px solid #DDD;
  position: absolute;
  top: 50%;
  margin-top: -14px;
  margin-left: 1px;
  left: 100%;
  z-index: 1;
}
a.nav::after {
  content: " ";
  display: block;
  width: 0px;
  height: 0px;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  border-left: 6px solid #FBFBFB;
  position: absolute;
  top: 50%;
  margin-top: -14px;
  left: 100%;
  z-index: 2;
}
.post .row1{
background-image: url('http://i65.servimg.com/u/f65/11/95/30/70/f410.jpg');
border: 1px solid #5BABDE;
}
.post .row1:hover{
background-image: url('http://i65.servimg.com/u/f65/11/95/30/70/f210.jpg');
border: 1px solid #3898D8;
}
.post .row2{
background-image: url('http://i65.servimg.com/u/f65/11/95/30/70/f210.jpg');
border: 1px solid #5BABDE;
}
.post .row2:hover{
background-image: url('http://i65.servimg.com/u/f65/11/95/30/70/f410.jpg');
border: 1px solid #3898D8;
}
.row1, .row1Right{
background-image: url('http://i65.servimg.com/u/f65/11/95/30/70/f410.jpg');
border: 1px solid #5BABDE;
}
.row1:hover, .row1Right:hover{
background-image: url('http://i65.servimg.com/u/f65/11/95/30/70/f210.jpg');
border: 1px solid #3898D8;
}
.row2, .row2Right{
background-image: url('http://i65.servimg.com/u/f65/11/95/30/70/f410.jpg');
border: 1px solid #5BABDE;
}
.row2:hover, .row2Right:hover{
background-image: url('http://i65.servimg.com/u/f65/11/95/30/70/f210.jpg');
border: 1px solid #3898D8;
}
.row3, .row3Right{
background-image: url('http://i65.servimg.com/u/f65/11/95/30/70/f410.jpg');
border: 1px solid #5BABDE;
}
.row3:hover, .row3Right:hover{
background-image: url('http://i65.servimg.com/u/f65/11/95/30/70/f210.jpg');
border: 1px solid #3898D8;
}
input.liteoption {
background-color : #d9e5f5;
background-image: url('http://i65.servimg.com/u/f65/11/95/30/70/oo10.jpg');
background-position: top;
font-weight : bold;
color: #000;
}
input.liteoption:hover {
background-color : #d9e5f5;
background-image: url('http://i65.servimg.com/u/f65/11/95/30/70/tex110.jpg');
background-position: top;
font-weight : bold;
color: #000;
}
input.mainoption {
background-color : #d9e5f5;
background-image: url('http://i65.servimg.com/u/f65/11/95/30/70/oo10.jpg');
background-position: top;
font-weight : bold;
color: #000;
}
input.mainoption:hover {
background-color : #d9e5f5;
background-image: url('http://i65.servimg.com/u/f65/11/95/30/70/tex110.jpg');
background-position: top;
font-weight : bold;
color : #000;
}
button.button2, input.button2 {
background-image: url('http://i65.servimg.com/u/f65/11/95/30/70/oo10.jpg');
background-position: top;
}
button.button2:hover, input.button2:hover {
background-image: url('http://i65.servimg.com/u/f65/11/95/30/70/tex110.jpg');
background-position:bottom;
}
/* --- START widgetbar --- */
#left > .forumline, #right > .forumline {
  margin: 7px 0px;
  background: transparent;
  box-shadow: rgba(0,0,0,0.1) 0px 1px 4px;
}
#left > .forumline > tbody > tr > td, #right > .forumline > tbody > tr > td {
  background: transparent;
}
th.thBottom, th.thCornerL, th.thCornerR, th.thHead, th.thLeft, th.thRight, th.thSides, th.thTop, td.cat, td.catBottom, td.catHead, td.catLeft, td.catRight, td.catSides {
  text-align: left;
  padding: 5px 10px;
  border: none;
  text-shadow: 1px 1px rgba(255, 255, 255, 0.5);
}
td.catLeft span {
  text-align: left;
}
.fa_avatar img {
  width:25px;
  height:25px;
  margin-right:5px;
  margin-bottom:-6px;
  -webkit-border-radius:3px;
    -moz-border-radius:3px;
          border-radius:3px;
}
.selectCode {
  float:right; text-transform: uppercase; cursor:pointer;
}
div.cont_code {
  clear: right;
}
div.postbody a{
  background: url(http://icons.iconarchive.com/icons/famfamfam/mini/16/icon-link-icon.png) no-repeat;
  padding-left: 16px;
}
.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;
    height: 20px;
    margin-top: -10px;
    width: 20px;
    position: absolute;
    right: 10px;
    top: 50%;
}
.expand {
  background: url("http://2img.net/i/fa/invision/exp_plus.gif") no-repeat scroll 50% 50% rgba(0, 0, 0, 0);
}
.fa_vote, .fa_voted, .fa_count {
  font-size:12px;
  font-family:Verdana, Arial, Helvetica, Sans-serif;
  display:inline-block !important;
  width:auto !important;
  transition:300ms;
}
.fa_voted, .fa_vote:hover { opacity:0.4 }
.fa_voted { cursor:default }
.fa_count {
  font-weight:bold;
  margin:0 3px;
  cursor:default;
}
.fa_positive { color:#4A0 }
.fa_negative { color:#A44 }
.fa_votebar, .fa_votebar_inner {
  background:#C44;
  height:3px;
}
.fa_votebar_inner {
  background:#4A0;
  transition:300ms;
}
#groupLegend { font-size:0 }
#groupLegend b { font-size:11px }
#groupLegend b:after { content:" | " }
#groupLegend b:last-child:after { content:"" }
#chatbox .user-msg .user, #chatbox .user-msg .msg {
  display: inline;
}
#chatbox .user-msg .user, #chatbox .user-msg .msg {
  display: inline;
}
#chatbox.recently-connected:after {
  font-family: "trebuchet ms", serif;
  font-size: 1.2em; line-height:1.2em; font-weight: bold; color: #0D5484;
  box-shadow:0 0 5px #82A3D8; display:block; background: #D8E2F3; margin:auto;
  width:80%; margin:1.5% auto; padding:1%; white-space: pre;
  content: "Welkom bij de Live Chat ! \a Om te chatten plaats onderaan een berichtje.";
}
#chatbox_popup {
  display:none
}
.chatbox a.cattitle:before {
  content: 'NH Live Chat'; /* Change the Chatbox Name text to the name you want your chatbox to be */
  font-size: 12px;
  color: #FFFFFF
}
.chatbox a.cattitle { font-size: 0 }
body.chatbox {
    background-color: transparent;
}

#fa_thanks_message img { vertical-align:middle }
#fa_thanks_message {
  color:#FFFFFF;
  font-size:16px;
  font-weight:bold;
  text-align:center;
  background: url(https://i58.servimg.com/u/f58/19/66/17/09/thanks13.jpg) repeat;
  border:1px solid #BDB;
  border-radius:25px;
  padding:6px;
  margin:6px;
}

#fa_search { display:none !important }

#recent_topic_list {
  height:250px;
  overflow-y:auto;
}
#recent_topic_list::-webkit-scrollbar {
  width:8px;
}
#recent_topic_list::-webkit-scrollbar-track {
  background:rgba(0, 150, 200, 0.8);
}
#recent_topic_list::-webkit-scrollbar-thumb {
  background:#999;
}

.updownbutton {
  position:fixed;
  bottom:40px;
  right:5px; /* replace right with left to display the buttons on the left */
  z-index:100;
}

a[href="/search"]{
display: none;
}

 img[src*='photobucket']{display:none!important}

/* --- #content-container #left {
    margin-left: -110px;
} --- */

So now I wonder if that's the cause that the Category Tabs script doesn't place a scrollbar on the tabs when the width get's wider than the page body..
I have noticed in this css that it uses some other selectors at certain things than I had before with my previous skin. The skin I use right now I have installed it not so long ago because I loved the visual effect of it with that pagewide banner and navigation, but after importing I already noticed that some javascripts stopt working like the FM chat in toolbar for instance, which I still didn't succeed in getting it to work again..
So could it be that the script of Category Tabs needs another selector to get the scrollbar to work properly ?

Add this to your CSS:

Code:

#content-container #right {
    margin-right: -YOUR NUMBERpx;
}

SLGray wrote:Add this to your CSS:

Code:

#content-container #right {
    margin-right: -YOUR NUMBERpx;
}

Thank you very much @SLGray I tried it and it didn't do the job, then I tried to apply both left and right margins at the same time that also didn't worked I even tried it with positive values but the only result I got was that the whole page shoved over to the right the banner and navbar included, but the rest stayed as wide as it was and gave me a horizontal scrollbar because the page still get's wider due to the fact that there are more Tabs then the forumwidth allows because the script doesn't add the needed scrollbar to the Tabs

Isn't this a problem of the javascript?

Add the codes back and then clear your browser's history and cache.

SLGray wrote:Add the codes back and then clear your browser's history and cache.

Okay @SLGray I'll give that a try and report the result back here again, thank you for your patience

We will wait for your reply.

SLGray wrote:Add the codes back and then clear your browser's history and cache.

Okay @SLGray I'll give that a try and report the result back here again, thank you for your patience

UPDATE:
I added both css codes in with a value of -40px each, activated the Tabs script, peeked to have a look, nothing was changed, then I cleared my cache, even deleted the forum cookies and looked again, logged out ofcourse due to the deletion of the forum cookies and to my big surprise it looked just as it's supposed to, nice, centered and with the margins on both sides:

Screenshot of how it should look:

Then I logged back in and yet once again the page was stretched out wider than my screen like this:

Screenshot:

I believe this is because there are a few categories hidden to guests, so when logged out they are not shown and therefor the page width doesn't go over the limit of the set page body, but when logged in and every category is visible for me, the width goes over the limit and the page stretches out, because the scrollbar of the script isn't working at all.. so I think the question is how do I get that scrollbar activated?
As you can see in the script code below there should be a scroller of some kind:

Code:

$(function() {
  'DEVELOPED BY ANGE TUTEUR';
  'NO DISTRIBUTION WITHOUT CONSENT OF THE AUTHOR';
  'ORIGIN : http://fmdesign.forumotion.com/t472-category-tabs#5772';
 
  // automatically detects the version
  var version = $('.bodylinewidth')[0] ? 0 : document.getElementById('wrap') ? 1 : $('div.pun')[0] ? 2 : document.getElementById('ipbwrapper') ? 3 : document.getElementById('fa_edge') ? 4 : 'badapple';
 
  if (version == 'badapple') {
    if (window.console && console.warn) console.warn('The plugin "fa_tabs" is not supported for your forum version.');
    return;
  }
 
  window.fa_tabs = {
    active : my_getcookie('fa_tab_active') || 0, // active tab
    list : [], // category list
    version : version, // forum version
 
    // language settings
    lang : {
      title : 'Selecteer een Categorie',
      placeholder : 'Categorie',
      all : 'Alles'
    },
 
    // selectors
    select : {
      content : !version ? '#content-container td:has(> img[height="5"])' : 'main-content',
      category : ['.forumline:has(.secondarytitle)', '.forabg', '.main:has(.tcr) .main-head', '.borderwrap:has(.index-box)', '.forum-category'][version]
    },
 
    // function for changing the active category
    change : function(index) {
      my_setcookie('fa_tab_active', index); // save the active tab to a cookie
 
      // actions to run if the tab is not "all"
      if (index != 'all') {
        if (fa_tabs.active == 'all') {
          fa_tabs.tab[0].previousSibling.className = '';
          fa_tabs.display('none');
        } else {
          fa_tabs.tab[fa_tabs.active].className = '';
          fa_tabs.list[fa_tabs.active].style.display = 'none';
        }
 
        fa_tabs.tab[index].className = 'fa_tabactif';
        fa_tabs.list[index].style.display = '';
 
        if (fa_tabs.version == 2) {
          if (fa_tabs.active != 'all') fa_tabs.list[fa_tabs.active].nextSibling.style.display = 'none';
          fa_tabs.list[index].nextSibling.style.display = '';
        }
      } else {
        if (fa_tabs.active != 'all') fa_tabs.tab[fa_tabs.active].className = '';
        fa_tabs.tab[0].previousSibling.className = 'fa_tabactif';
        fa_tabs.display('');
      }
 
      fa_tabs.active = index;
    },
 
    // change the display of all categories
    display : function(state) {
      for (var i = 0, j = fa_tabs.list.length; i < j; i++) {
        fa_tabs.list[i].style.display = state;
        if (version == 2) fa_tabs.list[i].nextSibling.style.display = state;
      };
    },
 
    // stop tab scrolling
    stop : function() {
      if (fa_tabs.interval) {
        window.clearInterval(fa_tabs.interval);
        fa_tabs.interval = null;
      }
    },
 
    // scroll tablist
    scroll : function(by, max) {
      if (!fa_tabs.interval) {
        var node = document.getElementById('fa_tablist').firstChild.firstChild;
 
        fa_tabs.interval = window.setInterval(function() {
          var margin = +node.style.marginLeft.replace(/px/, '');
          (by < 0 && margin <= max) || (by > 0 && margin >= max) ? fa_tabs.stop() : node.style.marginLeft = margin + by + 'px';
        }, 1);
      }
    }
 
  };
 
  // startup variables
  var frag = document.createDocumentFragment(),
      container = $('<div id="fa_category_tabs"><h2 id="fa_tabs_title">' + fa_tabs.lang.title + '</h2></div>')[0],
      tablist = $('<div id="fa_tablist"><div class="inner_tabs"><div></div></div></div>')[0],
      catglist = $('<div id="fa_catglist" />')[0],
 
      a = $(fa_tabs.select.category, !version ? $(fa_tabs.select.content)[0] : document.getElementById(fa_tabs.select.content)),
      i = 0,
      j = a.length,
      htmlStr = '<a href="javascript:fa_tabs.change(\'all\');">' + fa_tabs.lang.all + '</a>';
 
  // drop off the main container before the first category
  a[0] && a[0].parentNode.insertBefore(container, a[0]);
 
  // loop through each category
  for (; i < j; i++) {
    if (version == 2) var next = a[i].nextSibling;
 
    // create our tabs
    htmlStr += '<a href="javascript:fa_tabs.change(' + i + ');">' + ($('H2:first', a[i]).text() || fa_tabs.lang.placeholder + ' ' + i) + '</a>';
 
    // append the category to the list and hide it
    catglist.appendChild(a[i]);
    a[i].style.display = 'none';
 
    // get the next sibling as well for punbb
    if (version == 2) {
      catglist.appendChild(next);
      next.style.display = 'none';
    }
 
    fa_tabs.list[i] = a[i]; // cache the category to the array
  }
 
  if (fa_tabs.list[0]) {
    tablist.firstChild.firstChild.innerHTML = htmlStr; // fill in the tablist
    fa_tabs.tab = [].slice.call(tablist.getElementsByTagName('A')); // create an array for the tabs
    fa_tabs.tab.shift(); // remove the all tab
 
    fa_tabs.change(fa_tabs.active); // setup the active tab
 
    // finally add the content to the document
    frag.appendChild(tablist);
    frag.appendChild(catglist);
    container.appendChild(frag);
 
    window.setTimeout(function() {
      if (tablist.firstChild.scrollWidth > tablist.firstChild.clientWidth) {
        tablist.className = 'fa_tabs_overflow';
        tablist.firstChild.firstChild.style.marginLeft = '0px';
        tablist.insertAdjacentHTML('beforeend', '<a class="tab_scroller scroll_left" href="#" onmousedown="fa_tabs.scroll(1, 0); return false;" onclick="fa_tabs.stop(); return false;" onmouseout="fa_tabs.stop();"><</a><a class="tab_scroller scroll_right" href="#" onmousedown="fa_tabs.scroll(-1, -' + (tablist.firstChild.scrollWidth - tablist.firstChild.clientWidth) + '); return false;" onclick="fa_tabs.stop(); return false;" onmouseout="fa_tabs.stop();">></a>');
      }
    }, 100);
  }
});
 
$('head').append('<style type="text/css">#fa_tabs_title{color:#2474AF;font-size:24px;font-weight:400;font-family:arial,sans-serif;margin:3px;line-height:24px}.inner_tabs a,a.tab_scroller{font-family:arial,sans-serif;height:30px;line-height:30px}#fa_tablist{position:relative;white-space:nowrap}#fa_tablist.fa_tabs_overflow{padding:0 18px}.inner_tabs{overflow:hidden;padding-bottom:1px;margin-bottom:-1px}a.tab_scroller{color:#FFF;background:#333;font-size:16px;text-align:center;position:absolute;bottom:2px;width:15px;opacity:.1}a.tab_scroller.scroll_left{left:0}a.tab_scroller.scroll_right{right:0}#fa_tablist:hover a.tab_scroller{opacity:.7}#fa_tablist a.tab_scroller:hover{opacity:1}#fa_catglist{background:transparent;border:1px solid #CCC;border-radius:3px;padding:10px 6px}.inner_tabs a{color:#2474AF !important;background:#DDD;border:1px solid #CCC;border-bottom:none;border-radius:3px 3px 0 0;text-decoration:none!important;font-size:12px;font-weight:700;display:inline-block;padding:0 10px;margin:3px 3px 0}.inner_tabs a.fa_tabactif,.inner_tabs a:hover{background:#EEE;position:relative;bottom:-1px;opacity:1}</style>');

Bump.. Can someone help me make this javascript work please?

hello

Ange says here http://fmdesign.forumotion.com/t472-category-tabs#5772
that

• The amount of tabs you can display is limitless ! If the tabs exceed the overall width of the forum, scrollable arrows will be added so you can scroll through the tabs.

You could try increasing the forum's width to see what it looks like.

SLGray wrote:You could try increasing the forum's width to see what it looks like.

Thanks for your reply @SLGray I already have tried that before when I imported that skin, but our members who are very traumatised persons complained the page looks to busy, to crowded, they lost oversight or overview.. I don't know exactly how to explain it right in English, but for them the size it has now works, so I have to maintain it, otherwise I already would 've put the forum at pagewide..

as a guest right now i can see your forum with the scrollbar

skouliki wrote:as a guest right now i can see your forum with the scrollbar

Thanks for your reply, but how is that possible @skouliki ? The Category in Tabs Script is deactivated due to the lack of a scrollbar.. what scrollbar are you talking about?

skouliki wrote:hello

Ange says here http://fmdesign.forumotion.com/t472-category-tabs#5772
that

• The amount of tabs you can display is limitless ! If the tabs exceed the overall width of the forum, scrollable arrows will be added so you can scroll through the tabs.

I'm sorry @skouliki I overlooked this reply but yes that's exactly what it should do, but what it doesn't do..
I get all the tabs in there but no scrollable arrows, and since there are more tabs than the overall width of the forum it stretches out the page all the way to the right even exceeding my visible screen and put a horizontal scrollbar at the bottom of the page instead of the scrollable arrows besides the tabs.. So I disabled the script again for now on my official forum because it made the page quite 'unreadable' for us..

Add the code again so we can see it.

SLGray wrote:Add the code again so we can see it.

Thanks for your reply @SLGray it's on again now on my official forum, I hope we can solve this but as a guest you can't see all the tabs, so it will look alright to you, because those that are shown don't exceed the forumwidth limit as I showed you in a previous post with a screenshot..

This is my Offical Forum

How many categories are there?  I see 6 tabs?

SLGray wrote:How many categories are there?  I see 6 tabs?

Yes but that's the ones that are visible to guests, I actally have 9 categories with large titles..

Could have a test account, please?

SLGray wrote:Could have a test account, please?

A regular members account @SLGray or do you need admin rights?