OSCOMMERCE SUPPORT CALL 702-453-3332

 

Help - Search - Members - Calendar
Full Version: Help reducing header and footer width
osCommerce Community Support Forums > osCommerce Online Merchant v2.x > Installation and Configuration
Darky10
I have tried to narrow the grey header and footer bars, so they are inline with the boxes on either side. The layout is bog standard. It did work but then a gap appeared about a quarter way along the bar.

Would also like to place the search and advanced search functions inside the grey header bar

Lastly, and i know i'm pushing it here is

I have removed the new products for month box and the other log in guest or create a new account stuff, to where i have just a blank white space. I would like to showcase products here with boxes 2 across and maybe 10 down. Similar to www.ebuyer.com

Any guidance would be much appreciated as these 3 things are troublesome. If anything, the boxes to show products is most important, the rest not so, but would make it look nicer.

thanks

Darky
spax
1, There's a number of ways to achieve that. You could save a 1x1 gif, the same colour as your background and include it at the start and end of the grey bar. You could include an empty cell, however wide you need, either side of it (need to remove the footer class from the <tr> tag). You could do it with CSS. You could remove all padding and spacing from containing tables holding the columns. blah blah.

2, I lifted this from one of my developments. Put in a <td> or <div> and alter to suit.

CODE
<span class="yourClassHere">Keyword quick search</span>
<?php echo tep_draw_form('quick_find', tep_href_link(FILENAME_ADVANCED_SEARCH_RESULT, '', 'NONSSL', false), 'get'); ?>

         <?php echo tep_draw_input_field('keywords', '', 'size="20" maxlength="50"  style="width:120; height:22; position:relative;left:20;top:-3;"  onmousedown="this.value=\'\'" value="Type here"   class="look"') . tep_hide_session_id() . '        ' . tep_image_submit('button_quick_find.gif', BOX_HEADING_SEARCH) . '<br><a class="anotherClass" href="' . tep_href_link(FILENAME_ADVANCED_SEARCH) . '"><p align="center"><b>' . BOX_SEARCH_ADVANCED_SEARCH . '</b></p></a>'; ?>
          </form>


Note the CSS classes you'll need to create.

3, Try something like Wolfen Featured Sets
Darky10
QUOTE (spax @ Feb 9 2007, 01:19 AM) *
1, There's a number of ways to achieve that. You could save a 1x1 gif, the same colour as your background and include it at the start and end of the grey bar. You could include an empty cell, however wide you need, either side of it (need to remove the footer class from the <tr> tag). You could do it with CSS. You could remove all padding and spacing from containing tables holding the columns. blah blah.

2, I lifted this from one of my developments. Put in a <td> or <div> and alter to suit.

CODE
<span class="yourClassHere">Keyword quick search</span>
<?php echo tep_draw_form('quick_find', tep_href_link(FILENAME_ADVANCED_SEARCH_RESULT, '', 'NONSSL', false), 'get'); ?>

         <?php echo tep_draw_input_field('keywords', '', 'size="20" maxlength="50"  style="width:120; height:22; position:relative;left:20;top:-3;"  onmousedown="this.value=\'\'" value="Type here"   class="look"') . tep_hide_session_id() . '        ' . tep_image_submit('button_quick_find.gif', BOX_HEADING_SEARCH) . '<br><a class="anotherClass" href="' . tep_href_link(FILENAME_ADVANCED_SEARCH) . '"><p align="center"><b>' . BOX_SEARCH_ADVANCED_SEARCH . '</b></p></a>'; ?>
          </form>


Note the CSS classes you'll need to create.

3, Try something like Wolfen Featured Sets
Darky10
Thanks for helping.

Problem 3 i can probably do. Are there any similar options like Wolfen sets?, it looks close to what i was looking for, although it does not seem to be completely enclosing the products.

Could you elaborate on 1. & 2. I really need instructions, if possible as i have just started working with the cart. So for Q2. probably need full code and instructions.

I know i'm stupid, but everyone needs to start at the beginning.

Thanks
bill110
q2 http://www.oscommerce.com/community/contributions,3295

q1 in the header or fopter.php whichever has the gap there may be a cell padding or cell spacing tag that you need to set to 0
spax
I must have lifted that code from the wrong file as it isn't totally accurate. If you want to try it, use this instead.

