Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

OSC to CSS v2


npn2531

Recommended Posts

thanks for that. I had got an image in the body for across the top of the screen. I added another div below it, followed your instruction and now have one top and bottom. I have found another site wide XHTML tip. Wrap the form elements in a fieldset in HTML_OUTPUT. I have now got index.php to validate as XHTML Strict. I have just installed the one page checkout 6646, and in the process of converting it to css.Now I have got my head around these grids, it makes it much easier to move sections around to customize the pages.

Link to comment
Share on other sites

  • Replies 152
  • Created
  • Last Reply

Top Posters In This Topic

Be sure you figure out how to use the 960.gs tags prefix_x, suffix_x, push_x and pull_x, alpha and omega. You get those six down, you are well on your way to being a grid expert. The 960 grid is pretty amazing.

 

I would like to get an organized picture somehow of how you have gotten this to XHTML strict, in a way I can repeat on my end. I spent a few hours on it a day or so ago, and just lost patience. It's pretty impressive you've managed to do it. Perhaps you can send me some started tips on this.

Oscommerce site:

 

 

OSC to CSS, http://addons.oscommerce.com/info/7263 -Mail Manager, http://addons.oscommerce.com/info/8120

Link to comment
Share on other sites

XHTL Strict tips

 

These 4 will cure the bulk of all errors

 

1. In whats_new.php and specials.php (and any other file with a strikethrough) replace the <s> and </s> with <span class="strikethrough"></span> and add a class .strikethrough to the text.css

.strikethrough{

text-decoration: strike-through;

}

 

2. Replace all <br> with <br /> (I opened all files and did a "search and replace" using notepad++)

 

3. A very tedious one. XHTML does not accept capital letters so all form functions need changing

onSubmit to onsubmit, (onclick, onfocus and others the same)

 

4.here is part of my html_output file (this cures about 50 to 60% on its own)

// BEGIN: CSS Buttons Everywhere

 

function tep_image_submit($image, $value = '-AltValue-', $parameters = '') {

 

global $language;

 

$css_submit = '<fieldset><input type="submit" class="cssButton-submit" value="' . tep_output_string($value) . '" /></fieldset>';

 

return $css_submit;

 

 

}

 

 

// END: CSS Buttons Everywhere

 

 

 

 

 

 

 

 

////

// Output a function button in the selected language

/* function tep_image_button($image, $alt = '', $parameters = '') {

global $language;

 

return tep_image(DIR_WS_LANGUAGES . $language . '/images/buttons/' . $image, $alt, '', '', $parameters);

 

 

} */

 

// BEGIN: CSS Buttons Everywhere

 

function tep_image_button($image, $value = '-AltValue-', $parameters = '') {

 

global $language;

 

$width = round((strlen($value) * 5.8),0) + 38;

 

$image = '<div class="cssButton" style="width: '.$width.'px;"> ' . tep_output_string($value) . ' </div>';

 

return $image;

 

}

 

// END: CSS Buttons Everywhere

 

 

 

 

////

// Output a separator either through whitespace, or with an image

function tep_draw_separator($image = 'pixel_black.gif', $width = '100%', $height = '1') {

return tep_image(DIR_WS_IMAGES . $image, '', $width, $height);

}

 

////

// Output a form

function tep_draw_form($name, $action, $method = 'post', $parameters = '') {

// $form = '<form name="' . tep_output_string($name) . '" action="' . tep_output_string($action) . '" method="' . tep_output_string($method) . '" id="' . tep_output_string($name)'"';

$form = '<fieldset><form class="' . tep_output_string($name) . '" action="' . tep_output_string($action) . '" method="' . tep_output_string($method) . '"';

if (tep_not_null($parameters)) $form .= ' ' . $parameters;

 

$form .= '></form></fieldset>';

 

return $form;

}

 

////

// Output a form input field

function tep_draw_input_field($name, $value = '', $parameters = 'class="input-style"', $type = 'text', $reinsert_value = true) {

global $_GET, $_POST;

 

$field = '<fieldset><input type="' . tep_output_string($type) . '" name="' . tep_output_string($name) . '"';

 

if ( ($reinsert_value == true) && ( (isset($_GET[$name]) && is_string($_GET[$name])) || (isset($_POST[$name]) && is_string($_POST[$name])) ) ) {

if (isset($_GET[$name]) && is_string($_GET[$name])) {

$value = stripslashes($_GET[$name]);

} elseif (isset($_POST[$name]) && is_string($_POST[$name])) {

$value = stripslashes($_POST[$name]);

}

}

 

if (tep_not_null($value)) {

$field .= ' value="' . tep_output_string($value) . '"';

}

 

if (tep_not_null($parameters)) $field .= ' ' . $parameters;

 

$field .= ' /></fieldset>';

// $field .= 'class="input-style">';

 

 

return $field;

}

 

