[RD] Vertical menu in banner?

[Peacey =]]

URL: phoenixtest.proboards.com/index.cgi

I've used a code before that allowed me to put the menu buttons in the banner but listed them vertically so it would look like:

Home
New Topics
Help
etc.

instead of:

Home New Topics Help...

I've been looking for quite a while and can but can only find codes like California's
<script type="text/javascript">
<!--
/* menu buttons inside banner by california */

var imgURL = "URL OF BANNER IMAGE";
var imgWidth = "730";
var imgHeight = "250";
var menuXpos = "15";
var menuYpos = "25";

var iCell = document.getElementsByTagName("td");
iCell[1].style.backgroundImage = 'url('+imgURL+')';
iCell[1].style.height = imgHeight+"px";
iCell[1].align = "left";
iCell[1].vAlign = "top";
document.getElementsByTagName("table")[0].width = imgWidth;
iCell[1].innerHTML = '<div style="position: relative; top: '+menuYpos+
'px; left: '+menuXpos+'px;">'+iCell[5].innerHTML+'</div>';
iCell[2].style.display = "none";
document.getElementsByTagName("tr")[2].style.display = "none";

// -->
</script>
Can anyone help? Thanks.

[SubDevo]

Hi. Try this. The Blue is the part I added.

<script type="text/javascript">
<!--
/* menu buttons inside banner by california */

var imgURL = "URL OF BANNER IMAGE";
var imgWidth = "730";
var imgHeight = "250";
var menuXpos = "15";
var menuYpos = "25";

var iCell = document.getElementsByTagName("td");
iCell[1].style.backgroundImage = 'url('+imgURL+')';
iCell[1].style.height = imgHeight+"px";
iCell[1].align = "left";
iCell[1].vAlign = "top";
document.getElementsByTagName("table")[0].width = imgWidth;
iCell[1].innerHTML = '<div style="position: relative; top: '+menuYpos+
'px; left: '+menuXpos+'px;">'+iCell[5].innerHTML.replace(/a>.*?<a/gi,"a><br \/><a")+'</div>';
iCell[2].style.display = "none";
document.getElementsByTagName("tr")[2].style.display = "none";

// -->
</script>

Regards,
SubDevo

[Peacey =]]

That worked, thankyou!

Another question: is there a way to make the links more spaced out?
Eg.

Home


New Topics


Help

[Andrew.McGivery]

just added onto sub's code

<script type="text/javascript">
<!--
/* menu buttons inside banner by california */

var imgURL = "URL OF BANNER IMAGE";
var imgWidth = "730";
var imgHeight = "250";
var menuXpos = "15";
var menuYpos = "25";

var iCell = document.getElementsByTagName("td");
iCell[1].style.backgroundImage = 'url('+imgURL+')';
iCell[1].style.height = imgHeight+"px";
iCell[1].align = "left";
iCell[1].vAlign = "top";
document.getElementsByTagName("table")[0].width = imgWidth;
iCell[1].innerHTML = '<div style="position: relative; top: '+menuYpos+
'px; left: '+menuXpos+'px;">'+iCell[5].innerHTML.replace(/a>.*?<a/gi,"a><br \/><br \/><a")+'</div>';
iCell[2].style.display = "none";
document.getElementsByTagName("tr")[2].style.display = "none";

// -->
</script>

[SubDevo]

Feb 20, 2011 12:32:13 GMT -8 Peacey =] said:

That worked, thankyou!

Another question: is there a way to make the links more spaced out?
Eg.

Home


New Topics


Help

Sure, just copy/paste the Blue into the same line.

replace(/a>.*?<a/gi,"a><br \/><a")

So, for 2 lines between, it would be this.

replace(/a>.*?<a/gi,"a><br \/><br \/><a")

Regards,
SubDevo

[Peacey =]]

That worked too, thankyou again (to both of you).
And one final question - is there a way to change the size of the menu text?

[SubDevo]

Feb 20, 2011 13:43:33 GMT -8 Peacey =] said:

That worked too, thankyou again (to both of you).
And one final question - is there a way to change the size of the menu text?

Put this in your Global Header.

<style type="text/css">
.welcomebg div font {font-size: 20px;}
</style>

This will change the menu text size ONLY with the california code.

[Peacey =]]

Thankyou ;D

[SubDevo]

You're welcome.