Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

OSC Newb: Rounded Corners on info boxes


aidanodr

Recommended Posts

Hi Guys,

 

An OSC Newb is me. Need to do some small customisations. Here is the site:

 

http://www.gorgeousthings.ie/shop/

 

Its still at its embryonic stage. As you can see I have changed the inner colour of the headers of the info boxes to green using the stylesheet.css file at the root of the shop. I want to remove the cornered graphics [ as they are grey ], ie the actual code maybe and leave the graphics their for the future. Where is the code [ html?] for the placement of these graphics? What file?

 

I am using the STS contribution, the banner up top I inserted directly into the sts_template.html, is it ok to do it this way? That is - is it OK to use HTML code / design in that file?

 

Cheers

Aidan

Link to comment
Share on other sites

Hi Guys,

 

An OSC Newb is me. Need to do some small customisations. Here is the site:

 

http://www.gorgeousthings.ie/shop/

 

Its still at its embryonic stage. As you can see I have changed the inner colour of the headers of the info boxes to green using the stylesheet.css file at the root of the shop. I want to remove the cornered graphics [ as they are grey ], ie the actual code maybe and leave the graphics their for the future. Where is the code [ html?] for the placement of these graphics? What file?

 

I am using the STS contribution, the banner up top I inserted directly into the sts_template.html, is it ok to do it this way? That is - is it OK to use HTML code / design in that file?

 

Cheers

Aidan

 

Hi Aidan. In your OSC, you will see the files in (path-to-catalog)/includes/boxes/ ... these files include information.php, categories.php, currencies.php, manufacturers.php, whats_new.php, etc., etc. ... In each of these pages, if you open them up, near the top, you will see this code:

new infoBoxHeading($info_box_contents, false, false);

 

The first "true/false" refers to whether or not you want your left corners rounded. The second "true/false" refers to whether or not you want your right corners rounded. "True" means corners rounded. "False" means corners not rounded. Adjust these as you wish; mine are set to 'not rounded' ("False") for both.

 

After looking at your website, I'm not sure what your goal is. Do you want the currently gray areas to be green? Again, I'm not sure. There are 2 options, though, you most likely have.

 

** Option 1 **

Go into your (path-to-catalog)/images/infobox folder, and find the 4 according images there ... arrow-right, corner-left, corner-right, corner-right-left, I believe. Open these up in Photoshop, or your preferred paint program, and convert them to .jpg format so that you may match your color needed. After you've converted them, select the color you'd like to use from the color palette. Depending on which color you want, you'll probably want to match what's on your (path-to-catalog)/stylesheet.css. Finally, save these icons back to the .gif format, and reupload the 4 .gif files back into the (path-to-catalog)/images/infobox folder using your FTP tool, or some file manager.

 

** Option 2 **

This is a trickier fix, but basically, it will make all of your infobox headings green, like you have 'em now. Go into your (path-to-catalog)/images folder, and find pixel_trans.gif. Right-click this, and select "copy", and then find an open area and select "paste". This will make a file, "copy of pixel_trans.gif". Create 2 more occurrences of this, so there are 3 files: copy of pixel_trans.gif, copy(2) of pixel_trans.gif, and copy(3) of pixel_trans.gif. Right click the first one, and select "rename". Rename it to corner_left.gif. Do the same for the other 2: rename to corner_right.gif, and corner_right_left.gif. Then, upload all 3 files into the (path-to-catalog)/images/infobox folder. This will override the previous gifs there, and basically make them invisible. This is what I've done with my shop.

 

Good luck!

Jason

 

Simple 1-2-3 Intructions on how to get, install and configure SSL

 

The Google Sandbox explained

 

Simple to follow instructions on how to change the look of your OSC

 

How To Make A Horrible OSC Website

 

my toolbox: All things WordPress-related - All things Adobe-related - PHP Designer 2007 - Codecanyon Junkie - Crimson Editor - Winmerge - phpMyAdmin - WS_FTP

 

my installed contributions: Category Banners, File Upload feature-.77, Header Tags, Sort_Product_Attributes_1, XSellv2.3, Price Break 1.11.2, wishlist 3.5, rollover_category_images_v1.2, Short_Description_v2.1, UPSXML_v1_2_3, quickbooks qbi_v2_10, allprods v4.4, Mouseover-effect for image-buttons 1.0, Ultimate_SEO, AAP 1.41, Auto Select State Value, Fast Easy Checkout, Dynamic SiteMap v2.0, Image Magic, Links Manager 1.14, Featured Products, Customer Testimonials, Article Manager, FAQ System, and I'm sure more ...

