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

Replace the table based buttons with CSS!
 
Reply
   X-Cart forums > X-Cart 4 > Changing and adding new features
 
Thread Tools Search this Thread
  #1  
Old 03-01-2007, 09:33 AM
  Zaja's Avatar 
Zaja Zaja is offline
 

X-Adept
  
Join Date: Mar 2004
Location: The Universe is my home
Posts: 420
 

Default Replace the table based buttons with CSS!

I believe it's time for replacing the table based buttons with pure css, here is a method(x-cart v. 4.1.6 to 4.1.11).
-------------------------------------------------------------------------

1) Copy attached button.tpl file to the skin1/buttons directory.

2) Copy attached but_bg.gif and but_bg_hover.gif files to the skin1/images directory.

3) Open the skin1.css file and replace Buttons classes with following code.
Code:
/* Buttons */ .FormButton { color: #860000; font-weight: bold; } .Button, .ButtonOn { padding: 3px 10px 3px 15px; float: left; display: block; background: no-repeat left bottom; cursor: pointer; } .Button { border-right: 1px solid #333; border-bottom: 1px solid #333; background: #c1c1c1 url(images/but_bg.gif); color: #282828; } .ButtonOn { border-right: 1px solid #415715; border-bottom: 1px solid #415715; background: #a7d34e url(images/but_bg_hover.gif); color: #000; } .SimpleButton { padding: 0; white-space: nowrap; } .SimpleButton a, .SimpleButton a:hover { padding-right: 3px; color: #5d0000; font-weight: bold; text-decoration: none; } .SimpleButton a:hover { color: #f20000; } .GoImage { vertical-align: middle; }
Attached Thumbnails
Click image for larger version

Name:	but_bg.gif
Views:	114
Size:	504 Bytes
ID:	270  Click image for larger version

Name:	but_bg_hover.gif
Views:	108
Size:	504 Bytes
ID:	271  
Attached Files
File Type: txt button.tpl_4.1.11.txt (2.2 KB, 20 views)
File Type: txt button.tpl_4.1.x.txt (2.1 KB, 21 views)
__________________
_/ _/ _/ _/ _/ _/ _/ _/ _/

7dana.com
Reply With Quote
  #2  
Old 03-01-2007, 09:55 AM
 
hooter hooter is offline
 

X-Adept
  
Join Date: Dec 2004
Posts: 519
 

Default Re: Replace the table based buttons with CSS!

Zaja,

Most excellent!
__________________
Blog for X-Cart | Ebay Auction Manager
Reply With Quote
  #3  
Old 03-02-2007, 08:03 AM
  Warwick's Avatar 
Warwick Warwick is offline
 

X-Adept
  
Join Date: Mar 2003
Location: Somewhere on the web through European connection
Posts: 868
 

Cool Re: Replace the table based buttons with CSS!

Useful!

Thanks for sharing
__________________
Installs: X-Cart 4.1.x - 4.4.x ∙∙ MySQL version: 5.0.45 ∙∙ Apache version: 2.2.8 (Unix) ∙∙ PHP version: 5.25
X-Cart add-ons: all ∙∙ Mods: A lot; too many ∙∙ Skin templates: Many
∙∙ Experience: Somewhere beyond newbie
-----------------------------------
------------------------------------------------------------------------------------------------------
Looking for the best dutch language pack? 4.1.x - 4.6.x compatibel, native speaker translation! More info
Reply With Quote
  #4  
Old 01-13-2008, 05:29 PM
 
janeo janeo is offline
 

Newbie
  
Join Date: Apr 2006
Location: Australia
Posts: 2
 

Default Re: Replace the table based buttons with CSS!

your a gem - works well!
Reply With Quote
  #5  
Old 09-27-2010, 02:55 AM
 
xtech xtech is offline
 

X-Adept
  
Join Date: Jun 2010
Posts: 605
 

Default Re: Replace the table based buttons with CSS!

Quote:
Originally Posted by Zaja
I believe it's time for replacing the table based buttons with pure css, here is a method(x-cart v. 4.1.6 to 4.1.11).
-------------------------------------------------------------------------

1) Copy attached button.tpl file to the skin1/buttons directory.

2) Copy attached but_bg.gif and but_bg_hover.gif files to the skin1/images directory.

3) Open the skin1.css file and replace Buttons classes with following code.
Code:
/* Buttons */ .FormButton { color: #860000; font-weight: bold; } .Button, .ButtonOn { padding: 3px 10px 3px 15px; float: left; display: block; background: no-repeat left bottom; cursor: pointer; } .Button { border-right: 1px solid #333; border-bottom: 1px solid #333; background: #c1c1c1 url(images/but_bg.gif); color: #282828; } .ButtonOn { border-right: 1px solid #415715; border-bottom: 1px solid #415715; background: #a7d34e url(images/but_bg_hover.gif); color: #000; } .SimpleButton { padding: 0; white-space: nowrap; } .SimpleButton a, .SimpleButton a:hover { padding-right: 3px; color: #5d0000; font-weight: bold; text-decoration: none; } .SimpleButton a:hover { color: #f20000; } .GoImage { vertical-align: middle; }

Excellent codes for 4.1.x versions now can you help me for 4.3 versions???
__________________
X-cart Platinum
4.6.1
Reboot template
Reply With Quote
  #6  
Old 09-27-2010, 04:11 AM
 
Learner Learner is offline
 

X-Adept
  
Join Date: Dec 2008
Posts: 807
 

Default Re: Replace the table based buttons with CSS!

Hi Zaja I want to modify it for 4.4 versions.How it is possible for latest versions?

waiting for your reply..
__________________
4.6.1 Platinum


Reply With Quote
Reply
   X-Cart forums > X-Cart 4 > Changing and adding new features


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 09:46 AM.

   

 
X-Cart forums © 2001-2018