Follow us on Twitter X-Cart on Facebook Wiki
Shopping cart software Solutions for online shops and malls

Rounded Corners - CSS and JS Methods

 
Reply
   X-Cart forums > X-Cart 4 > Dev Questions
 
Thread Tools Search this Thread
  #1  
Old 04-29-2010, 04:19 PM
 
PhilJ PhilJ is offline
 

X-Guru
  
Join Date: Nov 2002
Posts: 3,984
 

Default Rounded Corners - CSS and JS Methods

Thought I'd post the two best rounded corners methods I've found.

Roll on CSS3 on all browsers, but in the mean time these will have to do.

Hope you can make good use of these in your X-Cart and other projects

Examples given for v4.3.x

CSS Method:

Positives:
- Very lightweight and fast rendering
- Easy to customise via CSS
Negatives:
- Jagged corners
- Only one possible corner radius
- Only 1 pixel borders
- More HTML markup

JS Method:

Positives:
- Easy to customise via CSS
- Anti-aliased corners
- Easily change corner radius
- Ability to round different corners
- Different width borders
- Can use shadows
- Less HTML markup
Negatives:
- Much slower rendering in IE

DOWNLOAD
http://www.xcartmods.co.uk/freebies/X-Cart_Rounded_Corners_v4.3.x.zip

1000th post
Reply With Quote

The following 4 users thank PhilJ for this useful post:
cherie (05-01-2010), eaglemobiles (05-15-2010), Eventsbyjulia (07-17-2010), XBOX4LIFE (06-14-2010)
  #2  
Old 04-29-2010, 05:28 PM
  AusNetIT's Avatar 
AusNetIT AusNetIT is offline
 

Senior Member
  
Join Date: Apr 2009
Posts: 149
 

Thumbs up Re: Rounded Corners - CSS and JS Methods

Thanks and Big Thumbs Up for your 1000
__________________
Melbourne website design | SEO in Melbourne

Installed Ver 4.6.0
Reply With Quote
  #3  
Old 05-02-2010, 03:31 PM
 
Christofer Christofer is offline
 

eXpert
  
Join Date: Apr 2009
Location: Thessaloniki, Greece
Posts: 202
 

Default Re: Rounded Corners - CSS and JS Methods

Quote:
Originally Posted by PhilJ
Thought I'd post the two best rounded corners methods I've found.

Roll on CSS3 on all browsers, but in the mean time these will have to do.

Hope you can make good use of these in your X-Cart and other projects

Examples given for v4.3.x

CSS Method:

Positives:
- Very lightweight and fast rendering
- Easy to customise via CSS
Negatives:
- Jagged corners
- Only one possible corner radius
- Only 1 pixel borders
- More HTML markup

JS Method:

Positives:
- Easy to customise via CSS
- Anti-aliased corners
- Easily change corner radius
- Ability to round different corners
- Different width borders
- Can use shadows
- Less HTML markup
Negatives:
- Much slower rendering in IE

DOWNLOAD
http://www.xcartmods.co.uk/freebies/X-Cart_Rounded_Corners_v4.3.x.zip

1000th post

for v.4.2.x?
__________________
X-Cart Gold : 4.2.1 (on linux parallels plesk / mysql)
Php v5.2.9 (Zend: 2.2.0) - MySql v5.0.79 - LiteSpeed server
Modules : X-Offer & X-Aom & One page checkout
Product tabs & Product downloads & many more
Reply With Quote
  #4  
Old 05-31-2010, 04:28 PM
  eaglemobiles's Avatar 
eaglemobiles eaglemobiles is offline
 

Senior Member
  
Join Date: Jan 2005
Posts: 167
 

Default Re: Rounded Corners - CSS and JS Methods

any help please how to put round box areound the product in product list page

Thanks
__________________
X-Cart Gold 4.3.2
X-Cart Gold 4.4.1
Unix

High Quality CCTV DVRs & Cameras
http://www.eaglemobiles.co.uk/CCTV
Reply With Quote
  #5  
Old 06-18-2010, 01:15 AM
 
Learner Learner is offline
 

X-Adept
  
Join Date: Dec 2008
Posts: 807
 

Default Re: Rounded Corners - CSS and JS Methods

PhilJ will it work on 4.1.11??

waiting for your reply..
__________________
4.6.1 Platinum


Reply With Quote
  #6  
Old 10-11-2010, 02:02 AM
 
Learner Learner is offline
 

X-Adept
  
Join Date: Dec 2008
Posts: 807
 

Default Re: Rounded Corners - CSS and JS Methods

Quote:
Originally Posted by PhilJ
Thought I'd post the two best rounded corners methods I've found.

Roll on CSS3 on all browsers, but in the mean time these will have to do.

Hope you can make good use of these in your X-Cart and other projects

Examples given for v4.3.x

CSS Method:

Positives:
- Very lightweight and fast rendering
- Easy to customise via CSS
Negatives:
- Jagged corners
- Only one possible corner radius
- Only 1 pixel borders
- More HTML markup

JS Method:

Positives:
- Easy to customise via CSS
- Anti-aliased corners
- Easily change corner radius
- Ability to round different corners
- Different width borders
- Can use shadows
- Less HTML markup
Negatives:
- Much slower rendering in IE

DOWNLOAD
http://www.xcartmods.co.uk/freebies/X-Cart_Rounded_Corners_v4.3.x.zip

1000th post

Hi PhilJ,
Codes works perfect on home page,product details but does not work on cart and fast lane checkout page.

How to solve this??

Waiting for reply.
__________________
4.6.1 Platinum


Reply With Quote
  #7  
Old 10-11-2010, 02:14 AM
  AusNetIT's Avatar 
AusNetIT AusNetIT is offline
 

Senior Member
  
Join Date: Apr 2009
Posts: 149
 

Default Re: Rounded Corners - CSS and JS Methods

HI,

Bit hard to find PhilJ these days?

Thanks,
__________________
Melbourne website design | SEO in Melbourne

Installed Ver 4.6.0
Reply With Quote
  #8  
Old 10-11-2010, 02:17 AM
 
Learner Learner is offline
 

X-Adept
  
Join Date: Dec 2008
Posts: 807
 

Default Re: Rounded Corners - CSS and JS Methods

Then how to solve this issue???
__________________
4.6.1 Platinum


Reply With Quote
  #9  
Old 10-11-2010, 09:08 PM
 
Learner Learner is offline
 

X-Adept
  
Join Date: Dec 2008
Posts: 807
 

Default Re: Rounded Corners - CSS and JS Methods

Ok solve it We have to add <link rel="stylesheet" type="text/css" href="{$SkinDir}/corners/styles.css" /> in
skin1/modules/Fast_Lane_Checkout/home.tpl to get the rounded corner in cart and Fast lane checkout page.

Thanks
__________________
4.6.1 Platinum


Reply With Quote
  #10  
Old 10-18-2010, 07:04 PM
  KCAutosound's Avatar 
KCAutosound KCAutosound is offline
 

eXpert
  
Join Date: Feb 2005
Posts: 220
 

Default Re: Rounded Corners - CSS and JS Methods

Any ideas on how to get this to work around the products? I did this with my previous site using images for the rounded borders but would like to use this mod instead.

http://www.kcautosound.com/images/rounded.jpg
__________________
X-Cart version 4.7.6 Gold
xcartmods.co.uk - Ultra Template
Reply With Quote
Reply
   X-Cart forums > X-Cart 4 > Dev Questions


Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT -8. The time now is 11:01 PM.

   

 
X-Cart forums © 2001-2020