Jump to content



Latest News: (loading..)

* * * * * 13 votes

Basics for design


  • Please log in to reply
1480 replies to this topic

#1401   ukracer

ukracer
  • Members
  • 272 posts
  • Real Name:Andy Taylor

Posted 14 February 2010 - 01:23 AM

View Posttoyicebear, on 17 August 2009 - 01:03 AM, said:

Top...

edit this file:

includes/header.php


Bottom...

Edit this file:

includes/footer.php


I think the problem with some stores is they do not contain files in the places you are telling us they should be.

#1402   toyicebear

toyicebear
  • Community Sponsor
  • 6,099 posts
  • Real Name:Nick
  • Gender:Male
  • Location:World Citizen

Posted 14 February 2010 - 05:27 AM

View Postukracer, on 14 February 2010 - 01:11 AM, said:

How do you find out what files to alter as they are produced in real time are they not??


All products are created by 1 file...

products_info.php

the difference in text , images etc. is fetched from the db.

#1403   toyicebear

toyicebear
  • Community Sponsor
  • 6,099 posts
  • Real Name:Nick
  • Gender:Male
  • Location:World Citizen

Posted 14 February 2010 - 05:32 AM

View Postukracer, on 14 February 2010 - 01:23 AM, said:

I think the problem with some stores is they do not contain files in the places you are telling us they should be.


If your store is installe din the root then they are...

ie.

the shop showes at

www.your-domain-name.com/


if you have it in a sub directory like.

www.your-domain-name.com/catalog/


then the catalog/ have to be added to the path...

ie. includes/header.php

then will be

catalog/includes/header.php


if it stays at:

www.your-domain-name.com/shop/

then it will be

shop/includes/header.php

and so on.....



Which in turn actually just translates to that the file stays as stated at for instance:

includes/header.php

Based out of at what directory you shop is installed in.

Edited by toyicebear, 14 February 2010 - 05:34 AM.


#1404   thebodhiman

thebodhiman
  • Members
  • 18 posts
  • Real Name:Stephen Busch

Posted 15 February 2010 - 09:58 PM

View Posttoyicebear, on 24 March 2005 - 12:26 AM, said:

Next step.....


5. Remove default oscommerce gifs, to do that use this contrib:

Remove Default Images


6. To make color changes easier you will need to replace 3 gifs in the in the folder images/infobox.

- corner_left.gif
- corner_right.gif
- corner_right_left.gif

replace those 3 with 3 empty transparent gifs in the same size.

7. Now you are ready to change colors and/or text formating for your web shop, this is done in a file called stylesheet.css which is located in your main folder.

For instance if you want to  change the color of the infobox header, this is the code which need changing:

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

Changed to a red info box header, it would look like this:

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

These are universal changes and will affect all the related parts of your web shop

Now feel free to play with the colors and/or fonts to your own liking........

Hi
I seem to be learning, yet upon editing the style sheet I am unable to see changes on the store front and some times get a page loading error, clicking refresh brings the page up after a few seconds, I have previously done all the changes in this tutorial and centered the page from a contrib from the basic design pack, and have most recently been playing with colours to change navigation bar background, etc, is there a specific colour language that applies to oscommerce or is it universal? I am able to change header image so the prob doesn't seem to be universal?? hope you can help many thanks
Stephen

#1405   toyicebear

toyicebear
  • Community Sponsor
  • 6,099 posts
  • Real Name:Nick
  • Gender:Male
  • Location:World Citizen

Posted 16 February 2010 - 03:22 AM

View Postthebodhiman, on 15 February 2010 - 09:58 PM, said:

Hi
I seem to be learning, yet upon editing the style sheet I am unable to see changes on the store front and some times get a page loading error, clicking refresh brings the page up after a few seconds, I have previously done all the changes in this tutorial and centered the page from a contrib from the basic design pack, and have most recently been playing with colours to change navigation bar background, etc, is there a specific colour language that applies to oscommerce or is it universal? I am able to change header image so the prob doesn't seem to be universal?? hope you can help many thanks
Stephen

Color codes used in the stylesheet are universal color hex codes

After having changed images or stylesheet , you might have to press CTRL + F5 to clear your browsers cache to see the changes you have just done on your site.

#1406   thebodhiman

thebodhiman
  • Members
  • 18 posts
  • Real Name:Stephen Busch

Posted 16 February 2010 - 06:23 AM

View Posttoyicebear, on 16 February 2010 - 03:22 AM, said:

Color codes used in the stylesheet are universal color hex codes

After having changed images or stylesheet , you might have to press CTRL + F5 to clear your browsers cache to see the changes you have just done on your site.

thankyou...your right...as if there was any doubt

:thumbsup:  Stephen

Edited by thebodhiman, 16 February 2010 - 06:25 AM.


#1407   thebodhiman

thebodhiman
  • Members
  • 18 posts
  • Real Name:Stephen Busch

Posted 18 February 2010 - 06:03 AM

View Posttoyicebear, on 24 March 2005 - 12:26 AM, said:

