Jump to content
dev osCommerce
Forum
  • Checkout
  • Login
  • Contact Us
  • Get in touch

osCommerce

The e-commerce.

New Demo
Our Partners

I'm a bit confused

aplund

By aplund
in Templates and Images

 Share

Recommended Posts

aplund

aplund

Posted
Posted

Hello!

 

Me and my friend are fighting to get our osc webshop to work the way we want.

 

 

I've just installed the basic design pack contribution thing into our root, but

 

 

where shall i put it?

 

Is it right that I must copy the files into both directories:

 

/www.teknikikubik.se/ and

/www.teknikikubik.se/oscommerce_st/catalog/

 

 

this is our side looks like today: http://www.teknikikubik.se

 

as you see we havent figured out how to put our logotype up in the middle, someone please help us where to write in the stylesheet and what we shall write, where in the root should the pictures be?

 

and last I am wondering how to put a logotype in the background. I have read the earlier topics but I dont really understand how to do?

 

Someone please help me out here :)

 

Thanx!

Link to comment
Share on other sites
wotsupdoc

wotsupdoc

Posted
Posted

I don't use the "basic design pack contribution", but I have solved a few of your problems the normal way (without using that particular contribution):

as you see we havent figured out how to put our logotype up in the middle,

someone please help us where to write in the stylesheet and what we shall write, where in the root should the pictures be?

 

Root= the lowest directory possible if you're on a windows machine, this would be c:/

In the case of OScommerce, this would be /catalog/. Both not a good idea to put pictures, try the catalog/images directory.

Anyway, you're completely free to put the images wherever you want, as long as you adapt the path to the picture in the correct php file.

 

What do you mean by "how to put our logotype up in the middle"? you seem to have a logo on your page.

The easiest way is to search for oscommerce.gif and replace it your own logo (same name, same place)

 

After a bit of meddling I have put a transparent flash file as a banner in all my pages by changing the /includes/header.php file.

<?php
/*
 $Id: header.php,v 1.42 2003/06/10 18:20:38 hpdl Exp $

 osCommerce, Open Source E-Commerce Solutions
 [url="http://www.oscommerce.com"]http://www.oscommerce.com[/url]

 Copyright © 2003 osCommerce

 Released under the GNU General Public License
*/

// check if the 'install' directory exists, and warn of its existence
 if (WARN_INSTALL_EXISTENCE == 'true') {
   if (file_exists(dirname($HTTP_SERVER_VARS['SCRIPT_FILENAME']) . '/install')) {
     $messageStack->add('header', WARNING_INSTALL_DIRECTORY_EXISTS, 'warning');
   }
 }

// check if the configure.php file is writeable
 if (WARN_CONFIG_WRITEABLE == 'true') {
   if ( (file_exists(dirname($HTTP_SERVER_VARS['SCRIPT_FILENAME']) . '/includes/configure.php')) && 
(is_writeable(dirname($HTTP_SERVER_VARS['SCRIPT_FILENAME']) . '/includes/configure.php')) ) {
     $messageStack->add('header', WARNING_CONFIG_FILE_WRITEABLE, 'warning');
   }
 }

// check if the session folder is writeable
 if (WARN_SESSION_DIRECTORY_NOT_WRITEABLE == 'true') {
   if (STORE_SESSIONS == '') {
     if (!is_dir(tep_session_save_path())) {
       $messageStack->add('header', WARNING_SESSION_DIRECTORY_NON_EXISTENT, 'warning');
     } elseif (!is_writeable(tep_session_save_path())) {
       $messageStack->add('header', WARNING_SESSION_DIRECTORY_NOT_WRITEABLE, 'warning');
     }
   }
 }

// check session.auto_start is disabled
 if ( (function_exists('ini_get')) && (WARN_SESSION_AUTO_START == 'true') ) {
   if (ini_get('session.auto_start') == '1') {
     $messageStack->add('header', WARNING_SESSION_AUTO_START, 'warning');
   }
 }

 if ( (WARN_DOWNLOAD_DIRECTORY_NOT_READABLE == 'true') && (DOWNLOAD_ENABLED == 'true') ) {
   if (!is_dir(DIR_FS_DOWNLOAD)) {
     $messageStack->add('header', WARNING_DOWNLOAD_DIRECTORY_NON_EXISTENT, 'warning');
   }
 }

 if ($messageStack->size('header') > 0) {
   echo $messageStack->output('header');
 }