////

// Output a form password field

function tep_draw_password_field($name, $value = '', $parameters = 'maxlength="40" class="input-style"') {

return tep_draw_input_field($name, $value, $parameters, 'password', false);

}

 

 

////

// Output a selection field - alias function for tep_draw_checkbox_field() and tep_draw_radio_field()

function tep_draw_selection_field($name, $type, $value = '', $checked = false, $parameters = '') {

global $_GET, $_POST;

 

$selection = '<fieldset><input type="' . tep_output_string($type) . '" name="' . tep_output_string($name) . '"';

 

if (tep_not_null($value)) $selection .= ' value="' . tep_output_string($value) . '"';

 

if ( ($checked == true) || (isset($_GET[$name]) && is_string($_GET[$name]) && (($_GET[$name] == 'on') || (stripslashes($_GET[$name]) == $value))) || (isset($_POST[$name]) && is_string($_POST[$name]) && (($_POST[$name] == 'on') || (stripslashes($_POST[$name]) == $value))) ) {

$selection .= 'checked="checked"';

}

 

if (tep_not_null($parameters)) $selection .= ' ' . $parameters;

 

$selection .= '></fieldset>';

 

return $selection;

}

 

////

// Output a form checkbox field

function tep_draw_checkbox_field($name, $value = '', $checked = false, $parameters = '') {

return tep_draw_selection_field($name, 'checkbox', $value, $checked, $parameters);

}

 

////

// Output a form radio field

function tep_draw_radio_field($name, $value = '', $checked = false, $parameters = '') {

return tep_draw_selection_field($name, 'radio', $value, $checked, $parameters);

}

 

////

// Output a form textarea field

function tep_draw_textarea_field($name, $wrap, $width, $height, $text = '', $parameters = '', $reinsert_value = true) {

global $_GET, $_POST;

 

$field = '<textarea name="' . tep_output_string($name) . '" wrap="' . tep_output_string($wrap) . '" cols="' . tep_output_string($width) . '" rows="' . tep_output_string($height) . '"';

 

if (tep_not_null($parameters)) $field .= ' ' . $parameters;

 

$field .= '>';

 

if ( ($reinsert_value == true) && ( (isset($_GET[$name]) && is_string($_GET[$name])) || (isset($_POST[$name]) && is_string($_POST[$name])) ) ) {

if (isset($_GET[$name]) && is_string($_GET[$name])) {

$field .= tep_output_string_protected(stripslashes($_GET[$name]));

} elseif (isset($_POST[$name]) && is_string($_POST[$name])) {

$field .= tep_output_string_protected(stripslashes($_POST[$name]));

}

} elseif (tep_not_null($text)) {

$field .= tep_output_string_protected($text);

}

 

$field .= '</textarea>';

 

return $field;

}

 

////

// Output a form hidden field

function tep_draw_hidden_field($name, $value = '', $parameters = '') {

global $_GET, $_POST;

 

$field = '<fieldset><input type="hidden" name="' . tep_output_string($name) . '"';

 

if (tep_not_null($value)) {

$field .= ' value="' . tep_output_string($value) . '"';

} elseif ( (isset($_GET[$name]) && is_string($_GET[$name])) || (isset($_POST[$name]) && is_string($_POST[$name])) ) {

if ( (isset($_GET[$name]) && is_string($_GET[$name])) ) {

$field .= ' value="' . tep_output_string(stripslashes($_GET[$name])) . '"';

} elseif ( (isset($_POST[$name]) && is_string($_POST[$name])) ) {

$field .= ' value="' . tep_output_string(stripslashes($_POST[$name])) . '"';

}

}

 

if (tep_not_null($parameters)) $field .= ' ' . $parameters;

 

$field .= '></fieldset>';

 

return $field;

}

 

////

// Hide form elements

function tep_hide_session_id() {

global $session_started, $SID;

 

if (($session_started == true) && tep_not_null($SID)) {

return tep_draw_hidden_field(tep_session_name(), tep_session_id());

}

}

 

////

// Output a form pull down menu

function tep_draw_pull_down_menu($name, $values, $default = '', $parameters = '', $required = false) {

global $_GET, $_POST;

 

$field = '<fieldset><select name="' . tep_output_string($name) . '"';

 

if (tep_not_null($parameters)) $field .= ' ' . $parameters;

 

$field .= '>';

 

if (empty($default) && ( (isset($_GET[$name]) && is_string($_GET[$name])) || (isset($_POST[$name]) && is_string($_POST[$name])) ) ) {

if (isset($_GET[$name]) && is_string($_GET[$name])) {

$default = stripslashes($_GET[$name]);

} elseif (isset($_POST[$name]) && is_string($_POST[$name])) {

$default = stripslashes($_POST[$name]);

}

}

 

for ($i=0, $n=sizeof($values); $i<$n; $i++) {

$field .= '<option value="' . tep_output_string($values[$i]['id']) . '"';

if ($default == $values[$i]['id']) {

 

$field .= 'selected="selected"';

 

}

 

$field .= '>' . tep_output_string($values[$i]['text'], array('"' => '"', '\'' => ''', '<' => '<', '>' => '>')) . '</option>';

}

$field .= '</select></fieldset>';

 

if ($required == true) $field .= TEXT_FIELD_REQUIRED;

 

return $field;

}

Link to comment
Share on other sites

got it, thanks!

 

wait, wasn't there some errors in the header related to stuff like <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" > and such?

Edited by npn2531

Oscommerce site:

 

 

OSC to CSS, http://addons.oscommerce.com/info/7263 -Mail Manager, http://addons.oscommerce.com/info/8120

Link to comment
Share on other sites

got it, thanks!

 

wait, wasn't there some errors in the header related to stuff like <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" > and such?

 

In languages/english.php I have

// Global entries for the <html> tag

define('HTML_PARAMS',' xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"');

 

which is different to the test site

Link to comment
Share on other sites

I have something strange happening. The sign in button takes me to advanced search result. I am trying to backtrack on some changes but everything else seems ok.

 

It only happens if I turn off the search box in column left. I assume that the form is not ending

Link to comment
Share on other sites

It only happens if I turn off the search box in column left. I assume that the form is not ending

 

I have solved that one. It was a misiing </form> (which I had taken out)

 

I have a problem now with column right. I have put a bar going across the page and noticed that column right is lower than column left. I have searched for possible reasons and cannot seem to find the answer

Link to comment
Share on other sites

The right column is lower than the right because the text on the right is within <p></p> tags and the text on the left is not. Look just below the h4 tags.

Oscommerce site:

 

 

OSC to CSS, http://addons.oscommerce.com/info/7263 -Mail Manager, http://addons.oscommerce.com/info/8120

Link to comment
Share on other sites

To me, the question is website security. From what I can gather 2.3 offers new features and enhanced security. On www.dot clubosc dot com, they are running through some of the new features. None I have read so far would be compelling enough for me personally to convert 2.3 to OSC. I've seen more exciting contributions. If there is going to be a solid way to upgrade 2.2 with all the security features that 2.3 will have, then I will just add to my existing OSC to CSS 2.2 site these security features.

Oscommerce site:

 

 

OSC to CSS, http://addons.oscommerce.com/info/7263 -Mail Manager, http://addons.oscommerce.com/info/8120

Link to comment
Share on other sites

Hi all!

 

I had a problem to decompress the last full package of OSC2CSS with winrar (and also with other stuff). Did you recognize this issue? I have just downloaded it many times but the result was the same, no succesful unpack at all ( path not found 1132 times on the archive)

 

Thanks,

FG

Link to comment
Share on other sites

I have successfully upgraded osc to css V2 to RC2.3. It took alot of time but there are not really that many changes. Mainly little alterations here and there. I have yet to implement the new header tags module and other modules, but after 14 hours of changes, I have had enough for one day

Link to comment
Share on other sites

Hi all!

 

I had a problem to decompress the last full package of OSC2CSS with winrar (and also with other stuff). Did you recognize this issue? I have just downloaded it many times but the result was the same, no succesful unpack at all ( path not found 1132 times on the archive)

 

Thanks,

FG

 

I had the same, but I think it is referring to the MACOS files, as I have it successfully installed

Link to comment
Share on other sites

got it, thanks!

 

wait, wasn't there some errors in the header related to stuff like <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" > and such?

 

replace with

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

and

<base href="<?php echo (($request_type == 'SSL') ? HTTPS_SERVER : HTTP_SERVER) . DIR_WS_CATALOG; ?>">

replace with

<base href="<?php echo (($request_type == 'SSL') ? HTTPS_SERVER : HTTP_SERVER) . DIR_WS_CATALOG; ?>" />

Link to comment
Share on other sites

Thanks!

converting to 2.3: Impressive! You are inspiring me to get this done as well as the W3 validation, and it is nice to know it can be done.

 

I have reverted back to XHTML Transitional as Strict does not allow Target="" (they recommend a workaround using javascript)

 

The W3C CSS2.1 does not like the MOZ kit for the buttons but I believe Harald is adding UI buttons to V2.3 at the moment so that may fix that one.

Link to comment
Share on other sites

The 'target' is no big deal, and there must surely be an updated version of 'target' that validates. Check google. Target="blank" for example simple opens the link in a new window, a really common function. If you took out all the instances of target from the OSC to CSS nothing integral or important to OSC to CSS would be changed.

Edited by npn2531

Oscommerce site:

 

 

OSC to CSS, http://addons.oscommerce.com/info/7263 -Mail Manager, http://addons.oscommerce.com/info/8120

Link to comment
Share on other sites

The 'target' is no big deal, and there must surely be an updated version of 'target' that validates. Check google. Target="blank" for example simple opens the link in a new window, a really common function. If you took out all the instances of target from the OSC to CSS nothing integral or important to OSC to CSS would be changed.

 

 

this is how Drupal does it

create a file named target-blank.js (Jquery)

 

$(document).ready(function(){

$("a.target_blank").click(function(){

window.open(this.href);

return false;

});

});

 

and add class="target_blank" to the anchor tag.

 

I will have a look at this tomorrow, but I am no expert in this type of stuff

Link to comment
Share on other sites

Hi Guys,

 

I have a question. I downloaded and installed this last week, but I have resisted modifying my site in any way as I wasn't sure how stable or final this contribution is? In reading this thread i got the impression that there was going to be an updated version soon? Is this still the case, or am I safe to start building my site?

 

I'm very grateful for this contribution and I look forward to using it. I had been building a site using STS 4, but I found it very difficult to make quite a few other contibutions work with it (especially adding new boxes). I'm hoping this will be slightly easier?

 

One other thing; when I uploaded this contribution over a fresh osc install, I noticed that there is no faqs.php? I have a link in my information box to an faq page but don't seem to have the php file for one?

 

Also, I haven't had a good look yet, so this may be a stupid question, but in terms of moving items in my site (like infoboxes) how do I do this? In STS it was done through an html page. I understand how to use CSS on a basic level. I'm just wondering how I set which boxes are in the left and right columns for example?

 

 

Thanks in advance for your help.

 

My very best wishes,

 

Tom

Link to comment
Share on other sites

1) Updated version

The current version as posted is pretty much it and it works well. By updated I meant that I would take the four corrections I made after I posted the contribution and roll them into one download. They are not much more than fixing typos, and you can get it all by downloading what's here http://addons.oscommerce.com/info/7263

 

2) Faqs: It is this contribution:

http://addons.oscommerce.com/info/7345. Since you already have the JQuery reference on OSC to CSS it is pretty simple to install. If you have trouble, pm me your email and I'll email you my copy of my faqs.php. But really installing the contribution is as easy as installing my file. I should have deleted that link before I posted the contribution

 

3) You can move the infoboxes really easy in OSC to CSS. Just put it's reference to the infobox anywhere you like. It's foolproof moving them from left col to right col, and no different than how you move them on the stock version of oscommerce. For example, to move the 'What's New' box just open up includes/column_right.php and copy this:

 

require(DIR_WS_BOXES . 'whats_new.php');

and paste it in includes/column_left.php. You can paste it in the header or the footer for that matter, in OSC to CSS.

 

Some boxes have a bit of code around them, but just pick that up as well to move it. For example to move the order_history box, you have to get all this:

 

 if($customer_id!=null){
  require(DIR_WS_BOXES . 'order_history.php');
 }

 

That's just a little php that says, it the customer isn't signed on, don't bother displaying the order history box.

Edited by npn2531

Oscommerce site:

 

 

OSC to CSS, http://addons.oscommerce.com/info/7263 -Mail Manager, http://addons.oscommerce.com/info/8120

Link to comment
Share on other sites

Wow, that seems kind of like driving two blocks to the corner store in your new BMW for a soda. But it probably works really well.

I does work. Here is a snippet of index.php

 

<div class="grid_4 alpha">

<script type="text/javascript"><!--

$(document).ready(function(){

$("a.target_blank").click(function(){

window.open(this.href);

return false;

});

});

//--></script>

<h4>960 Grid System</h4>

This new version, v2.0,

incorporates the

<!--<a href="http://960.gs/" target="blank">960 grid system</a>.-->

<a href="http://960.gs/" class="target_blank">960 grid system</a>.

The 960 grid system greatly facilitates alignment, proportion and

layout issues. It speeds up design, creates consistency and solves

cross browser problems.</div>

Link to comment
Share on other sites

Hello!

 

Thank you for this contri, it allows us with basic computer knowledge to have a good looking site!

 

I have two questions: 1. How can I change text on index page?

2. On my quick search box there is a magnifing glass over text... how to solve this?

 

check here: www. leo .hr /catalog_leo / index.php on column left box...

 

Than you very much! :-)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Unfortunately, your content contains terms that we do not allow. Please edit your content to remove the highlighted words below.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...