Shorten this and move the shoutbox..

[MobFox]

Forum URL: (private)

i would like the shoutbox not to be soo long and have the Traffic on the right side of the shoutbox and to be not taller than each other.

Attachments:

[Ulises]

Hey MobFox

You first need to move the code you have for "traffic" to the forum wrapper layout template and add a class to it for modification with CSS. To do that navigate to Admin Home > Themes > Layout Templates > Forum Wrapper and copy/paste the following (I have already added the class name for you) right on a new line after the $[shoutbox] variable:

<div class="traffic-container"><script type="text/javascript" src="http://feedjit.com/serve/?vv=1515&amp;tft=3&amp;dd=0&amp;wid=&amp;pid=0&amp;proid=0&amp;bc=5C636B&amp;tc=FFFFFF&amp;brd1=336699&amp;lnk=B5CDE6&amp;hc=FFFFFF&amp;hfc=464E52&amp;btn=1E2224&amp;ww=200&amp;went=10"></script><noscript><a href="http://feedjit.com/">Live Traffic Stats</a></noscript></div>
<div style="clear:both">

Then go to your style sheet, Themes > Advanced Styles & CSS > Style Sheet (tab), and add the following to the bottom of the style sheet:

.traffic-container {
    float: right;
}

.shoutbox.container.full {
    float: left;
    width: 80%;
}

Adjust the width to your preference.

[MobFox]

Oct 27, 2017 12:02:18 GMT -8 Ulises said:

Hey MobFox

You first need to move the code you have for "traffic" to the forum wrapper layout template and add a class to it for modification with CSS. To do that navigate to Admin Home > Themes > Layout Templates > Forum Wrapper and copy/paste the following (I have already added the class name for you) right on a new line after the $[shoutbox] variable:

<div class="traffic-container"><script type="text/javascript" src="http://feedjit.com/serve/?vv=1515&amp;tft=3&amp;dd=0&amp;wid=&amp;pid=0&amp;proid=0&amp;bc=5C636B&amp;tc=FFFFFF&amp;brd1=336699&amp;lnk=B5CDE6&amp;hc=FFFFFF&amp;hfc=464E52&amp;btn=1E2224&amp;ww=200&amp;went=10"></script><noscript><a href="http://feedjit.com/">Live Traffic Stats</a></noscript></div>
<div style="clear:both">

Then go to your style sheet, Themes > Advanced Styles & CSS > Style Sheet (tab), and add the following to the bottom of the style sheet:

.traffic-container {
    float: right;
}

.shoutbox.container.full {
    float: left;
    width: 80%;
}

Adjust the width to your preference.

do i have to do this for each theme?

[Ulises]

You could move the CSS to the global header like so:

 <script>
.traffic-container {
    float: right;
}

.shoutbox.container.full {
    float: left;
    width: 80%;
} 
</script>

But the layout template edit you need to do for every theme.