Next step.....


5. Remove default oscommerce gifs, to do that use this contrib:

Remove Default Images


6. To make color changes easier you will need to replace 3 gifs in the in the folder images/infobox.

- corner_left.gif
- corner_right.gif
- corner_right_left.gif

replace those 3 with 3 empty transparent gifs in the same size.

7. Now you are ready to change colors and/or text formating for your web shop, this is done in a file called stylesheet.css which is located in your main folder.

For instance if you want to  change the color of the infobox header, this is the code which need changing:

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

Changed to a red info box header, it would look like this:

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

These are universal changes and will affect all the related parts of your web shop

Now feel free to play with the colors and/or fonts to your own liking........

Hi Nick
hope all is well
I know somewhere I've learnt how to change the rounded corner on top info boxes, can you refresh my memory on how, I've changed colour, yet a little corner piece remains white on either side :D

#1408   toyicebear

toyicebear
  • Community Sponsor
  • 6,099 posts
  • Real Name:Nick
  • Gender:Male
  • Location:World Citizen

Posted 18 February 2010 - 06:35 AM

View Postthebodhiman, on 18 February 2010 - 06:03 AM, said:

Hi Nick
hope all is well
I know somewhere I've learnt how to change the rounded corner on top info boxes, can you refresh my memory on how, I've changed colour, yet a little corner piece remains white on either side :D

They are images which is located in:

images/infobox/

Also this is described on the very first page of ths tread..... :P

#1409   narutocrazy

narutocrazy
  • Members
  • 5 posts
  • Real Name:Alex H.

Posted 21 February 2010 - 05:39 AM

Hi,

I am trying to change the menu/navi for my website. Currently it's just gif pictures with no animation that I use and I want it to have a hover effect. I found the part that I need to edit in the footer (I think), it's the following:

 <td><a href="<?php echo tep_href_link('index.php')?>"><?php echo tep_image_button('m1.gif')?></a><a href="<?php echo tep_href_link('products_new.php')?>"><?php echo tep_image_button('m2.gif')?></a><a href="<?php echo tep_href_link('specials.php')?>"><?php echo tep_image_button('m3.gif')?></a><a href="<?php echo tep_href_link('account.php')?>"><?php echo tep_image_button('m4.gif')?></a><a href="<?php echo tep_href_link('contact_us.php')?>"><?php echo tep_image_button('m5.gif')?></a>

m1,m2 etc are the pictures for the links that I currently use. I already have the pictures (the regular ones and the hover ones) created in a folder root/buttons but I'm unsure as to how to build it properly into the code and what files I have to change. I am unsure whether it's just the header.php or the css file as well. And then I wouldn't even know what to edit there o.O

#1410   toyicebear

toyicebear
  • Community Sponsor
  • 6,099 posts
  • Real Name:Nick
  • Gender:Male
  • Location:World Citizen

Posted 21 February 2010 - 06:39 AM

View Postnarutocrazy, on 21 February 2010 - 05:39 AM, said:

Hi,

I am trying to change the menu/navi for my website. Currently it's just gif pictures with no animation that I use and I want it to have a hover effect. I found the part that I need to edit in the footer (I think), it's the following:

 <td><a href="<?php echo tep_href_link('index.php')?>"><?php echo tep_image_button('m1.gif')?></a><a href="<?php echo tep_href_link('products_new.php')?>"><?php echo tep_image_button('m2.gif')?></a><a href="<?php echo tep_href_link('specials.php')?>"><?php echo tep_image_button('m3.gif')?></a><a href="<?php echo tep_href_link('account.php')?>"><?php echo tep_image_button('m4.gif')?></a><a href="<?php echo tep_href_link('contact_us.php')?>"><?php echo tep_image_button('m5.gif')?></a>

m1,m2 etc are the pictures for the links that I currently use. I already have the pictures (the regular ones and the hover ones) created in a folder root/buttons but I'm unsure as to how to build it properly into the code and what files I have to change. I am unsure whether it's just the header.php or the css file as well. And then I wouldn't even know what to edit there o.O



You can add a hover effect by using html/css/javascript.

You will have to edit the file where the code resides to add html mark up, if you use javascript it should be called within the <head></head> tags on all pages where this effect showes.

The corresponding css code can be added to stylesheet.css

#1411   thebodhiman

thebodhiman
  • Members
  • 18 posts
  • Real Name:Stephen Busch

Posted 22 February 2010 - 12:00 AM

View Posttoyicebear, on 25 March 2005 - 12:35 PM, said:

Happy to Please...  :P  :blush:  :P

Hi
I have customised my site to a black background, see http://bodhitorque.com/thebodhivibe
the info boxes I am happy to leave white, yet as my preference for main body text is white, I wish to know where abouts in style sheet I can make changes to get text showing in all boxes, eg login boxes, text not showing as white background, can text colour be changed seperate to main body text?, also main page, bright green highlight..do you know where this can be  changed? anything else you can see that could be an issue with this background choice and the solution appreciated
many thanks
Stephen

