Want to make a frame around background

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • Morwyn
    New Member
    • Nov 2004
    • 10
    • 3.0.3

    Want to make a frame around background

    Hello,

    On my website , I want to add a "frame" around the "parchment" background, the pic containing everything except the copyright and the logo.
    This frame would be of six pictures arranged like that:



    4 corners and 4 extensible pics on the side.

    My questions are:

    1) What should the code look like ?
    2) More importantly (maybe i can figure out the code), in which file should I include this code ?

    Thank you
    Last edited by Morwyn; Sat 25 Jun '05, 5:01am.
  • Jake Bunce
    Senior Member
    • Dec 2000
    • 46598
    • 3.6.x

    #2
    I would do it with a table. Go to your:

    Admin CP -> Styles & Templates -> Style Manager -> Common Templates (in the menu)

    Add the red code to your header and footer:

    header:

    Code:
    <!-- logo -->
    <a name="top"></a>
    <table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">
    <tr>
    	<td align="$stylevar[left]"><a href="$vboptions[forumhome].php?$session[sessionurl]"><img src="$stylevar[titleimage]" border="0" alt="$vboptions[bbtitle]" /></a></td>
    	<td align="$stylevar[right]">
    		&nbsp;
    <!--
      NEW HEADER &amp; NAVBAR
      
      Now that the nav buttons are in the
      navbar template, you can stick whatever
      you like into this space.
    
      This makes it much easier for novice
      admins to customize their header
      template without affecting important
      navigation elements.
    -->
    	</td>
    </tr>
    </table>
    <!-- /logo -->
    
    [color=red]<table cellpadding="0" cellspacing="0" border="0" align="center">
    <tr>
    	<td width="10" height="10" style="background: #123456 url(path/to/topleft.gif);"></td>
    	<td height="10" style="background: #123456 url(path/to/top.gif);"></td>
    	<td width="10" height="10" style="background: #123456 url(path/to/topright.gif);"></td>
    </tr>
    <tr>
    	<td width="10" style="background: #123456 url(path/to/left/left.gif);"></td>
    	<td valign="top">[/color]
    
    <!-- content table -->
    $spacer_open
    
    $_phpinclude_output
    footer:

    Code:
    <br />
    <div class="smallfont" align="center">$vbphrase[all_times_are_gmt_x_time_now_is_y]</div>
    <br />
    
    $spacer_close
    <!-- /content area table -->
    
    [color=red]	</td>
    	<td width="10" style="background: #123456 url(path/to/right.gif);"></td>
    </tr>
    <tr>
    	<td width="10" height="10" style="background: #123456 url(path/to/bottomleft.gif);"></td>
    	<td height="10" style="background: #123456 url(path/to/bottom.gif);"></td>
    	<td width="10" height="10" style="background: #123456 url(path/to/bottomright.gif);"></td>
    </tr>
    </table>[/color]
    
    <form action="$vboptions[forumhome].php" method="get">
    	
    <table cellpadding="$stylevar[cellpadding]" cellspacing="0" border="0" width="$stylevar[outertablewidth]" class="page" align="center">
    <tr>
    	<if condition="$show['quickchooser']">
    		<td class="tfoot">
    			<select name="styleid" id="ressel" onchange="switch_styleid(this)">
    				<optgroup label="$vbphrase[quick_style_chooser]">
    					$quickchooserbits
    				</optgroup>
    			</select>
    		</td>
    	</if>
    	<td class="tfoot" align="$stylevar[right]">
    		<div class="smallfont">
    			<strong>
    				<a href="$vboptions[contactuslink]">$vbphrase[contact_us]</a> -
    				<a href="$vboptions[homeurl]">$vboptions[hometitle]</a> -
    				<if condition="$show['admincplink']"><a href="$admincpdir/index.php?$session[sessionurl]">$vbphrase[admin]</a> -</if>
    				<if condition="$show['modcplink']"><a href="$modcpdir/index.php?$session[sessionurl]">$vbphrase[mod]</a> -</if>
    				<if condition="$vboptions['archiveenabled']"><a href="archive/index.php">$vbphrase[archive]</a> -</if>
    				<!-- - <a href="$vboptions[privacyurl]">$vbphrase[privacy_statement]</a> - -->
    				<a href="#top" onclick="self.scrollTo(0, 0); return false;">$vbphrase[top]</a>
    			</strong>
    		</div>
    	</td>
    </tr>
    </table>
    
    <br />
    
    <div align="center">
    	<div class="smallfont" align="center">
    	<!-- Do not remove this copyright notice -->
    	$vbphrase[powered_by_vbulletin]
    	<!-- Do not remove this copyright notice -->
    	</div>
    	
    	<div class="smallfont" align="center">
    	<!-- Do not remove $cronimage or your scheduled tasks will cease to function -->
    	$cronimage
    	<!-- Do not remove $cronimage or your scheduled tasks will cease to function -->
    	
    	$vboptions[copyrighttext]
    	</div>
    </div>
    
    </form>
    
    <if condition="$show['dst_correction']">
    <!-- auto DST correction code -->
    <form action="profile.php" method="post" name="dstform">
    	<input type="hidden" name="s" value="$session[sessionhash]" />
    	<input type="hidden" name="do" value="dst" />
    </form>
    <script type="text/javascript">
    <!--
    	var tzOffset = $bbuserinfo[timezoneoffset] + $bbuserinfo[dstonoff];
    	var utcOffset = new Date().getTimezoneOffset() / 60;
    	if (Math.abs(tzOffset + utcOffset) == 1)
    	{	// Dst offset is 1 so its changed
    		document.forms.dstform.submit();
    	}
    //-->
    </script>
    <!-- / auto DST correction code -->
    </if>
    
    <script type="text/javascript">
    <!--
    	// Main vBulletin Javascript Initialization
    	vBulletin_init();
    
    	// Initialize 'Active' Table Cells
    	//vBulletin_init();
    //-->
    </script>
    Change the widths, color codes, and image paths appropriately.

    Comment

    • Morwyn
      New Member
      • Nov 2004
      • 10
      • 3.0.3

      #3
      Ok, going to give it a try. Thx for your reply , I will certainly edit this message afterward.


      [EDIT]

      For some reason, when applying the exact same code as yours it was not showing up the pics. I checked the path and it was ok. Then I deleted the bg color (#blabla) and was not working either. I then changed the "background" to "background-image" and I entered the full path of the images and now it works fine.
      So I can't tell wich of these 2 modifs, full path or background-image worked but now it is ok, thank you very much ^_^.
      Last edited by Morwyn; Sat 27 Nov '04, 1:12pm.

      Comment

      • Jake Bunce
        Senior Member
        • Dec 2000
        • 46598
        • 3.6.x

        #4


        Looks like the border on my site.

        Comment

        • Morwyn
          New Member
          • Nov 2004
          • 10
          • 3.0.3

          #5
          Yes it is *cough*, thank you ^_^. That's exactly what I wanted, I didn't have to cut/play with any pic so I "just took it". Let me know if that's a problem. I'm lucky u got a WoW website too, and a nice one ;p.

          Comment

          • Jake Bunce
            Senior Member
            • Dec 2000
            • 46598
            • 3.6.x

            #6
            I don't mind. It is more inspired than it is a blatant ripoff; I did some borrowing of my own when making my site. Just don't go and copy my entire site.
            Last edited by Jake Bunce; Sat 27 Nov '04, 6:06pm.

            Comment

            • Morwyn
              New Member
              • Nov 2004
              • 10
              • 3.0.3

              #7
              Nah of course, the design is almost done now, can check it it's quite different .
              Last edited by Morwyn; Sat 25 Jun '05, 5:01am.

              Comment

              widgetinstance 262 (Related Topics) skipped due to lack of content & hide_module_if_empty option.
              Working...