Jump to content

Archived

This topic is now archived and is closed to further replies.

toyicebear

Basics for design

Recommended Posts

I thought, why not give beginners some articles that help you to start with webdesign in general.I remember the time I started out and it wasn’t easy, simply because I didn’t know where to begin. It’s time to change that. Here are some of the best articles and sites from around the internet that will learn you all the basics you need.

 

General

 

* “What is Webdesign” guide

* Understanding Webdesign

* Validate HTML / CSS (Very important!)

* Why validate?

 

Programs

 

* Adobe Photoshop CS3 (Design)

* GIMP (Design)

* Adobe DreamWeaver (HTML/CSS/PHP editing)

* NVU (HTML/CSS editing)

 

HTML

 

* HTML Basics

* W3Schools - HTML reference

* HTML Tutorial

 

CSS

 

* CSS Basics

* Complete CSS Guide + Reference list

* W3Schools - CSS reference

* Free CSS Ebook - Need to subscribe to the RSS feed to download the Ebook!

 

Design

 

* Photoshop tutorials

* GIMP tutorials

* Photoshop Basics

* Photoshop Shortcuts

* Create a weblayout in Photoshop + Dreamweaver

* 27 “how to design a website” tutorials in one place

 

Site Structure

 

* Basic Site Structures

* From Design to HTML - Step by Step

* From PSD to HTML

 

Tutorial Sites

 

* Pixel2Life

* Good-Tutorials

* Nettuts / PSDtuts

* TutorialSphere

 

Colors

 

* ColourLovers

* Colors In Webdesign

* Color Theory

* Color Tips

 

Resources

 

* Photoshop Brushes

* Photoshop Brushes II

* Photoshop Patterns

* Photoshop Layer Styles

* Wordpress Plugins

* Wordpress Themes

 

Stock Images

 

* DeviantArt’s Stock images collection

* Stock Xchng (Free!)

* iStockPhoto (paid)

* Free Stock Images

 

Search Engines

 

* How Search Engines Work

* Search Engine Optimizing Basics

* Off-Site Search Engine Optimizing

* On-Site SEO

* Add a Sitemap to your website

 

Inspiration

 

* BestWebGallery

* StyleGala

* CSS Drive

* CSS Vault

* Web Creme

* CSSLeak

 

Fonts / Typography

 

* Wikipedia - Typography

* I love Typography

* Typography Essentials - A Getting Started Guide

* Fonts On the Internet

* DaFont

 

Usability and Accessibility

 

* Usability basics

* Accessibility basics

* Accessibility top 10 tips

* 30 Usability Issues to Be Aware Of

 

Blogging

 

* Start Blogging Guide

* Reasons Why / Why Not To blog

* Wordpress

* Blogger

Share this post


Link to post
Share on other sites
Hi,

 

Boxes in the stylesheet.

 

 �

.infoBox {
�background: #b6b7cb;
}

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

 

.infobox sets the color for the outer table.

 

.infoboxContents sets the text and color for the inner table.

 

The "border" you see in your website is actually just the space between the outer and the inner table.

 

B)

 

Thank you - I have been looking and searching for this all over this board. I was hoping that there was an easy fix, and this is it.

Share this post


Link to post
Share on other sites

I'm sorry to trouble you people with something so basic but despite sorting most of my other issues I can't find the answer to this one.

How do you make the header logo centre in the middle of the header. I've removed the images from the bottom right of the header and want the logo image to sit in the middle.

Thanks in anticipation.....

Share this post


Link to post
Share on other sites
I'm sorry to trouble you people with something so basic but despite sorting most of my other issues I can't find the answer to this one.

How do you make the header logo centre in the middle of the header. I've removed the images from the bottom right of the header and want the logo image to sit in the middle.

Thanks in anticipation.....

I've added the code below in the hope someone can help me centre the logo image in the header because two of us have looked at this now and not been able to make it work. I think something I did when removing the icon links may be to blame. Any help gratefully appreciated.

 

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

<tr class="header">

<td valign="middle"><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">' . tep_image(DIR_WS_IMAGES . 'wpbbde32d4.png', STORE_NAME) . '</a>'; ?></td>