#1412   Maciej Bedlin

Maciej Bedlin
  • Members
  • 10 posts
  • Real Name:Maciej
  • Gender:Male

Posted 26 February 2010 - 11:44 AM

hi ...
it's my 1st post..
i just started with OScomm. and would like to know where to find a background line?
i mean in my shop www.cheapergraphics.co.uk i would like to have my own background under shop tables
thanks a lot

Edited by Maciej Bedlin, 26 February 2010 - 11:58 AM.


#1413   toyicebear

toyicebear
  • Community Sponsor
  • 6,099 posts
  • Real Name:Nick
  • Gender:Male
  • Location:World Citizen

Posted 26 February 2010 - 12:01 PM

View Postthebodhiman, on 22 February 2010 - 12:00 AM, said:

Hi
I have customised my site to a black background,
the info boxes I am happy to leave white, yet as my preference for main body text is white, I wish to know where abouts in style sheet I can make changes to get text showing in all boxes, eg login boxes, text not showing as white background, can text colour be changed seperate to main body text?, also main page, bright green highlight..do you know where this can be  changed? anything else you can see that could be an issue with this background choice and the solution appreciated
many thanks
Stephen

It can be changed in this file : stylesheet.css

But the styles from the infoboxes are also used in the center content at some places , so you will have to change the class in those files too.

Edited by toyicebear, 26 February 2010 - 12:04 PM.


#1414   toyicebear

toyicebear
  • Community Sponsor
  • 6,099 posts
  • Real Name:Nick
  • Gender:Male
  • Location:World Citizen

Posted 26 February 2010 - 12:09 PM

View PostMaciej Bedlin, on 26 February 2010 - 11:44 AM, said:

hi ...
it's my 1st post..
i just started with OScomm. and would like to know where to find a background line?
i mean in my shop i would like to have my own background under shop tables
thanks a lot



Since you use BDP it can be added in stylesheet.css

Edited by toyicebear, 26 February 2010 - 12:11 PM.


#1415   Maciej Bedlin

Maciej Bedlin
  • Members
  • 10 posts
  • Real Name:Maciej
  • Gender:Male

Posted 26 February 2010 - 12:27 PM

View Posttoyicebear, on 26 February 2010 - 12:09 PM, said:

Since you use BDP it can be added in stylesheet.css
thanks for fast reply
yes i know but i would like to use my own JPG file as a background and all I can see is just single colours..
which line do I have to change how to use graphic instead of one single colour

#1416   toyicebear

toyicebear
  • Community Sponsor
  • 6,099 posts
  • Real Name:Nick
  • Gender:Male
  • Location:World Citizen

Posted 26 February 2010 - 12:47 PM

View PostMaciej Bedlin, on 26 February 2010 - 12:27 PM, said:

thanks for fast reply
yes i know but i would like to use my own JPG file as a background and all I can see is just single colours..
which line do I have to change how to use graphic instead of one single colour


Use google to find out how to add image backgrounds in css

basically images can be used instead of/in addition to colors in the stylesheet.

In bdp the outer background is the body class , while the inner background is fixedcenter class

#1417   prakasha

prakasha
  • Members
  • 12 posts
  • Real Name:Aswani

Posted 12 March 2010 - 12:15 PM

dear nick,
hi. read all 71 pages of this thread. great stuff. wanted to thank you very much for all your help.
cheers!

prakash
www.fineprint.in

#1418   comstech

comstech
  • Members
  • 27 posts
  • Real Name:Troy Davis

Posted 25 March 2010 - 08:32 AM

Can I please have some help to change how the categories area looks.
I came across this site and the categories area is nice and clean and I would like to do the same
http://www.extremehobbiesmiami.com/index.php

But I have no idea where to start, So can someone please let me know which file controls the display of categorises.
I can see I need to add a icon before the name and some how get each item in to it's own cell

Thanks

#1419   toyicebear

toyicebear
  • Community Sponsor
  • 6,099 posts
  • Real Name:Nick
  • Gender:Male
  • Location:World Citizen

Posted 25 March 2010 - 09:54 AM

View Postcomstech, on 25 March 2010 - 08:32 AM, said:

But I have no idea where to start, So can someone please let me know which file controls the display of categorises.
I can see I need to add a icon before the name and some how get each item in to it's own cell


There are many different category boxes available as add-ons in the contributions section.

That site is using one called, Great Categories


Actually that site is using the Basic design Package which also include the great category add-on, you can find BDP here...

Edited by toyicebear, 25 March 2010 - 09:54 AM.


#1420   comstech

comstech
  • Members
  • 27 posts
  • Real Name:Troy Davis

Posted 25 March 2010 - 12:35 PM

View Posttoyicebear, on 25 March 2010 - 09:54 AM, said:

There are many different category boxes available as add-ons in the contributions section.

That site is using one called, Great Categories


Actually that site is using the Basic design Package which also include the great category add-on, you can find BDP here...

Thankyou toyicebear, I will go and have a look