?>
<script src="../Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
 <tr class="header">
   <td valign="middle">

     <script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0',
'width','100%','height','100','title','banner','src','images/banners/golf','quality','high',
'pluginspage','http://www.macromedia.com/go/getflashplayer','wmode','transparent','allowscriptaccess',
'true','scale','Exact Fit','movie','images/banners/golf' ); //end AC code
     </script>
     <noscript>
       <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" 
width="100%" height="100" title="banner">
         <param name="allowScriptAccess" value="true"> 
         <param name="movie" value="images/banners/golf.swf">
         <param name="quality" value="high">
         <param name="wmode" value="transparent">
         <param name="scale" value="Exact Fit">
         <param name="width" value="100%">
         <embed src="images/banners/golf.swf" width="100%" height="100" quality="high" 
pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" 
wmode="transparent" allowscriptaccess="true" scale="Exact Fit"></embed>
       </object>
     </noscript>
</td>
 </tr>
</table>
<table border="0" width="100%" cellspacing="0" cellpadding="1">
 <tr class="headerNavigation">
   <td class="headerNavigation">  <?php echo $breadcrumb->trail(' » '); ?></td>
   <td align="right" class="headerNavigation"><?php if (tep_session_is_registered('customer_id')) 
{ ?><a href="<?php echo tep_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>" class="headerNavigation">
<?php echo HEADER_TITLE_LOGOFF; ?></a>  |  <?php } ?><a href="<?php echo tep_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>" 
class="headerNavigation"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a>  |  
<a href="<?php echo tep_href_link(FILENAME_SHOPPING_CART); ?>" class="headerNavigation">
<?php echo HEADER_TITLE_CART_CONTENTS; ?></a>  |  <a href="
<?php echo tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>" class="headerNavigation">
<?php echo HEADER_TITLE_CHECKOUT; ?></a>   </td>
 </tr>
</table>
<?php
 if (isset($HTTP_GET_VARS['error_message']) && tep_not_null($HTTP_GET_VARS['error_message'])) {
?>
<table border="0" width="100%" cellspacing="0" cellpadding="2">
 <tr class="headerError">
   <td class="headerError"><?php echo htmlspecialchars(urldecode($HTTP_GET_VARS['error_message'])); ?></td>
 </tr>
</table>
<?php
 }

 if (isset($HTTP_GET_VARS['info_message']) && tep_not_null($HTTP_GET_VARS['info_message'])) {
?>
<table border="0" width="100%" cellspacing="0" cellpadding="2">
 <tr class="headerInfo">
   <td class="headerInfo"><?php echo htmlspecialchars($HTTP_GET_VARS['info_message']); ?></td>
 </tr>
</table>
<?php
 }
?>

This is where the code for the transparent, autoresizing flash file is:

<script src="../Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
 <tr class="header">
   <td valign="middle">

     <script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0','width',
'100%','height','100','title','banner','src','images/banners/golf','quality','high',
'pluginspage','http://www.macromedia.com/go/getflashplayer','wmode',
'transparent','allowscriptaccess','true','scale','Exact Fit','movie','images/banners/golf' ); //end AC code
     </script>
     <noscript>
       <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="100%" height="100" 
title="banner">
         <param name="allowScriptAccess" value="true"> 
         <param name="movie" value="images/banners/golf.swf">
         <param name="quality" value="high">
         <param name="wmode" value="transparent">
         <param name="scale" value="Exact Fit">
         <param name="width" value="100%">
         <embed src="images/banners/golf.swf" width="100%" height="100" quality="high" 
pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent" 
allowscriptaccess="true" scale="Exact Fit"></embed>
       </object>
     </noscript>
</td>

Notice that the path to the flash file is: images/banners/golf.swf

width="100%" height="100 makes it fit the page

wmode="transparent makes the file transparent.

I needed a transparent flash file because my backround is a gradual color fill,

so setting a colored background for the flash file wouldn't work for me.

 

 

and last I am wondering how to put a logotype in the background. I have read the earlier topics but I dont really understand how to do?

Have a look at my stylesheet (stylesheet.css)