<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(stripslashes(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(stripslashes(urldecode($HTTP_GET_VARS['info_message']))); ?></td>

</tr>

</table>

<?php

}

?>

Share this post


Link to post
Share on other sites
<tr class="header">

<td valign="middle" align="center"><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">' . tep_image(DIR_WS_IMAGES . 'wpbbde32d4.png', STORE_NAME) . '</a>'; ?></td>

</tr>

Share this post


Link to post
Share on other sites

Aaahhh !

I see where we went wrong now. I was obvious but i couldn't see it for looking.

Many thanks for your help.

Regards

Barry

Share this post


Link to post
Share on other sites

how do i change the color of the current category text in the categories box? all it does is change the font of the category i'm currently in to bold. i want to change the color so that it stands out more. i normally can find and change things that deals with layout and design but this has me stumped.

Share this post


Link to post
Share on other sites
how do i change the color of the current category text in the categories box? all it does is change the font of the category i'm currently in to bold. i want to change the color so that it stands out more. i normally can find and change things that deals with layout and design but this has me stumped.

 

 

By editing/modifying these 2 files.

 

 

includes/boxes/categories.php

 

and

 

 

stylesheet.css

Share this post


Link to post
Share on other sites

thanks, that's what i thought and had already tried but it didn't work. after you confirmed that i was in the right place i looked at any possibilities. i found that the cache on the categories box was causing it not to change. i tried to reset the cache on the categories box but it still didn't work. so then i just removed the cache on the categories box and it worked.

 

thanks for the help

Share this post


Link to post
Share on other sites

Hi I'd like to move some things from the boxes in the columns to new locations:

 

I want to move the tell a friend box from the column to the center of the page, where the product description is. I.e. when a product is viewed tell a friend link to be displayed in just below the description, not in the column.

 

I'd like to move currency, manufacurers and languege selector to the header row, where the breadcrumb is. It can be only a text link for currency, not a dropdown, and the flag for the language. For manufacturers it need to be dropdown.

 

I am stuck with this, help please, I know it is very simple, just poin me which code snipped to copy.

Thanks


OSC beginner

Share this post


Link to post
Share on other sites
Hi I'd like to move some things from the boxes in the columns to new locations:

 

I want to move the tell a friend box from the column to the center of the page, where the product description is. I.e. when a product is viewed tell a friend link to be displayed in just below the description, not in the column.

 

I'd like to move currency, manufacurers and languege selector to the header row, where the breadcrumb is. It can be only a text link for currency, not a dropdown, and the flag for the language. For manufacturers it need to be dropdown.

 

I am stuck with this, help please, I know it is very simple, just poin me which code snipped to copy.

Thanks

 

 

There are add-ons available for most of what you want to do...

 

Other than that if you want to look at the code all the box files are located in this folder includes/boxes/

Share this post


Link to post
Share on other sites
There are add-ons available for most of what you want to do...

 

Other than that if you want to look at the code all the box files are located in this folder includes/boxes/

 

Hi thanks for reply.My srore is now very moded, so I dontr want to use anymore mods to visually design it. My simple task may be done simply by copying the right code snippets to the header. If someone points me in that direction that would be great.

If not, please could you name some addons that move links from the boxes that would also be appreciated.

Thanks.


OSC beginner

Share this post


Link to post
Share on other sites
Hi thanks for reply.My srore is now very moded, so I dontr want to use anymore mods to visually design it. My simple task may be done simply by copying the right code snippets to the header. If someone points me in that direction that would be great.

If not, please could you name some addons that move links from the boxes that would also be appreciated.

Thanks.

 

 

in the includes/boxes/ folder you will find all the box files...

 

in those box files you can find the needed code snipets...

 

 

As for finding add-ons , there is a search function in the add-ons section you know :rolleyes:

Share this post


Link to post
Share on other sites
in the includes/boxes/ folder you will find all the box files...

 

in those box files you can find the needed code snipets...

 

 

As for finding add-ons , there is a search function in the add-ons section you know :rolleyes:

 

Hi,

I know where the boxes are, but I cant achieve what I want just by copying the code snipets. For example I'd like to get only a drop-down menu for manufacturers selection from the box to the header. I have this in the manuf. box:

<?php
/*
 $Id: manufacturers.php 1739 2007-12-20 00:52:16Z hpdl $

 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
*/

 $manufacturers_query = tep_db_query("select manufacturers_id, manufacturers_name from " . TABLE_MANUFACTURERS . " order by manufacturers_name");
 if ($number_of_rows = tep_db_num_rows($manufacturers_query)) {
?>
<!-- manufacturers //-->
         <tr>
           <td>
<?php
   $info_box_contents = array();
   $info_box_contents[] = array('text' => BOX_HEADING_MANUFACTURERS);

   new infoBoxHeading($info_box_contents, false, false);

   if ($number_of_rows <= MAX_DISPLAY_MANUFACTURERS_IN_A_LIST) {
// Display a list
     $manufacturers_list = '';
     while ($manufacturers = tep_db_fetch_array($manufacturers_query)) {
       $manufacturers_name = ((strlen($manufacturers['manufacturers_name']) > MAX_DISPLAY_MANUFACTURER_NAME_LEN) ? substr($manufacturers['manufacturers_name'], 0, MAX_DISPLAY_MANUFACTURER_NAME_LEN) . '..' : $manufacturers['manufacturers_name']);
       if (isset($HTTP_GET_VARS['manufacturers_id']) && ($HTTP_GET_VARS['manufacturers_id'] == $manufacturers['manufacturers_id'])) $manufacturers_name = '<b>' . $manufacturers_name .'</b>';
       $manufacturers_list .= '<a href="' . tep_href_link(FILENAME_DEFAULT, 'manufacturers_id=' . $manufacturers['manufacturers_id']) . '">' . $manufacturers_name . '</a><br>';
     }

     $manufacturers_list = substr($manufacturers_list, 0, -4);

     $info_box_contents = array();
     $info_box_contents[] = array('text' => $manufacturers_list);
   } else {
// Display a drop-down
     $manufacturers_array = array();
     if (MAX_MANUFACTURERS_LIST < 2) {
       $manufacturers_array[] = array('id' => '', 'text' => PULL_DOWN_DEFAULT);
     }

     while ($manufacturers = tep_db_fetch_array($manufacturers_query)) {
       $manufacturers_name = ((strlen($manufacturers['manufacturers_name']) > MAX_DISPLAY_MANUFACTURER_NAME_LEN) ? substr($manufacturers['manufacturers_name'], 0, MAX_DISPLAY_MANUFACTURER_NAME_LEN) . '..' : $manufacturers['manufacturers_name']);
       $manufacturers_array[] = array('id' => $manufacturers['manufacturers_id'],
                                      'text' => $manufacturers_name);
     }

     $info_box_contents = array();
     $info_box_contents[] = array('form' => tep_draw_form('manufacturers', tep_href_link(FILENAME_DEFAULT, '', 'NONSSL', false), 'get'),
                                  'text' => tep_draw_pull_down_menu('manufacturers_id', $manufacturers_array, (isset($HTTP_GET_VARS['manufacturers_id']) ? $HTTP_GET_VARS['manufacturers_id'] : ''), 'onChange="this.form.submit();" size="' . MAX_MANUFACTURERS_LIST . '" style="width: 100%"') . tep_hide_session_id());
   }

   new infoBox($info_box_contents);
?>
           </td>
         </tr>
<!-- manufacturers_eof //-->
<?php
 }
?>

I have tried many combinations of code copying and always got errors. I even tried to use include command in the header and include the box there, but this imported the whole box, and made it very messy, I needed only the drop down menu. Same goes for the dropdown for currency selection

Please someone help.


OSC beginner

Share this post


Link to post
Share on other sites

hi,

 

are there any html files that i need to edit in order for me to change the index page? there are products listed in it in the form of images, text and links and these all need to be edited but i dont know were to edit them.

 

iv looked at the index.php but cant see them in the code. im sure its something simple but i just cant see it :huh:

 

also, is it possbile to edit the lists of different products so that they all have their own individual title rather than a generic one?

 

any help would be great,

 

chris


All that is now,

All that is gone,

All thats to come,

And everything under the sun is in tune,

But the sun is eclipsed by the moon.

Share this post


Link to post
Share on other sites
hi,

 

are there any html files that i need to edit in order for me to change the index page? there are products listed in it in the form of images, text and links and these all need to be edited but i dont know were to edit them.

 

iv looked at the index.php but cant see them in the code. im sure its something simple but i just cant see it :huh:

 

also, is it possbile to edit the lists of different products so that they all have their own individual title rather than a generic one?

 

any help would be great,

 

chris

 

Go back to post 1 of this tread and start to read....

 

 

The file which showes the products on the front page is this:

 

includes/modules/new_products.php

Share this post


Link to post
Share on other sites

Hi all,

 

I searched a long time but still cant find it :

 

In the admin section when you move over a article it colors from light purple (grey) to white.

This is not only the tex but a complete box comes over the specified item.

 

I want the same in the article listing for the customer.

I found some mouse-over effect in the CSS but that has no effect on the article listings page.

 

Who gives me a push to the good way :rolleyes:

Share this post


Link to post
Share on other sites

2 years ive been using osc and i can't believe i didnt see this thread before :blush:

 

Now bookmarked - thak you all ;)


