vb.org Archive

vb.org Archive (https://vborg.vbsupport.ru/index.php)
-   vB3 Design and Graphics Discussions (https://vborg.vbsupport.ru/forumdisplay.php?f=168)
-   -   Different width for Navbar and page content (https://vborg.vbsupport.ru/showthread.php?t=138704)

TheMilkCarton 02-07-2007 07:44 AM
Different width for Navbar and page content
 
1 Attachment(s)
Hi,

I've been fooling around with the templates, but I can't seem to figure out how to keep the banner and navbar at a fixed width of 800px, while adding a 15-20px margin on each side of the rest of the page.

No matter what I've tried, the navbar stays the same width as the forums (about 760px) instead of staying fixed at 800px even when I force the width to 800px in the template.

The default theme here at vb.org is exactly what I'm talking about, for anyone not using the default theme I'll attach a screenshot.

This is a seemingly simple task, at least compared to the other modifications I've made to my forum, but I still can't figure this one out.

Thanks for your help

Edit: Well, after trying again.. (I've learned alot more HTML & CSS since the first time I tried) I added:

Code:
style="position:relative;right:20px;"
in two different places in the navbar template, because increasing the "Spacer Size" to 20px caused the Navbar to jut off the right edge of the forums by 20px.

If there's an easier, non-positioning method to do this please, please let me know.

Thank you!

Staxed 02-07-2007 02:13 PM
can't check right now while i'm at work (can't get to my test forum behind the firewall)...but I recall i've done it before a simpler way...i'll check when i get home.

what are the two places you put that code in though?

TheMilkCarton 02-07-2007 04:26 PM
Quote:
Originally Posted by Irisfire (Post 1176791)
what are the two places you put that code in though?
I had to add the position:relative to 2 different tables, and change the width=100% to width=800.

PHP Code:
<!-- breadcrumb, login, pm info -->
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="1" border="0" width="800" align="center" style="position:relative;right:10px;"> 
and

PHP Code:
<!-- nav buttons bar -->
<div align="center">
    <table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="0" border="0" width="800" align="center" style="border-top-width:0px;position:relative;right:10px;"> 
It's not that bad or anything, I just don't like using position:relative on a table because I'm not sure if it displays properly on all browsers or whatever. I'm also sure there's an easier way than using positioning..

Let me know when you get home, thanks!

Quantnet 02-08-2007 03:53 AM
Irisfire,

I'd like to know this as well. Thanks

TheMilkCarton 02-08-2007 11:14 AM
Quantnet,

I figured out the easiest way to do it.

Remove from the header template:

PHP Code:
$spacer_open 
---------

In navbar template:

Add to the last line:

PHP Code:
$spacer_open 


Find:

PHP Code:
<!-- breadcrumb, login, pm info -->
<table...width="100%"> 
AND
PHP Code:
<!-- nav buttons bar -->
<div align="center">
    <table...width="100%"> 
Change both 100% to the same pixel width as your banner, i.e. "800"

---------

If you use vBadvanced, add
Quote:
spacer_open
to the "Portal Output Global Variables" in the vBa CMPS Default Settings. Do not include the $ for this step.

Quantnet 02-08-2007 01:29 PM
TheMilkCarton

Thanks for the guide. Can i see the template where you made this change ?

I'm basically looking for a similar look like vb.org default Blue lagoon with 95% width.

It seems to me you have a fixed width skin while I only have fluid skins.

Is there anything different if i want to add 15px on both side of my fluid skin with a solid color like here ?

TheMilkCarton 02-08-2007 05:52 PM
Well, in that case, use the same % as your header. If your banner is 95% then make the two changes to 95% in the navbar template. Your header is probably 100%, so you won't have to make any changes to the width of navbar.

If you want to add 15px on each side of your forum, just go to Style Manager and in "Sizes and Dimensions" change Main Table Width to the same width as your navbar and header, i.e. 95%, and then change Spacer Size to 15. This would make the forums 30px skinnier than the navbar and header at all times.

peterle1 05-29-2008 11:23 AM
Quote:
Originally Posted by TheMilkCarton (Post 1177463)
Quantnet,

I figured out the easiest way to do it.

Remove from the header template:

PHP Code:
$spacer_open 
---------

In navbar template:

Add to the last line:

PHP Code:
$spacer_open 


Find:

PHP Code:
<!-- breadcrumb, login, pm info -->
<table...width="100%"> 
AND
PHP Code:
<!-- nav buttons bar -->
<div align="center">
    <table...width="100%"> 
Change both 100% to the same pixel width as your banner, i.e. "800"
Could it be that this doesn't work any longer in 3.7?

Ohiosweetheart 05-29-2008 10:19 PM
Dunno. Anytime I want a full-width navbar, I move the nav buttons bar code from the navbar template to the header template.
Works every time.

nerbert 05-31-2008 07:47 PM
Check the footer, which is wider than the navbar. It begins with the following:

Code:
<table cellpadding="$stylevar[cellpadding]" cellspacing="0" border="0" width="$stylevar[outertablewidth]" class="page" align="center">
The navbar begins:

Code:
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">

I'm no expert but this looks like the difference. Note the difference between the width specs.

peterle1 06-01-2008 06:07 PM
You mean to change the 100% to $stylevar[outertablewidth]?

Tried it and can see no difference at all. :(

--------------- Added [DATE]1212351678[/DATE] at [TIME]1212351678[/TIME] ---------------

Got it!
It's the USC hack, which breaks this little hack .. :p

nerbert 06-01-2008 06:21 PM
Quote:
Originally Posted by peterle1 (Post 1538085)
You mean to change the 100% to $stylevar[outertablewidth]?

Tried it and can see no difference at all. :(
Is the footer on your forum wider than the other elements on the page? Here on Vbulletin.org the navbar and the footer are wide and everything in between is narrower, on mine the navbar is the same width as the the stuff in between.

--------------- Added [DATE]1212354268[/DATE] at [TIME]1212354268[/TIME] ---------------

Here's the difference (I think). To widen the navbar you must change class from "tborder" to "page" and change width from"100%" to "$stylevar[outertablewidth]"


All times are GMT. The time now is 02:11 PM.

Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2025, vBulletin Solutions Inc.

X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.02753 seconds
  • Memory Usage 1,765KB
  • Queries Executed 10 (?)
More Information
Template Usage:
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (3)bbcode_code_printable
  • (10)bbcode_php_printable
  • (4)bbcode_quote_printable
  • (1)footer
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (6)option
  • (1)post_thanks_navbar_search
  • (1)printthread
  • (12)printthreadbit
  • (1)spacer_close
  • (1)spacer_open 
Phrase Groups Available:
  • global
  • postbit
  • showthread
Included Files:
  • ./printthread.php
  • ./global.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/class_hook.php
  • ./includes/modsystem_functions.php
  • ./includes/class_bbcode_alt.php
  • ./includes/class_bbcode.php
  • ./includes/functions_bigthree.php 
Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • printthread_start
  • bbcode_fetch_tags
  • bbcode_create
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • printthread_post
  • printthread_complete