1
defwind77
Block across the screen?
  • 2005/11/16 13:47

  • defwind77

  • Not too shy to talk

  • Posts: 180

  • Since: 2005/11/11


Ok how can I make a block stretch right across the screen?

Currently I'm building a site and XOOPS seems to have loads of great features that make this easy - however how can I set a block to stretch right across the screen - see at the top of this screen where it has the logo in the topleft and a banner - how can I add another block like that just below it - loads of sites use this to have a menu going across the top.

I'm using multimenu to make a menu however when it's set to 'centre middle' and the lowest weighting it still appears next to the left and right boxes, rather than above them..

Any ideas?

2
davidthomas1
Re: Block across the screen?

You can make a horizontal menu with MultiMenu 1.7

In Admin>MultiMenu>Preferences

You can choose which menu (1-8) to show as a horizontal menu bar.

You need to insert this line into your theme.html

<!-- navibar set -->
<{include 
file="../modules/multiMenu/theme/multimenu.php"}>


where you want the menu to appear.

HIH
みんなちがってみんないい。

XOOPS 2.0.13.2

3
defwind77
Re: Block across the screen?
  • 2005/11/16 13:58

  • defwind77

  • Not too shy to talk

  • Posts: 180

  • Since: 2005/11/11


ok - so do i get the theme.html off the server or can you get to it within xoops?

And is there an easy way to know where to put it - my manual html is non-existant.... ;)

4
bluenova
Re: Block across the screen?

You can't do it from within xoops. The easiest way is to download your theme.html and open it with a graphical html editor, then you can just add the code to table cell at the top of the page. Make a backup of the original theme.html then upload your new version. If it doesn't look quite right, just play around till it looks how you want it.

5
defwind77
Re: Block across the screen?
  • 2005/11/16 16:07

  • defwind77

  • Not too shy to talk

  • Posts: 180

  • Since: 2005/11/11


ok here's my theme.html - You can see where I've added the snippet - but it's not appearing - I've added it to my default theme and to my current theme - nothing appears...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<{$xoops_langcode}>" lang="<{$xoops_langcode}>">
<head>
<title><{$xoops_sitename}> - <{$xoops_pagetitle}></title>
<meta http-equiv="content-type" content="text/html; charset=<{$xoops_charset}>" />
<meta http-equiv="content-language" content="<{$xoops_langcode}>" />
<meta name="description" content="<{$xoops_meta_description}>" />
<meta name="keywords" content="<{$xoops_meta_keywords}>" />
<meta http-equiv="pragma" content="no-cache" />
<meta name="robots" content="<{$xoops_meta_robots}>" />
<meta name="rating" content="<{$xoops_meta_rating}>" />
<meta name="author" content="<{$xoops_meta_author}>" />
<meta name="copyright" content="<{$xoops_meta_copyright}>" />
<meta name="generator" content="XOOPS" />
<link href="<{$xoops_url}>/favicon.ico" rel="SHORTCUT ICON" />
<link rel="stylesheet" type="text/css" media="screen" href="<{$xoops_url}>/xoops.css" />
<link rel="stylesheet" type="text/css" media="screen" href="<{$xoops_themecss}>" />

<!-- RMV: added module header -->
<{$xoops_module_header}>
<script type="text/javascript">
<!--
<{$xoops_js}>
//-->
</script>
<script type="text/javascript">
</script>
<script type="text/javascript" src="<{$xoops_imageurl}>js/adminmenu.js"></script>
<script type="text/javascript" src="<{$xoops_imageurl}>js/ie5.js"></script>
<script type="text/javascript">
function toggle(notifs_form)
{
obj=document.getElementById(notifs_form);
obj.style.display=!(obj.style.display=="block")? "block" : "none";
}

function swapimage(swap)
{
img_plus="<{$xoops_imageurl}>images/plus.gif";
img_minus="<{$xoops_imageurl}>images/minus.gif";
obj=document.getElementById(swap);
obj.src=!(obj.src==img_minus)? img_minus : img_plus;
}