CODE
<td valign="middle" class="headerNavigation">Search
<?php echo tep_draw_form('quick_find', tep_href_link(FILENAME_ADVANCED_SEARCH_RESULT, '', 'NONSSL', false), 'get'); ?>

         <?php echo tep_draw_input_field('keywords', '', 'size="20" maxlength="50"  style="width:120; height:20; position:relative;left:0;top:0;"  onmousedown="this.value=\'\'" value="Type here" class="boxText"') . tep_hide_session_id() . '  <a class="headerNavigation" href="' . tep_href_link(FILENAME_ADVANCED_SEARCH) . '"><b>' . BOX_SEARCH_ADVANCED_SEARCH . '</b></p></a>'; ?>
          </form></td>


If you open up includes/header.php in your text editor, you will find this code

CODE
<td class="headerNavigation">  <?php echo $breadcrumb->trail(' ยป '); ?></td>


Just add my code to the next line. BTW, I added - font-weight : normal; - to the boxText class in stylesheet.css so the search box text wasn't bold. I used boxText so the font-size was the same as the rest.

Now I haven't used that in the breadcrumb bar before and when I tried it, it expanded the grey bar height. I will try to make it look better later. But you can try for now and see what results you get.

For the first question, if you look in index.php, at the start of the HTML code, you will see this

CODE
<!-- body //-->
<table border="0" width="100%" cellspacing="3" cellpadding="3">
  <tr>
    <td width="<?php echo BOX_WIDTH; ?>" valign="top"><table border="0" width="<?php echo BOX_WIDTH; ?>" cellspacing="0" cellpadding="2">
<!-- left_navigation //-->
<?php require(DIR_WS_INCLUDES . 'column_left.php'); ?>
<!-- left_navigation_eof //-->


Then further down, at the bottom, this

CODE
<!-- body_text_eof //-->
    <td width="<?php echo BOX_WIDTH; ?>" valign="top"><table border="0" width="<?php echo BOX_WIDTH; ?>" cellspacing="0" cellpadding="2">
<!-- right_navigation //-->
<?php require(DIR_WS_INCLUDES . 'column_right.php'); ?>
<!-- right_navigation_eof //-->


If you set the cellspacing and cellpadding values to "0" that will make your boxes line up to the grey bar. If you do it that way though, you would have to make the same change to all root level files. Not a problem if you have a text editor with a search and replace function.
Also, using that method, being as it would make the boxes sit right on the grey bar, you will probably want to add some padding, margins or seperator gifs somewhere else, to make it look better.

If you want to make the grey bar size to the boxes instead, one way would be to include empty cells, the width you require. For example, in includes/footer.php find this code

CODE
<table border="0" width="100%" cellspacing="0" cellpadding="1">
  <tr class="footer">
    <td class="footer">  <?php echo strftime(DATE_FORMAT_LONG); ?>  </td>
    <td align="right" class="footer">  <?php echo $counter_now . ' ' . FOOTER_TEXT_REQUESTS_SINCE . ' ' . $counter_startdate_formatted; ?>  </td>
  </tr>
</table>


You can remove the class="footer" from the row <tr> as it adds a background color and put in a new cell each end with no background color, the width you want. Like this

CODE
<table border="0" width="100%" cellspacing="0" cellpadding="1">
  <tr>
    <td width="10"></td>
    <td class="footer">  <?php echo strftime(DATE_FORMAT_LONG); ?>  </td>
    <td align="right" class="footer">  <?php echo $counter_now . ' ' . FOOTER_TEXT_REQUESTS_SINCE . ' ' . $counter_startdate_formatted; ?>  </td>
    <td width="10"></td>
  </tr>
</table>


Do the same for includes/header.php and you only need to change the 2 files.

There are lots of ways to achieve the result you want, just make sure you always make a copy of any file you are going to change first, then jump in and pull it apart.
Darky10
Thanks for whats been provided so far.

The search function works well, and also embeds itself in the bar. It did increase the size. I had increased the cellpadding on the header to 8, with the search i reduced it to 2 to narrow it a bit. But i might want to increase the size at some future stage.

It would be handy if there was a search button [i think it is quicker the way it is, just enter and it performs the search], may be good to try both, see what works. Be good to see the box centered. On other pages it did centre, this was probably due to other text on the bar pushing the search box across. Those two things would cap of a very good piece of work. The search function sat to the far left as standard.

I had the cell padding set to 7 on the footer, which increased the width, The footer bar matched up with the side boxes when i reduced the padding to 4, and reduced the <td width="1"></td> to 1. That was the only way it worked. Is it possible to reduce the bar inline with the side boxes, but keep the bar width?

Could not get the code to work on the header. What part of the header does the code go?

Thanks again for all your help
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2008 Invision Power Services, Inc.