Smile: A curve that can make a million things straight

Share this post


Link to post
Share on other sites
Hi all,

 

I searched a long time but still cant find it :

 

In the admin section when you move over a article it colors from light purple (grey) to white.

This is not only the tex but a complete box comes over the specified item.

 

I want the same in the article listing for the customer.

I found some mouse-over effect in the CSS but that has no effect on the article listings page.

 

Who gives me a push to the good way :rolleyes:

 

 

includes/modules/product_listing.php

Share this post


Link to post
Share on other sites
Step by Step.

 

1. Install osCommerce 2.2

 

2. go into the admin of your new installed shop "/admin" and do the following:

 

- Go to configurations/myshop and set "Show Category Counts" to "False"

- Go to tools/banner manager and delete the osCommerce banner

 

3. Open the file english.php , and change oscommerce to your company or web shop name. (the file is located in includes/languages )

 

It look like this:

 

// page title
define('TITLE', 'osCommerce');

 

 

4. Upload your own logo to the image folder on the web server.

 

(Easy way name the logo oscommerce.gif , and it will automatically replace the default one)

 

If you want to have your own name for the logo, upload the logo with your own chosen name and do the following:

 

Open up the file header.php and change oscommerce.gif to your own image file name, and change this one 'osCommerce' to your store name. (the file is located in the includes folder)

 