</script>
</head>
<body>
<table cellspacing="0" class="pagehead">
<tr id="header">
<td id="headerlogo"><a href="<{$xoops_url}>/"><img src="<{$xoops_imageurl}>/images/logo.gif" alt="<{$xoops_pagetitle}>" border="0" /></a></td>
<td id="headerbanner"><{$xoops_banner}></td>
</tr>
<tr>
<td id="headerbar" colspan="2"><{include file="cleanblue/navigation/theme_usernav.html"}><!-- navibar set -->
<{include file="../modules/multiMenu/theme/multimenu.php"}></td><br />
</tr>
</table>
<table cellspacing="0">
<tr>
<td id="leftcolumn">
<!-- Start left blocks loop -->
<{foreach item=block from=$xoops_lblocks}>
<{include file="cleanblue/theme_blockleft.html"}>
<{/foreach}>
<!-- End left blocks loop -->

</td>

<td id="centercolumn">

<!-- Display center blocks if any -->
<{if $xoops_showcblock == 1}>

<table cellspacing="0">
<tr>
<td id="centerCcolumn" colspan="2">

<!-- Start center-center blocks loop -->
<{foreach item=block from=$xoops_ccblocks}>
<{include file="cleanblue/theme_blockcenter_c.html"}>
<{/foreach}>
<!-- End center-center blocks loop -->

</td>
</tr>
<tr>
<td id="centerLcolumn">

<!-- Start center-left blocks loop -->
<{foreach item=block from=$xoops_clblocks}>
<{include file="cleanblue/theme_blockcenter_l.html"}>
<{/foreach}>
<!-- End center-left blocks loop -->

</td><td id="centerRcolumn">

<!-- Start center-right blocks loop -->
<{foreach item=block from=$xoops_crblocks}>
<{include file="cleanblue/theme_blockcenter_r.html"}>
<{/foreach}>
<!-- End center-right blocks loop -->

</td>
</tr>
</table>

<{/if}>
<!-- End display center blocks -->
<div id="content">
<{$xoops_contents}>
</div>
</td>

<{if $xoops_showrblock == 1}>

<td id="rightcolumn">
<!-- Start right blocks loop -->
<{foreach item=block from=$xoops_rblocks}>
<{include file="cleanblue/theme_blockright.html"}>
<{/foreach}>
<!-- End right blocks loop -->
</td>

<{/if}>

</tr>
</table>
<table cellspacing="0" cellpadding="0">
<tr>
<td width="100%" id="footerbar">
<br />
<{$xoops_footer}><br />
Page Load Statistics: <{php}> $querycount = 0; foreach ($GLOBALS['xoopsLogger']->queries as $context) { $querycount += count($context); } echo round(($GLOBALS['xoopsLogger']->dumpTime()), 3)." Seconds | ".$querycount." Queries"; <{/php}>
<br />
<!-- A link back to MyWebResource is nice, but not required. -->
Theme by <a href="http://mywebresource.com/" target="_blank">MyWebResource</a><br /><br />
<!--End "Theme by" text -->
</td>
</tr>
</table>
<script type="text/javascript">
var menu1 = new AdMenu("menu1");
menu1.position.level1.top = 1;
menu1.position.level1.left = 0;
menu1.position.levelX.top = 0;
menu1.position.levelX.left = 0;
menu1.init();
</script>
<!-- USER NAVIGATION BAR END -->
</body>
</html>

6
cgunther
Re: Block across the screen?
  • 2005/11/16 17:27

  • cgunther

  • Just popping in

  • Posts: 59

  • Since: 2005/3/27


It sounds like you may need to go to the system preferences control panel and update your template. Look in General Settings for "Update module template .html files from themes/your theme/templates directory?", choose yes and submit. See if this makes your block visible.
"Your motherboard wears Army chips"

7
defwind77
Re: Block across the screen?
  • 2005/11/20 12:43

  • defwind77

  • Not too shy to talk

  • Posts: 180

  • Since: 2005/11/11


hmm ok I've added the bar to my theme.html and it appears correctly - see www.cgenie.net - however I believe it is using the same css colours as the text in the main window - eg see the news -

how can I make it use the same colours as the usermenu? Effectivly it's all fine it's just when the mouse is NOT hovering over it, it needs to be white. I've hunted all through the style.css and a just can't find any reference!



