Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

npn2531

Pioneers
  • Posts

    1,159
  • Joined

  • Last visited

  • Days Won

    11

Everything posted by npn2531

  1. If you have to change anything to get this to validate to higher standards, post the change, I like to see it if can't be incorporated. Tables in manufacturers_info.php : I have left tables in where the shop presents data. A list of manufacturers with varying widths of names that wrap around in a short column in a chart with several columns, is one thing a table handles better than floating divs. The shopping cart is another example. You will see the CSS for styling these tables in the styles.css Currencies: Good catch. The currencies box I have posted is lacking the form. To fix it do two things: In styles.css change: #header .infobox_heading{ margin:-10px 0px 0px 0px; } to this: #header .infobox_heading{ margin:0px 0px 0px 0px; font-weight: normal; } and in includes/boxes/currencies.php just paste the following over everything in the box beneath the comments. This is the entire and correct code for the currencies box: if (isset($currencies) && is_object($currencies)) { ?> <!-- currencies --> <?php $info_box_contents = array(); $info_box_contents[] = array('text' => BOX_HEADING_CURRENCIES); new cssinfoBoxHeading($info_box_contents, false, false); reset($currencies->currencies); $currencies_array = array(); while (list($key, $value) = each($currencies->currencies)) { $currencies_array[] = array('id' => $key, 'text' => $value['title']); } $hidden_get_variables = ''; reset($HTTP_GET_VARS); while (list($key, $value) = each($HTTP_GET_VARS)) { if ( ($key != 'currency') && ($key != tep_session_name()) && ($key != 'x') && ($key != 'y') ) { $hidden_get_variables .= tep_draw_hidden_field($key, $value); } } $info_box_contents = array(); $info_box_contents[] = array('form' => tep_draw_form('currencies', tep_href_link(basename($PHP_SELF), '', $request_type, false), 'get'), 'text' => tep_draw_pull_down_menu('currency', $currencies_array, $currency, 'onChange="this.form.submit();" style="width: 80%"') . $hidden_get_variables . tep_hide_session_id()); new cssinfoBox($info_box_contents); } ?>
  2. I noticed you had a successful w3 validation as well. Note that there is a single column (left or right) version about ready.
  3. Whew! Thanks for working on this and spotting the issue. I'll get this fix posted on the contribution.
  4. the demo site at ninesixty should look fine on your end now. I have changed the unordered list to line breaks.
  5. On the information box includes/boxes/information.php, There is a typo. The closing /ul is missing the final >. If that doesn't fix it then just change the unordered list to just line breaks. There is a large default left margin on unordered lists. ie change this: '<div class="clear"></div><ul><li><a href="' . tep_href_link(FILENAME_SHIPPING) . '">' . BOX_INFORMATION_SHIPPING . '</a></li>' . '<li><a href="' . tep_href_link(FILENAME_PRIVACY) . '">' . BOX_INFORMATION_PRIVACY . '</a></li>' . '<li><a href="' . tep_href_link(FILENAME_CONDITIONS) . '">' . BOX_INFORMATION_CONDITIONS . '</a></li>' . '<li><a href="' . tep_href_link('faqs.php') . '">' . 'Faqs' . '</a></li>' . '<li><a href="' . tep_href_link(FILENAME_CONTACT_US) . '">' . BOX_INFORMATION_CONTACT . '</a></li></ul'); to this: '<div class="clear"></div><a href="' . tep_href_link(FILENAME_SHIPPING) . '">' . BOX_INFORMATION_SHIPPING . '</a><br>' . '<a href="' . tep_href_link(FILENAME_PRIVACY) . '">' . BOX_INFORMATION_PRIVACY . '</a><br>' . '<a href="' . tep_href_link(FILENAME_CONDITIONS) . '">' . BOX_INFORMATION_CONDITIONS . '</a><br>' . '<a href="' . tep_href_link('faqs.php') . '">' . 'Faqs' . '</a><br>' . '<a href="' . tep_href_link(FILENAME_CONTACT_US) . '">' . BOX_INFORMATION_CONTACT . '</a><br>');
  6. We are crossing posts, I'll focus on infoboxes.
  7. Before I get started, are you seeing this issue on all the pages, some of the pages, or just the index? try adding this to your stylesheet: .divider-tall{ clear:both; } That's left over from the old version and I see I didn't get them all, at least on the index page. That has been replaced by two selectors: .clear and .spacer In others words, class="divider-tall" should be class="clear spacer"
  8. The grid 960 system has strict rules on about adding borders, margins, padding to the left and right. It only takes one pixel to stack things up. The fix will be finding the offending selector one of the stylesheets, most likely in styles.css. On one or maybe two selectors a left or right border, padding, margin, or a pixel too much width has been added where it shouldn't be. I will start working through styles.css and see if I can't find it. The technique will simply be to work down the stylesheet removing borders then, padding, margins or finally widths from the selectors and see what fixes it. Most likely a border. It is also not beyond the realm of possibility that the problem is in one of the stylesheets for the JQuery elements, but not likely. However, don't touch the 960.css stylesheet. It is the pure unadulterated stylesheet from 960.gs site.
  9. In includes/classes/boxes.php the place to change is here, about line 76 class cssinfoBoxHeading extends csstableBox { function cssinfoBoxHeading($contents, $left_corner = true, $right_corner = true, $right_arrow = false) { $this->table_parameters = 'class="grid_2 alpha" '; if ($right_arrow == true) { $right_arrow = '<a href="' . $right_arrow . '">' . tep_image(DIR_WS_IMAGES . '../images/cssv2-arrow-right.png','arrow right','','',ICON_ARROW_RIGHT,'right_arrow') . '</a>'; } else { $right_arrow = ''; } : change the class="grid_2 alpha" to class="grid_4 alpha", or class="grid_3 alpha" This line below is not the place to change : $this->table_parameters = 'class="infobox"';
  10. Each column is written to be 2 grid 'units' wide and the center column is 8 'units' wide. The enter site is 12 'units' Remove the right column, and the left and center are still 2 and 8 wide. You can easily change the width of the left column by doing the following: 1) open template_bottom.php, and as you have done comment out or remove the right column. However be sure you also comment out or remove the containing grid_2 div, ie remove all this: <div class="grid_2" id="column_right"> <?php require(DIR_WS_INCLUDES . 'column_right.php'); ?> </div><!--close column right--> 2) open template_top.php and change the class="grid_2" paired with the id-"column_left" to class="grid_4" ie it should end up looking like this: <div class="grid_4" id="column_left"> <?php require(DIR_WS_INCLUDES . 'column_left.php'); ?> </div> 3) finally you need to expand the infoboxes. Open up includes/classes/boxes.php find this about line 78: $this->table_parameters = 'class="grid_2 alpha" '; change to: $this->table_parameters = 'class="grid_4 alpha" '; This will give you a pretty wide left column. Not ideal proportions. To make the the column_left 3 units wide use 3 instead of 4 in the above instructions. Now, unfortunately, the center column is still 8 units wide. You will need to go through each catalog and module page and change each row of divs to be a combination of 9 units wide instead of 8 units wide. ( and in template_top.php change <div class="grid_8" id="content"> to <div class="grid_9" id="content">) I will be releasing a left_column (or right_column) grid_3, center section grid_9 version in about a week for those, like myself, who prefer only one column.
  11. You can do what web developers have done since the dark ages. Isolate the situation and write a special rule in the stylesheet for IE that fixes that one glitch. In other words a CSS rule that all other browsers ignore. It is not really difficult to do. Here is a website that walks you through it: http://www.positioniseverything.net/articles/cc-plus.html or google 'IE' 'conditional statements' or similar. If you describe the problem and how I can observe it, I will see if I can't come up with something.
  12. Change the doctype in application_top.php to : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> That should help resolve the IE issue. It may nudge a header down a few pixels, though, and you may have to play with top padding in some of the header elements. Breadcrumbs: If you go to includes/header.php and give the breadcrumbs more room they may stop wrapping around. ie change: <!--Breadcrumbs --> <div class="grid_6 alpha"> to <!--Breadcrumbs --> <div class="grid_8 alpha"> and <!--currencies/manufacturers in header--> <div class="grid_3 push_3 omega"> to: <!--currencies/manufacturers in header--> <div class="grid_2 push_2 omega"> I see that you have the JQuery features working fine. That's a relief.
  13. ps, The alignment issue you are describing is kind of classic for floating issues. The rock solid 960 grid system fits all the pieces perfectly in place, with perfect width, exactly 960 pixels across. Thats why the reset.css is important. It resolves the discrepancies in how the different browsers calculate the 'box model' (google css and box model). It 'prevents' IE, for example, from adding width to any block level div that has a border other than '0'. If the website is calculated at 961px across instead of 960px, which can happen without the reset.css, then everything stacks up.
  14. Good catch. The instructions are indeed missing the part about the files reset.css and ui_tabs. (Plus the having 'upgrade' in the title of the instructions is a bit confusing. ) I'll post new instructions shortly. Please however, send me a link to your site so I can take a look before I post anything. The reset.css and ui_tabs.css file are included in the download (I just checked the OSCommerce site) and should be in your catalog/css folder. Add the call to the two in application_top.php and your alignment issue should resolve. In other words, what you paste into application_top.php should be: $doctype='<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/ DTD/xhtml1-transitional.dtd">'; $stylesheet=' <link rel="stylesheet" href="css/reset.css" /> <link rel="stylesheet" href="css/960.css" /> <link rel="stylesheet" href="css/text.css" /> <link rel="stylesheet" href="css/styles.css" /> <link rel="stylesheet" href="css/css-buttons.css" /> <link rel="stylesheet" href="css/superfish.css" /> <link rel="stylesheet" href="css/json-addtocart-themes.css" /> <link rel="stylesheet" href="css/ui_tabs.css" /> <link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></ script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js" type="text/ javascript"></script> <script type="text/javascript" src="javascript/jquery.prettyPhoto.js"></script> <script type="text/javascript" src="javascript/superfish.js"></script> <script type="text/javascript" src="javascript/osc_cart.js"></script> ';
  15. OSC to CSS version 2.0 :Convert OSCommerce 2.2RC2a to tableless CSS The new version of OSC to CSS has been posted at http://addons.oscommerce.com/info/7263 Support, demos and screenshots at: www.niora.com/css-oscommerce.php NEW FEATURES FOR V2: 960 Grid System: The 960 grid system facilitates alignment, proportion and layout issues. It speeds up design, creates consistency and solves cross browser problems. 4 new JQuery Features: Product Information Tabs, SuperFish Horizontal Navigation Bar, Json 'add to Cart' lightbox, and Pretty Photo Reorganized Stylesheets/ and Cleaner layout: CSS selectors are more intuitive and cleanly organized. Stylesheets are separated by component and function to facilitate quick design. The layout within the catalog pages is simplified, better notated and consistent. Infoboxes: Infoboxes are completely mobile, and can be placed anywhere on the shop and styled independently depending on their location Buttons: Buttons are CSS generated and have their own stylesheet. This feature can revert to standard buttons easily.
  16. Hi Pdcelec, It will be tedious to upgrade if you have installed contributions. A lot of stuff is going to be different. The new version will be far easier to learn and work with. If you haven't done much in the way of installing contributions I would hold off. It will be easy however to simply upload the new version directly on top of the old version. That will be just a matter of overwriting the catalog files. One thing you could do, however is upload your products and configure your store . There will be no changes to the database, or changes to the admin. I should have it ready this week.
  17. One solution is ditch the stock javascript popups on product_info.php and use one of the jquery lightbox contributions. Using Jquery fixes all those IE cross browser issues. Plus it not hard to install and looks way better. 'Pretty Photo' is a really nice example. See it in action here: www dot css-oscommerce dot com/index.php/ipod-ipod-touch-c-21_22_24
  18. PM me and I will email you the zip file of product_info.php off the demo.
  19. Hello Linus, These alignment issues are resolved in the Version 2 of OSc to CSS which I should have posted in about a week. The infoboxes are reworked and the entire layout is on the rock solid 960 grid system. (Google 'Grid 960' or visit 960.gs ). You can see the new version in progress at www dot alpha-clear dot com/ninesixty.
  20. Easy to install admin skin and optional coordinating admin login page. No layout or programming changes. Simply upload the included stylesheet and the four background images to your admin folder. Screenshots at www.niora.com/css-oscommerce.php http://addons.oscommerce.com/info/7524
  21. I do not have the source files for these. They are such simple gif's, that you should be able to just open them in photoshop in whatever form you need.
  22. Go to : blue_button and you can pull it off the site.
  23. Here is a cleaner way: Adjust the size of the header (or rather the space needed for the header) from the stylesheet. Open the stylesheet.css and find these two selectors: #header { position: absolute;top: 0px;width:945px;padding:0px 0px 0px 0px;margin:10px 0px 0px 0px;background-color: transparent; } #page { float: left;width: 945px;padding:0px 0px 0px 0px;margin:115px 0px 10px 0px;border:0px solid #666666;background-repeat:repeat-y;background-position:0px 0px; } Note the #header position is 'absolute'. That means it ignores the placement of anything else. Which is why it is overlapping your page content, or the #page container, when you make the header image bigger. However, note the #page margin:115px 0px 0px 0px. That first number 115px is the top margin in pixels above the #page container or div . Increase that number to push the content down more and allow for the increased size of your header.
  24. It is done differently. I have posted instructions and examples on how to do a roll over button on the CSS-OSC here: http://www.niora.com/oscommerce-ultimate-buttons.php PS - because you are using OSC to CSS you do not need change includes/functions/html_output.php. It is mostly already done. Just make sure the class="buttons_submit" in on the referenced functions.
×
×
  • Create New...