I have commented out (by using the /* */ method).

all the styles that put a coloured background in the tables and I have specified where my own background picture is in the body tag

/*
 $Id: stylesheet.css,v 1.56 2003/06/30 20:04:02 hpdl Exp $

 osCommerce, Open Source E-Commerce Solutions
 [url="http://www.oscommerce.com"]http://www.oscommerce.com[/url]

 Copyright © 2003 osCommerce

 Released under the GNU General Public License
*/
body,td,th {
}

.boxText { font-family: Verdana, Arial, sans-serif; font-size: 10px; }
.errorBox { font-family : Verdana, Arial, sans-serif; font-size : 10px; font-weight: bold; }
.stockWarning { font-family : Verdana, Arial, sans-serif; font-size : 10px; color: #cc0033; }
.productsNotifications {  }
.orderEdit { font-family : Verdana, Arial, sans-serif; font-size : 10px; color: #70d250; text-decoration: underline; }

BODY {
margin: 0px;
background-image: url(images/back.jpg);
background-repeat: repeat-x;
}

A {
 color: #000000;
 text-decoration: none;
}

A:hover {
 color: #AABBDD;
 text-decoration: underline;
}

FORM {
display: inline;
}

TR.header {
}

TR.headerNavigation {
}

TD.headerNavigation {
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
 color: #ffffff;
 font-weight : bold;
}

A.headerNavigation { 
 color: #FFFFFF; 
}

A.headerNavigation:hover {
 color: #ffffff;
}

TR.headerError {
}

TD.headerError {
 font-family: Tahoma, Verdana, Arial, sans-serif;
 font-size: 12px;
 color: #ffffff;
 font-weight : bold;
 text-align : center;
}

TR.headerInfo {
}

TD.headerInfo {
 font-family: Tahoma, Verdana, Arial, sans-serif;
 font-size: 12px;
/*  color: #ffffff;*/
 font-weight: bold;
 text-align: center;
}

TR.footer {
}

TD.footer {
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
/*  color: #ffffff;*/
 font-weight: bold;
}

.infoBox {
}

.infoBoxContents {
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
}

.infoBoxNotice {
}

.infoBoxNoticeContents {
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
}

TD.infoBoxHeading {
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
 font-weight: bold;
/*  color: #ffffff;*/
}

TD.infoBox, SPAN.infoBox {
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
}

TR.accountHistory-odd, TR.addressBook-odd, TR.alsoPurchased-odd, TR.payment-odd, TR.productListing-odd, 
TR.productReviews-odd, TR.upcomingProducts-odd, TR.shippingOptions-odd {
}

TR.accountHistory-even, TR.addressBook-even, TR.alsoPurchased-even, TR.payment-even, TR.productListing-even, 
TR.productReviews-even, TR.upcomingProducts-even, TR.shippingOptions-even {
}

TABLE.productListing {
 border: 1px;
 border-style: solid;
 border-color: #b6b7cb;
 border-spacing: 1px;
}

.productListing-heading {
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
/*  color: #FFFFFF;
*/  font-weight: bold;
}

TD.productListing-data {
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
}

A.pageResults {
/*  color: #0000FF;
*/}

A.pageResults:hover {
 color: #0000FF;
}

TD.pageHeading, DIV.pageHeading {
 font-family: Verdana, Arial, sans-serif;
 font-size: 20px;
 font-weight: bold;
/*  color: #9a9a9a;
*/}

TR.subBar {
}

TD.subBar {
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
/*  color: #000000;
*/}

TD.main, P.main {
 font-family: Verdana, Arial, sans-serif;
 font-size: 11px;
 line-height: 1.5;
}

TD.smallText, SPAN.smallText, P.smallText {
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
}

TD.accountCategory {
 font-family: Verdana, Arial, sans-serif;
 font-size: 13px;
 color: #aabbdd;
}

TD.fieldKey {
 font-family: Verdana, Arial, sans-serif;
 font-size: 12px;
 font-weight: bold;
}

TD.fieldValue {
 font-family: Verdana, Arial, sans-serif;
 font-size: 12px;
}

TD.tableHeading {
 font-family: Verdana, Arial, sans-serif;
 font-size: 12px;
 font-weight: bold;
}

SPAN.newItemInCart {
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
/*  color: #ff0000;
*/}

CHECKBOX, INPUT, RADIO, SELECT {
 font-family: Verdana, Arial, sans-serif;
 font-size: 11px;
}

TEXTAREA {
 width: 100%;
 font-family: Verdana, Arial, sans-serif;
 font-size: 11px;
}

SPAN.greetUser {
 font-family: Verdana, Arial, sans-serif;
 font-size: 12px;
 color: #f0a480;
 font-weight: bold;
}

TABLE.formArea {
 border-color: #7b9ebd;
 border-style: solid;
 border-width: 1px;
}

TD.formAreaTitle {
 font-family: Tahoma, Verdana, Arial, sans-serif;
 font-size: 12px;
 font-weight: bold;
}

SPAN.markProductOutOfStock {
 font-family: Tahoma, Verdana, Arial, sans-serif;
 font-size: 12px;
 color: #c76170;
 font-weight: bold;
}

SPAN.productSpecialPrice {
 font-family: Verdana, Arial, sans-serif;
 color: #ff0000;
}

SPAN.errorText {
 font-family: Verdana, Arial, sans-serif;
 color: #ff0000;
}

.moduleRow { }
.moduleRowOver { cursor: pointer; cursor: hand; }
.moduleRowSelected {}

.checkoutBarFrom, .checkoutBarTo { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #8c8c8c; }
.checkoutBarCurrent { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #000000; }

/* message box */

.messageBox { font-family: Verdana, Arial, sans-serif; font-size: 10px; }
.messageStackError, .messageStackWarning { font-family: Verdana, Arial, sans-serif; font-size: 10px; }
.messageStackSuccess { font-family: Verdana, Arial, sans-serif; font-size: 10px; }

/* input requirement */

.inputRequirement { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #ff0000; }

/*This is the INFOBOX Background Style, one shade darker than the Infobox Header color*/
.infoBox {
/*background: #0000FF;*/
}
/*This is the INFOBOX Contents Style, one shade lighter than the Infobox Header color*/
.infoBoxContents {
/*background: #FFFFFF;*/
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
}
/*This is the INFOBOX Notice Style, a pale salmon color*/
.infoBoxNotice {
/*background: #FF8E90;*/
}
/*This is the INFOBOX Notice Contents Style, a very pale salmon color*/
.infoBoxNoticeContents {
/*background: #FFFFFF;*/
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
}
/*This is the INFOBOX Heading Style, SAME AS HEADER AND FOOTER GRAY BARS*/
TD.infoBoxHeading {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
font-weight: bold;

background: #FFFFFF;
color: #ABDA4E;
}
TD.infoBox, SPAN.infoBox {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
}

Notice where it says:

BODY {
margin: 0px;
background-image: url(images/back.jpg);
background-repeat: repeat-x;

images/back.jpg is the path to jpeg file that is a single pixel wide and as high as I want my pages to be, you can find it here

www.coloursite.nl/oerbronwerk/images/back.jpg remember, it's one pixel wide, so it may be hard to see

That's where the "background-repeat: repeat-x;" comes in, it repeats the one pixel along the x axis.

 

 

Your next question will probably be: how can I get rid of the rounded corners of the boxes?

Well, you could edit all of the PHP files that call the corner_left.gif, corner_right.gif, corner_right.gif and corner_right_left but that's a lot of work

It's easier to make a one pixel transparent gif and put it in the \images\infobox\ directory copy and rename it to:

corner_left.gif, corner_right.gif, corner_right.gif and corner_right_left.gif files

This will completely get rid of the last remnants of your old background

 

You would be well advised to have a look at this thread: Basics for design

 

However, all this is completely useless if you decide to use the STS (Simple Template System)

This is a contribution for OSCommerce that will allow you place all the elements that OScommerce uses under control of html single HTML file:

to change the html file means to change the position or existance of the OScommerce elements

If you decide to use this system, you are back where you are right now,

because all the rules change and you have to figure everything out all over again.

The fact that there is a 174-page long thread that deals with all the problems of the STS and the search function in this forum

will lead you only to the first page of that thread, doesn't really help

 

Anyway, I haven't figured out how to use the STS with transparent boxes and my own background yet

 

Good luck!

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.

×
 Share
Go to topic listing
×
×
  • Create New...