html { overflow-x: auto; }
body {color: #333333; background: #FFFFFF; margin: 0; padding: 2px;}

div.container { width: 768px;}

table {width: 100%; margin: 5; padding: 5; font-size: x-small}
table td {padding: 0; border-width: 0; vertical-align: top; font-family: Verdana, Arial, Helvetica,

sans-serif;}

a {color: #5f7693; text-decoration: none; font-weight: bold; background-color: transparent;}
a:hover {color: #99ccff;}

h1 {}
h2 {}
h3 {}
h4 {}
h5 {}
ul { margin: 2px; padding: 2px; list-style: decimal inside; text-align: left;}
li { margin-left: 2px; list-style: square inside; color: #5f7693;}

/* Nav bar start...*/
#navbar {background: #5F7693;border-bottom: 1px solid #CCCCCC;padding-top: 2px;padding-bottom:

2px;padding-left: 5px;cursor: default;}

.NavMenu {font-family: Verdana,Tahoma,Georgia,sans-serif;font-size: 11px;/*-moz-user-select: none;*/}

.NavMenu .button,
.NavMenu .button:hover,
.NavMenu .button-active,
.NavMenu .button-active:hover {line-height: normal;padding: 3px 6px 3px 6px;border: 1px solid #5f7693;

color: #ffffff;text-decoration: none;font-family: Tahoma,Georgia,sans-serif;font-size: 11px;font-weight:

bold;cursor: default;white-space: nowrap;display: block;position: relative;}

.NavMenu .button:hover {border-color: #C2DDFF #C2DDFF #C2DDFF #C2DDFF;color: #C2DDFF;}

.NavMenu .button-active,
.NavMenu .button-active:hover {border-color: #C2DDFF #C2DDFF #C2DDFF #C2DDFF;color: #C2DDFF;}

.NavMenu .item,
.NavMenu .item:hover,
.NavMenu .item-active,
.NavMenu .item-active:hover {background-color: #ffffff;font-family: Tahoma,Georgia,sans-serif;font-size:

11px;line-height: normal;padding: 3px 16px 4px 10px;color: #676767;border: 0px solid

transparent;text-decoration: none;font-weight: bold;cursor: default;white-space: nowrap;display:

block;position: relative;}

.NavMenu .item:hover,
.NavMenu .item-active,
.NavMenu .item-active:hover {background-color: #5F7693;color: #C2DDFF;border: 0px solid #5F7693;}

.NavMenu .section {background-color: #ffffff;border: 1px solid #b8b4ae;position: absolute;visibility:

hidden;z-index: -1;}

.NavMenu .arrow {position: absolute;top: 7px;right: 8px;border: 0px none;}

.NavMenu hr{height: 1px;width: 90%;border: 0px none;color: #24237f;background-color: #5F7693;}

* html .NavMenu td { position: relative;} /* ie 5.0 fix */
/* ...Nav bar end */
td#date {color: #ffffff;width: 20%;text-align: left;vertical-align: middle;padding-left:

5px;font-weight: bold;font-size: 90%;}
td#search {width: 95%;text-align: right;vertical-align: middle;padding-right: 10px;}
input.formButton {}

.item {border: 1px solid #cccccc;}
.itemHead {padding: 3px; background-color: #5f7693; color: #FFFFFF;}
.itemInfo {text-align: right; padding: 3px; background-color: #c2ddff; border-bottom:1px dashed

#cccccc;}
.itemTitle a {font-size: 110%; font-weight: bold; font-variant: small-caps; color: #ffffff;

background-color: transparent;}
.itemTitle a:hover {text-decoration: underline;}
.itemPoster {font-size: 90%; font-style:italic;}
.itemPostDate {font-size: 90%; font-style:italic;}
.itemStats {font-size: 90%; font-style:italic;}
.itemBody {padding-left: 5px;}
.itemText {margin-top: 5px; margin-bottom: 5px; line-height: 1.5em;}
.itemText:first-letter {font-size: 110%; font-weight: bold;}
.itemFoot {text-align: right; padding: 3px; background-color: #c2ddff; border-top:1px dashed #cccccc;}
.itemAdminLink {font-size: 90%;}
.itemPermaLink {font-size: 90%;}

th {background-color: #5f7693; color: #FFFFFF; padding : 2px; vertical-align : middle; font-family:

Verdana, Arial, Helvetica, sans-serif;}
th a {color:#FFFFFF;}
th a:hover {color:#FFFFFF; text-decoration:underline;}

.pagehead {padding-bottom:2px; margin-bottom:2px;}
td#headerlogo { padding-left: 5px; padding-bottom:5px; vertical-align : middle; text-align:center;}
td#headerlogo .main {color: #5F7693; font-size:42px; font-weight:bold; letter-spacing:12px;}
td#headerlogo .sub {color: #5F7693; font-size:12px; font-weight:bold; border-top: 1px solid #cccccc;

padding-top:2px;}

td#headerbanner {width: 100%; vertical-align: bottom; text-align:right; padding-top:2px;

padding-bottom:2px;}
td#headerbar {/*border-bottom: 1px solid #cccccc; border-top: 1px solid #cccccc;*/ text-align:left;

/*color:#cccccc; padding-top:2px; padding-bottom:2px; font-size:10px;*/height: 20px;}

td#leftcolumn {width: 170px; border-right: 1px solid #cccccc; font-size:10px;}
td#leftcolumn th {background-color: #5f7693; color: #FFFFFF; vertical-align: middle;}
td#leftcolumn div.blockTitle {padding: 3px; background-color: #5f7693; color: #ffffff; font-weight:

bold;}
td#leftcolumn div.blockContent {padding: 3px; line-height: 120%; line-height: 120%;}


td#centercolumn {font-size: 10px;}

td#centercolumn th {background-color: #5f7693; color: #FFFFFF; vertical-align: middle;}
td#centerCcolumn {padding: 0px 3px 1px 3px;}
td#centerCcolumn legend.blockTitle {padding: 3px; color: #5f7693; font-weight: bold; margin-top: 0px;

margin-right: 0px; margin-left: 0px;}
td#centerCcolumn div.blockContent {border-left: 1px solid #cccccc; border-right: 1px solid #cccccc;

border-bottom: 1px solid #cccccc; padding: 3px; margin-right: 0px; margin-left: 0px; margin-bottom:

2px; line-height: 120%;}

td#centerLcolumn {width: 50%; padding: 0px 3px 0px 0px;}
td#centerLcolumn legend.blockTitle {padding: 3px; color: #5f7693; font-weight: bold; margin-top: 0px;}
td#centerLcolumn div.blockContent {border-left: 1px solid #cccccc; border-right: 1px solid #cccccc;

border-bottom: 1px solid #cccccc; padding: 3px; margin-left: 3px; margin-right: 2px; margin-bottom: 2px;

line-height: 120%;}

td#centerRcolumn {width: 50%; padding: 0px 3px 0px 0px;}
td#centerRcolumn legend.blockTitle {padding: 3px; color: #5f7693; font-weight: bold; margin-top: 0px;}
td#centerRcolumn div.blockContent {border-left: 1px solid #cccccc; border-right: 1px solid #cccccc;

border-bottom: 1px solid #cccccc; padding: 3px; margin-left: 2px; margin-right: 3px; margin-bottom: 2px;

line-height: 120%;}

div#content {text-align: left; padding: 8px;}

td#rightcolumn {width: 170px; border-left: 1px solid #cccccc; font-size:10px;}
td#rightcolumn th {background-color: #5f7693; color: #FFFFFF; vertical-align: middle;}
td#rightcolumn div.blockTitle {padding: 3px; background-color: #5f7693; color: #ffffff; font-weight:

bold;}
td#rightcolumn div.blockContent {padding: 3px; line-height: 120%;}

tr#footerbar {}
td#footerbar {border-top: 1px solid #cccccc;color:#777777; font-size:10px; text-align:center;}

td#mainmenu a {display: block; margin: 0; padding: 4px;}
td#mainmenu a:hover {background-color: #c2ddff;}
td#mainmenu a.menuTop {padding-left: 3px;}
td#mainmenu a.menuMain {padding-left: 3px;}
td#mainmenu a.menuSub {padding-left: 9px;}

td#usermenu a {display: block; margin: 0; padding: 4px;}
td#usermenu a:hover {background-color: #c2ddff;}
td#usermenu a.menuTop {}
td#usermenu a.highlight {background-color: #fcc;}



.outer {border: 1px solid silver;}
.head {background-color: #8badd8; padding: 5px; font-weight: bold;}
.head a {color:#ffffff; }
.even {background-color: #C2DDFF; padding: 5px;}
.odd {background-color: #E0EEFF; padding: 5px;}
.foot {background-color: #8badd8; padding: 5px; font-weight: bold;}
tr.even td {background-color: #C2DDFF; padding: 5px;}
tr.odd td {background-color: #E0EEFF; padding: 5px;}

div.errorMsg { background-color: #FFCCCC; text-align: center; border-top: 1px solid #DDDDFF;

border-left: 1px solid #DDDDFF; border-right: 1px solid #AAAAAA; border-bottom: 1px solid #AAAAAA;

font-weight: bold; padding: 10px;}
div.confirmMsg { background-color: #DDFFDF; color: #136C99; text-align: center; border-top: 1px solid

#DDDDFF; border-left: 1px solid #DDDDFF; border-right: 1px solid #AAAAAA; border-bottom: 1px solid

#AAAAAA; font-weight: bold; padding: 10px;}
div.resultMsg { background-color : #CCCCCC; color: #333333; text-align: center; border-top: 1px solid

silver; border-left: 1px solid silver; font-weight: bold; border-right: 1px solid #666666;

border-bottom: 1px solid #666666; padding: 10px;}

div.xoopsCode {
font-size: 11px;
font-family: FixedSys, "Courier New",Courier,monospace;
background: #FAFAFA;
border: 1px solid #6C87B0;
color: #385a72;
width: 400px;
max-height: 250px;
margin: 0.5em;
overflow: auto;
padding: 5px;
}
div.xoopsQuote {
font-size: 11px;
font-family: FixedSys, "Courier New",Courier,monospace;
background: #FAFAFA;
border: 1px solid #6C87B0;
color: #385a72;
width: 400px;
max-height: 250px;
margin: 0.5em;
overflow: auto;
padding: 5px;
}
.comTitle a { text-decoration: none; }
.comTitle {/font-size: 110%;font-weight: normal;text-decoration: none;margin: 0px 0px .2em 0px;padding:

0px 0px 2px 0px;border-bottom: 1px solid #d0d0e0;}
.comText {/*position: relative;margin: 5px 5px 5px 15px;left: 120px;float: left;*/line-height:

1.5em;padding: 0px;}
.comUserStat {font-size: 10px; color: #436792; font-weight:bold; border: 1px solid silver;

background-color: #ffffff; margin: 2px; padding: 2px;}
.comUserStatCaption {font-weight: bold;}
.comUserStatus {color: #436792; font-weight:bold;}
.comUserRank {margin: 2px;}
.comUserRankText {font-size: 10px;font-weight:bold;}
.comUserRankImg {border: 0px none;}
.comUserName {}
.comUserImg {margin: 2px;}
.comDate {font-weight: normal; font-style: italic; font-size: smaller}
.comDateCaption {font-weight: bold; font-style: normal;}

.comUserdetails {float: left;/*position: relative;top: 50px;left: 10px;*/font-size: 0.85em;border: 1px

solid #d0d0e0;background-color: #fff9ef;padding: 3px;/*margin: 5px 5px 5px 5px;*/text-align:

left;margin: 5px 10px 5px 0px;z-index: 0; }
.comUserName {font-weight: bold;font-size: 110%;}

.comIcons {float: right;position: relative;font-size: 0.85em;top: -25px;right: 5px;}
.com_tl {background-image: url('../images/news_tl.gif');background-position: 0% 0%;background-repeat:

no-repeat;position: relative;top: -1px;left: -1px}
.com_tr {background-image: url('../images/news_tr.gif');background-position: 100% 0%;background-repeat:

no-repeat;position: relative;left: 2px}
.com_br {background-image: url('../images/news_br.gif');background-position: 100%

100%;background-repeat: no-repeat;position: relative;top: 2px}
.com_bl {background-image: url('../images/news_bl.gif');background-position: 0% 100%;background-repeat:

no-repeat;position: relative;left: -2px;padding: .8em;overflow: hidden}
.comContainer {background-color: #ffffff;border: 1px solid #D0D0E0;position: relative;margin-bottom:

10px;z-index: 0;}

Login

Who's Online

195 user(s) are online (100 user(s) are browsing Support Forums)


Members: 0


Guests: 195


more...

Donat-O-Meter

Stats
Goal: $100.00
Due Date: Mar 31
Gross Amount: $0.00
Net Balance: $0.00
Left to go: $100.00
Make donations with PayPal!

Latest GitHub Commits