Link to comment
Share on other sites

Hi Jpweber,

 

Thanks for that info - much appreciated. Sorry for tardy reply - busy last few days on other offline stuff. I tried your suggestions and all relevant to this question is cool - Gorgeous Things

 

A further question is - as you can see I have added a new header logo and a background to the Breadcrumb etc area. I am using the STS contribution to edit the default 'look', In both cases I added straight HTML code to the supplied STS template file. For example for the $Breadcrumb area I created a table, popped the elongated circular edged rectangle [ white with green edge ] into this table as a CELL/TABLE BACKGROUND, then pasted the original breadcrumb table into it. Is this type of thing with STS OK to do, good practise etc? Just looking for pointers like this to proceed to make sure I am going in the right direction,

 

Cheers and thanks for the help,

Aidan

Link to comment
Share on other sites

Hi Jpweber,

 

Thanks for that info - much appreciated. Sorry for tardy reply - busy last few days on other offline stuff. I tried your suggestions and all relevant to this question is cool - Gorgeous Things

 

A further question is - as you can see I have added a new header logo and a background to the Breadcrumb etc area. I am using the STS contribution to edit the default 'look', In both cases I added straight HTML code to the supplied STS template file. For example for the $Breadcrumb area I created a table, popped the elongated circular edged rectangle [ white with green edge ] into this table as a CELL/TABLE BACKGROUND, then pasted the original breadcrumb table into it. Is this type of thing with STS OK to do, good practise etc? Just looking for pointers like this to proceed to make sure I am going in the right direction,

 

Cheers and thanks for the help,

Aidan

 

Aidan: While it is my advice to edit the default OSC template, I am not familiar with the Simple Template System. So really, you're going to have to ask around, check with other STS users, but I'd say just use trial and error. Change, save, upload, refresh your browser, test it out. Repeat the process. For instance, the breadcrumbs seem to be looking okay with you.

 

Is it good practise? Sure! If you can get things to function well while altering the default OSC look, while keeping things running smoothly and efficiently, without compromising any positive features, it's good practise.

 

Seems like you're on the right track. Make sure you get SSL, take off the "206 requests since ..." (nobody cares about that; it just makes your site too busy with unnecessary info). Keep adding products and product descriptions! That's the main thing, then work out the minor things later. Good luck.

Jason

 

Simple 1-2-3 Intructions on how to get, install and configure SSL

 

The Google Sandbox explained

 

Simple to follow instructions on how to change the look of your OSC

 

How To Make A Horrible OSC Website

 

my toolbox: All things WordPress-related - All things Adobe-related - PHP Designer 2007 - Codecanyon Junkie - Crimson Editor - Winmerge - phpMyAdmin - WS_FTP

 

my installed contributions: Category Banners, File Upload feature-.77, Header Tags, Sort_Product_Attributes_1, XSellv2.3, Price Break 1.11.2, wishlist 3.5, rollover_category_images_v1.2, Short_Description_v2.1, UPSXML_v1_2_3, quickbooks qbi_v2_10, allprods v4.4, Mouseover-effect for image-buttons 1.0, Ultimate_SEO, AAP 1.41, Auto Select State Value, Fast Easy Checkout, Dynamic SiteMap v2.0, Image Magic, Links Manager 1.14, Featured Products, Customer Testimonials, Article Manager, FAQ System, and I'm sure more ...

Link to comment
Share on other sites

Hi Jpweber,

 

"While it is my advice to edit the default OSC template"

 

I suppose I could put the same question here. Is it ok to add HTML stuff to OSC templates? For example the default template uses CSS for the colours and text etc. In order to add graphic boxes / design elements is it best to do so via CSS or is it OK to use good old HTML integrated inside the default template file. Im trying to demistify things, maybe I am thinking it is way more complicated than it is. I wouldnt mind seeing other finished template files to dissect, as obviously, right clicking / Source file on an OSC page will not give one the actual plain template contents used.

 

"Make sure you get SSL"

 

As I am doing this for someone else - we are not sure if this is the way to go yet - SSL will cost more sheckles with their host [ host not my choice ]. The person I am doing this for wants some control themselves - that is - to add / delete their own products, maybe change colors and add pages etc. This person has limited / no knowledge in this regard. I am not sure whether OSC is good for this. It seems to be for a reasonably tech savy person who wishes to set up their own shop. That is, knowledge of CSS and HTML would be necessary to do this. Am I right or wrong?

 

Either which way I am enjoying the experience of getting to know OSC for my own purposes.

 

Cheers

Aidan

Link to comment
Share on other sites

Archived

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

×
×
  • Create New...