www.webdeveloper.com
Results 1 to 3 of 3

Thread: Vbulletin forum layout

  1. #1
    Join Date
    Dec 2003
    Location
    UK
    Posts
    1,141

    Vbulletin forum layout

    Hey guys im looking for a little help. As you can see from my forum

    What i need is for the header at the top to be changed. Now i dont code using tables for layout so dont really know how to change it to css. What i need is the logo like it is on the left and a series of links horizontally at the right hand side. Now im not looking for anyone to code to the menu just to help with the structure i.e a logo box floated left and menu box floated right.

    Heres the current code:

    Code:
    <!-- start header part -->
    <a name="top"></a>
    <table width="85%" align="center" cellpadding="0"  cellspacing="0" class="wrapper" style="height:100%;">
      <tr>
        <td class="leftborder">&nbsp;</td>
        <td valign="top" class="centerbgcolor"><table width="100%"  cellspacing="0" cellpadding="0">
          <tr>
            <td class="headerwrap"><table width="100%"  cellspacing="0" cellpadding="0">
              <tr>
                <td class="logowrap"><a href="$vboptions[forumhome].php$session[sessionurl_q]"><img src="images/merahitam/spacer.gif" alt="$vboptions[bbtitle]" width="350" height="115" border="0"></a></td>
                <td>&nsbp;</td>
              </tr>
            </table></td>
          </tr>
          <tr>
            <td class="navwrap">
    <!-- nav buttons bar -->
    <div align="center">
        <table id="navstyle" cellpadding="$stylevar[cellpadding]" cellspacing="0" border="0" width="100%" align="center" style="border-top-width:0px">
        <tr align="center">
            <if condition="$show['member']">
                <td><a href="usercp.php$session[sessionurl_q]">$vbphrase[user_cp]</a></td>
            </if>
            <if condition="$show['registerbutton']">
                <td><a href="register.php$session[sessionurl_q]" rel="nofollow">$vbphrase[register]</a></td>
            </if>
            $template_hook[navbar_buttons_left]
            <td><a href="faq.php$session[sessionurl_q]" accesskey="5">$vbphrase[faq]</a></td>
            <td><a href="memberlist.php$session[sessionurl_q]">$vbphrase[members_list]</a></td>
            <td><a href="calendar.php$session[sessionurl_q]">$vbphrase[calendar]</a></td>
            <if condition="$show['popups']">       
                <if condition="$show['searchbuttons']">
                    <if condition="$show['member']">
                    <td><a href="search.php?$session[sessionurl]do=getnew" accesskey="2">$vbphrase[new_posts_nav]</a></td>
                    <else />
                    <td><a href="search.php?$session[sessionurl]do=getdaily" accesskey="2">$vbphrase[todays_posts]</a></td>
                    </if>
                    <td id="navbar_search" ><a href="search.php$session[sessionurl_q]" accesskey="4" rel="nofollow">$vbphrase[search]</a> <if condition="$show['quicksearch']"><script type="text/javascript"> vbmenu_register("navbar_search"); </script></if></td>
                </if>
                <if condition="$show['member']">
                    <td id="usercptools" ><a href="$show[nojs_link]#usercptools">$vbphrase[quick_links]</a> <script type="text/javascript"> vbmenu_register("usercptools"); </script></td>       
                </if>
            <else />       
                <if condition="$show['searchbuttons']">
                    <td><a href="search.php$session[sessionurl_q]" accesskey="4">$vbphrase[search]</a></td>
                    <if condition="$show['member']">
                    <td><a href="search.php?$session[sessionurl]do=getnew" accesskey="2">$vbphrase[new_posts_nav]</a></td>
                    <else />
                    <td><a href="search.php?$session[sessionurl]do=getdaily" accesskey="2">$vbphrase[todays_posts]</a></td>
                    </if>
                </if>
                <td><a href="forumdisplay.php?$session[sessionurl]do=markread" rel="nofollow">$vbphrase[mark_forums_read]</a></td>
                <if condition="$show['member']">           
                    <td><a href="#" onclick="window.open('misc.php?$session[sessionurl]do=buddylist&amp;focus=1','buddylist','statusbar=no,menubar=no,toolbar=no,scrollbars=yes,resizable=yes,width=250,height=300'); return false;">$vbphrase[open_buddy_list]</a></td>           
                </if>           
            </if>
            $template_hook[navbar_buttons_right]
            <if condition="$show['member']">
                <td><a href="login.php?$session[sessionurl]do=logout&amp;logouthash=$bbuserinfo[logouthash]" onclick="return log_out('$vbphrase[sure_you_want_to_log_out]')">$vbphrase[log_out]</a></td>
            </if>
        </tr>
        </table>
    </div>
    <!-- / nav buttons bar -->
    
    </td>
          </tr>
          <tr>
            <td valign="top">
    <!-- /end header part -->
    
    <!-- content table -->
    $spacer_open
    
    $_phpinclude_output
    Anyhelp is much appreciated

  2. #2
    Join Date
    Jun 2007
    Posts
    183
    Well i would typically use a unordered list with the list items displayed inline with some sort of padding around them for the nav area not sure how the vbscript (or whatever that script is) in there will affect that though. As for the logo I generally use an image replacement method to replace an h1 with an image. Or you can just have a header div with an image in it.

    Examples below are pulled directly from a site i did play around with it to see what does what, and see if it helps a bit.
    Example of a ul nav area:

    <ul id="top-nav">
    <li><a href="index.html">Home</a></li>
    <li><a href="ourschool/mission.html">Our School</a></li>
    <li><a href="team/team.html">Educational Team</a></li>

    <li><a href="calendar/cal_monthly.html">Calendars</a></li>
    <li><a href="news/news.html">News</a></li>
    <li><a href="curriculum/nad_guidelines.html">Curriculum</a></li>
    <li><a href="registration/registration.html">Registration</a></li>
    <li><a href="handbook.html">Handbook</a></li>
    <li><a href="http://www.andrews.edu/%7Etouchard/m-l.html">My Library</a></li>

    <li><a href="http://www.edline.net/Index.page">Edline</a></li>
    <li><a href="contact/contact.html">Contact Us</a></li>
    </ul>
    The css to go with this:

    ul#top-nav {
    background-image: url(../images/topbar.jpg);
    background-repeat: no-repeat;
    text-align: center;
    color: #fff;
    font-size: .8em;
    height: 22px;
    padding-top: 7px;
    overflow: hidden;
    }

    ul#top-nav li {
    display: inline;
    }

    ul#top-nav li a {
    padding: 7px 5px 7px 5px;
    }

    ul#top-nav a:link {color: #fff;}
    ul#top-nav a:visited {color: #fff;}
    ul#top-nav a:hover {background-image: url(../images/topbar-hover.jpg) ;background-color: #003500; text-decoration: none;}

  3. #3
    Join Date
    Jun 2007
    Posts
    183
    What you could do is have the image floated left and just have the menu contain a margin on the left and not floated of course then you might run into some IE6 issues, floating the menu to the right isn't a bad idea though.

    <div id="header">
    <img src="header image here"> <!--this floated left-->

    <div id="nav-bar">nav here</div><!--this floated right-->
    </div>
    Might need to give them widths though.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles