Basic Design Pack Support

[♥toyicebear]

Link to Basic Design Pack

 

Basic design pack 1.0

 

This is not a real contribution as such...its just an easy to use short-cut to make your own osc design.

 

Included in this pack is:

 

- Fixed width with css by Devhype and Rhea Anthony

- Remove default images David Allen

 

 

What will this pack do?

 

1. It will center your shop and give you the possibilety to set outside background color in the stylesheet.

2. It will remove the default oscommerce cartoonish icons

3. It removes the rounded infobox corners and replaces them with square transparent ones, so you can change the colors in the styleaheet.

4. It removes the osCommerce banner in the footer

5. It will make it easy to have 1 top graphic logo filling the whole header width.

 

Thats it.....

 

How to use....Just drop over a defaut oscommerce shop.....and you are finished...

 

If you have any questions, well i am at the forum as always....best wishes Toyicebear

 

 

This contribution is ofcourse GNU, and used at your own risk..and so on..... ;-)

[Jen7pc]

I have an existing site built last year, not a new one - will this override the custom stuff I've already done? .. ie, the corners?

 

All I really need to do is to delete the cartoonish icons.

 

Thanks,

J

[mark27uk3]

Hi Jennifer,

 

All you have to do is transfer over all the files in the catalog/image folder that begin with table_background.

 

Mark

[♥toyicebear]

Basic design pack 1.1 now available, Link....

 

Added:

 

1. Nicer arrows

2. Automatic thumbnails generation

[♥toyicebear]

Basic design pack 1.2 now available, Link....

 

Added:

 

- CSS defined buttons

 

Att: If you want to use/keep graphically based buttons use version 1.1 instead of 1.2

 

Why use CSS buttons you might ask?

 

- They load faster

- They are automatically generated for any language in your shop

Edited October 15, 2005 by toyicebear

[♥toyicebear]

Basic design pack 1.3 now available, Link.....

 

Added:

 

- Modded the 2 boxes search and tip a friend to have the submitt button under the form fields. Othervise the css buttons break the box width.

 

- Now with 2 alternative html_output.php files included.

 

1. Which includes css buttons and automatic thumbnails functions.

 

2. Which only includes the css buttons. (The thumbnails contribution would break the shop for those who did not have gdlib support on their web server/hosting.)

[♥toyicebear]

Short breakdown of the install instructions, before posting a question make sure you have followed the points mentioned below:

 

1. Download the version you want to use, unzip it and read the instructions included.

 

2. Inside the zip , there is a folder named catalog , copy all the content of this folder and upload it to your web hotel/server using your favorite ftp program.

 

If you have your shop in the root , then upload the files and folders to root.

If you have your shop in /catalog/ , then upload all the files and folders into the /catalog/ folder

If you have your shop in another folder, upload the files into the same folder where you have your other shop files and folders.

 

When you get asked if you want to overwrite the exsisting files, you choose yes.

 

Now you can go to your web site, press CTRL + F5 , the page will refresh and you will see the new changes.

 

 

Att. If you have an already modified shop...you can not follow the instructions above..then you will have to use a file compare program, like for instance beyondcompare , to merge your exsisting files with the ones in this contribution.

[Guest]

Hi,

I love everything in this contrib except that I'd like to leave the bottom banner alone. How do I restore them?

Edited December 21, 2005 by mpm

[♥toyicebear]

Hi,

I love everything in this contrib except that I'd like to leave the bottom banner alone. How do I restore them?

 

 

Hi....

 

In the footer.php file, after the last </table> but before the last </div> you add this:

 

 

 

<?php

if ($banner = tep_banner_exists('dynamic', '468x50')) {

?>

<br>

<table border="0" width="100%" cellspacing="0" cellpadding="0">

<tr>

<td align="center"><?php echo tep_display_banner('static', $banner); ?></td>

</tr>

</table>

<?php

}

?>

[daniemuse]

Thank you for this. It did the trick. I'm only having one problem now... and that is with the CSS buttons. On any given page, one button shows up as what appears to be a graphic, but then the others show up as these plain boxy CSS "table" type buttons. I was poking around the html_output files from the package and I noticed a similarity: the buttons that submit a form show up as the cool "graphic", but the buttons that just redirect the customer to another page show up as the "table" type buttons. Can you help me get them all to look like the "graphic"? Or if there's no way to do that, what I need to do to go back to using actual graphics (.gif, etc.).

Thanks

D

[♥toyicebear]

Thank you for this. It did the trick. I'm only having one problem now... and that is with the CSS buttons. On any given page, one button shows up as what appears to be a graphic, but then the others show up as these plain boxy CSS "table" type buttons. I was poking around the html_output files from the package and I noticed a similarity: the buttons that submit a form show up as the cool "graphic", but the buttons that just redirect the customer to another page show up as the "table" type buttons. Can you help me get them all to look like the "graphic"? Or if there's no way to do that, what I need to do to go back to using actual graphics (.gif, etc.).