It looks like this:

 

<td valign="middle"><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">' . tep_image(DIR_WS_IMAGES . 'oscommerce.gif', 'osCommerce') . '</a>'; ?></td>

 

 

 

Hi,I am trying to change the logo. The only place I can find an oscommerce.gif is in banner directory. There isn't one in the images directory like so many of the instructions tell me. I made my own logo and called it oscommerce.gif putting it in the images directory anyway but nothing happens.

 

My code for /includes/header/php does not look like that...

My file has this line instead-

 

<td valign="middle"><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">' . tep_image(DIR_WS_IMAGES . 'store_logo.png', STORE_NAME) . '</a>'; ?></td>

 

What do I do? I have v 2.2 RC 2

 

Question #2. I deleted the Oscommerce banner using banner manager. I had my own working when I sinmply replaced the oscommerce.gif with my own in the banner directory but when you did mouse over, it said Oscommerce and led to their homepage if you clicked it. Now since I deleted I don't understand what to tell banner manager. Can you help me put in the correct fields? I'm just looking to put something back at the bottom of the page.

Kind of stuck here. Stefanie

Share this post


Link to post
Share on other sites

hi i have a question .... How can i modify the title box up at Tab ? whn i press on a product i want up at title box to write the product name ... can someone help me please !!

Thnx in advance !!

Share this post


Link to post
Share on other sites
Hi,I am trying to change the logo. The only place I can find an oscommerce.gif is in banner directory. There isn't one in the images directory like so many of the instructions tell me. I made my own logo and called it oscommerce.gif putting it in the images directory anyway but nothing happens.

 

My code for /includes/header/php does not look like that...

My file has this line instead-

 

<td valign="middle"><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">' . tep_image(DIR_WS_IMAGES . 'store_logo.png', STORE_NAME) . '</a>'; ?></td>

 

What do I do? I have v 2.2 RC 2

 

Question #2. I deleted the Oscommerce banner using banner manager. I had my own working when I sinmply replaced the oscommerce.gif with my own in the banner directory but when you did mouse over, it said Oscommerce and led to their homepage if you clicked it. Now since I deleted I don't understand what to tell banner manager. Can you help me put in the correct fields? I'm just looking to put something back at the bottom of the page.

Kind of stuck here. Stefanie

 

If you look at the code you posted , you can see that the logo have changed name and format

 

 

its now a png file called:

 

store_logo.png

 

 

procedure is still the same make an image file by the same name and upload it to the /images/ folder

 

 

or chnage the name of the image file to what you want in the includes/header.php file

 

in this section:

 

<td valign="middle"><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">' . tep_image(DIR_WS_IMAGES . 'store_logo.png', STORE_NAME) . '</a>'; ?></td>

Share this post


Link to post
Share on other sites
If you look at the code you posted , you can see that the logo have changed name and format

 

 

its now a png file called:

 

store_logo.png

 

 

procedure is still the same make an image file by the same name and upload it to the /images/ folder

 

 

or chnage the name of the image file to what you want in the includes/header.php file

 

in this section:

 

 

Great - I also found an add on called MyStorelogo that covers my version. Much better now. Thanks.

Share this post


Link to post
Share on other sites

×