Thanks

D

 

Hi, The .css button part transforms all osc standard button calles into css defined buttons. Ie. the buttons looks are defined in stylesheet.css , you can have different borders, you can bevel the borders for a more button like look and/or you can add graphical background images to the buttons aswell and so on.

 

But if you want to just use the standard graphical buttons, you can just change this piece of code in includes/functions/html_output.php (from basic design pack mk1.3)

 

Change this

////

// The HTML form submit button wrapper function

// Outputs a button in the selected language

// BEGIN: CSS Buttons Everywhere

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

global $language;

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

return $css_submit;

}

// END: CSS Buttons Everywhere

 

////

// Output a function button in the selected language

// BEGIN: CSS Buttons Everywhere

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

global $language;

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

return $image;

}

// END: CSS Buttons Everywhere

 

To this:

////

// The HTML form submit button wrapper function

// Outputs a button in the selected language

function tep_image_submit($image, $alt = '', $parameters = '') {

global $language;

 

$image_submit = '<input type="image" src="' . tep_output_string(DIR_WS_LANGUAGES . $language . '/images/buttons/' . $image) . '" border="0" alt="' . tep_output_string($alt) . '"';

 

if (tep_not_null($alt)) $image_submit .= ' title=" ' . tep_output_string($alt) . ' "';

 

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

 

$image_submit .= '>';

 

return $image_submit;

}

 

////

// 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);

}

[daniemuse]

Thanks for the info, but I feel like I didn't ask my question properly. I want to use the CSS Buttons. I feel like they would definitely make my life easier. My problem is that I need them to look the SAME. Some of the CSS Buttons look boxy and the other CSS Buttons look like regular buttons. I've tried altering the stylesheet, but it only affects the boxy buttons. Is there anyway to get them all to look the same? I'm really trying to avoid actually having to make buttons. Thanks again.

D

[♥toyicebear]

Thanks for the info, but I feel like I didn't ask my question properly. I want to use the CSS Buttons. I feel like they would definitely make my life easier. My problem is that I need them to look the SAME. Some of the CSS Buttons look boxy and the other CSS Buttons look like regular buttons. I've tried altering the stylesheet, but it only affects the boxy buttons. Is there anyway to get them all to look the same? I'm really trying to avoid actually having to make buttons. Thanks again.

D

 

Can you post links which shows the 2 different button styles at your site?

[vondada]

How do you set the background color for the site in the stylesheet and can you set a background image instead?

[arkitekt]

Hi Toyicebear,

 

I love your basic design pack it makes things quite quick and easy - I just had one question... is there anyway to use the basic design pack but keep the "image_enlarge.gif" --- I'd really like to keep the small magnifying glass image (or create an icon) for the enlargment of the image but I love the css for everything else.

 

 

Thanks for your help and a great contribution!

 

Nathan

[daniemuse]

Can you post links which shows the 2 different button styles at your site?

 

I did something funky to my site and it's down at the moment, but as soon as I get it up, I'll get back to you with the links. Thanks for your prompt response.

D

[♥toyicebear]

How do you set the background color for the site in the stylesheet and can you set a background image instead?

 

Yes you can set background color and yes you can use an image instead of a color definition if you so choose.

 

The section of the stylsheet whe this can be done is here:

BODY {

text-align: center;

background: #ffffff;

color: #000000;

margin: 0px;

}

 

.fixcenter {

width: 778px;

border: solid; border-width: 1px;

background: #ffffff;

color: #000000;

margin: auto;

margin-top: 20px;

text-align: left;

}

[♥toyicebear]

Hi Toyicebear,

 

I love your basic design pack it makes things quite quick and easy - I just had one question... is there anyway to use the basic design pack but keep the "image_enlarge.gif" --- I'd really like to keep the small magnifying glass image (or create an icon) for the enlargment of the image but I love the css for everything else.

Thanks for your help and a great contribution!

 

Nathan

 

Hi...the css button mod does make all the images called by tep_image_button , to exclude an image and let it show as an image...just copy the wanted image from the buttons folder and into the image folder...

 

and then you change tep_image_button to tep_image for this image in the relevant .php file

 

in this case that is product_info.php

Edited December 28, 2005 by toyicebear

[daniemuse]

Can you post links which shows the 2 different button styles at your site?

 

Okay, I've partially restored my site. Here is the link:

https://host283.ipowerweb.com/~alldanie/new...cbade4777682815

 

I checked the page using another browser and the buttons were all uniform. I usually use Safari which was where I was seeing the problem. In Firefox, everything's cool. Let me know if you can help. And thanks for all your help already!

D

[♥toyicebear]

Okay, I've partially restored my site. Here is the link:

https://host283.ipowerweb.com/~alldanie/new...cbade4777682815

 

I checked the page using another browser and the buttons were all uniform. I usually use Safari which was where I was seeing the problem. In Firefox, everything's cool. Let me know if you can help. And thanks for all your help already!

D

 

Hi...

 

Sorry...but i do not have access to Safari

 

But it seems to work fine in bothe IE and Firefox.

[♥toyicebear]

Basic Design Pack 1.4 is now available: Download Link....

 

Added:

 

Great Categories , this gives a categories/menu box that looks better, have clearer navigation path markings and the looks are further customizable in stylesheet.css

[Guest]

i run in major problems with the newest build of OScommerce MS 2 [today]

 

after install your contribution i see only an empty site with the left table and no main content or pictures.

 

after i remove the html_output.php all was back again.

its my mistake ? maybe by downloading ?

 

thank you

[arkitekt]

Hi Toyicebear,

 

The change from tep_image_button to tep_image sounds easy enough but I couldn't seem to pull it off... could you suggest the changes necessary to this portion of the code --- so I can understand it? I attempted what I thought was right - but ended up losing all the product info except the title of the page. So I had to change it back.

 

Thanks for your help!

 

 

 

<script language="javascript"><!--
document.write('<?php echo '<a href="javascript:popupWindow(\\\'' . tep_href_link(FILENAME_POPUP_IMAGE, 'pID=' . $Qproduct->valueInt('products_id')) . '\\\')">' . tep_image(DIR_WS_IMAGES . $Qproduct->value('products_image'), addslashes($Qproduct->value('products_name')), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br>' . tep_image_button('image_enlarge.gif', TEXT_CLICK_TO_ENLARGE) . '</a>'; ?>');
//--></script>
<noscript>
<?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . $Qproduct->value('products_image')) . '" target="_blank">' . tep_image(DIR_WS_IMAGES . $Qproduct->value('products_image'), $Qproduct->value('products_name'), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br>' . tep_image_button('image_enlarge.gif', TEXT_CLICK_TO_ENLARGE) . '</a>'; ?>

[♥toyicebear]

i run in major problems with the newest build of OScommerce MS 2 [today]

 

after install your contribution i see only an empty site with the left table and no main content or pictures.

 

after i remove the html_output.php all was back again.

its my mistake ? maybe by downloading ?

 

thank you

 

You can use this pack without using the included html_outp.php , this will give you all the functions in the package except - automatic thumbnails and css buttons.

[♥toyicebear]

Hi Toyicebear,

 

The change from tep_image_button to tep_image sounds easy enough but I couldn't seem to pull it off... could you suggest the changes necessary to this portion of the code --- so I can understand it? I attempted what I thought was right - but ended up losing all the product info except the title of the page. So I had to change it back.

 

Thanks for your help!

<script language="javascript"><!--
document.write('<?php echo '<a href="javascript:popupWindow(\\\'' . tep_href_link(FILENAME_POPUP_IMAGE, 'pID=' . $Qproduct->valueInt('products_id')) . '\\\')">' . tep_image(DIR_WS_IMAGES . $Qproduct->value('products_image'), addslashes($Qproduct->value('products_name')), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br>' . tep_image_button('image_enlarge.gif', TEXT_CLICK_TO_ENLARGE) . '</a>'; ?>');
//--></script>
<noscript>
<?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . $Qproduct->value('products_image')) . '" target="_blank">' . tep_image(DIR_WS_IMAGES . $Qproduct->value('products_image'), $Qproduct->value('products_name'), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br>' . tep_image_button('image_enlarge.gif', TEXT_CLICK_TO_ENLARGE) . '</a>'; ?>

 

 

Try this and let me know if it works....

 

 

<script language="javascript"><!--

document.write('<?php echo '<a href="java script:popupWindow(\\\'' . tep_href_link(FILENAME_POPUP_IMAGE, 'pID=' . $Qproduct->valueInt('products_id')) . '\\\')">' . tep_image(DIR_WS_IMAGES . $Qproduct->value('products_image'), addslashes($Qproduct->value('products_name')), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br>' . tep_image(DIR_WS_IMAGES . 'image_enlarge.gif', TEXT_CLICK_TO_ENLARGE) . '</a>'; ?>');

//--></script>

<noscript>

<?php echo '<a href="' . tep_href_link(DIR_WS_IMAGES . $Qproduct->value('products_image')) . '" target="_blank">' . tep_image(DIR_WS_IMAGES . $Qproduct->value('products_image'), $Qproduct->value('products_name'), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"') . '<br>' . tep_image(DIR_WS_IMAGES . 'image_enlarge.gif', TEXT_CLICK_TO_ENLARGE) . '</a>'; ?>