Print Page | Close Window

Switching from Image Buttons to CSS Buttons

Printed From: ProductCart E-Commerce Solutions
Category: ProductCart
Forum Name: Customizing ProductCart
Forum Description: Exchange messages with other users that are customizing ProductCart.
URL: https://forum.productcart.com/forum_posts.asp?TID=6093
Printed Date: 21-November-2024 at 11:40am
Software Version: Web Wiz Forums 12.04 - http://www.webwizforums.com


Topic: Switching from Image Buttons to CSS Buttons
Posted By: BlackReefDesigns
Subject: Switching from Image Buttons to CSS Buttons
Date Posted: 07-October-2016 at 6:44pm
Is there any easier way to replace the default image buttons in ProductCart than manually replace the inline image code with CSS class in the .ASP files?

Thanks,



-------------
Joe S.
BlackReef.net



Replies:
Posted By: Greg Dinger
Date Posted: 11-October-2016 at 10:59am
Joe - 

If you are using the built-in mobile interface (which uses separate header/footer) the CSS to accommodate buttons should already be in there.

If your goal is to go responsive, and want CSS buttons for your desktop as well, look to the Bootstrap CSS files for the following code and tailor as you see fit.  Or you can add this code to non-Bootstrap themes.

/* ===================

START: BUTTONS

=================== */

.pcButton {   

            display: inline-block;

            padding: 6px 12px;

            margin: 2px;

            white-space: nowrap;

            text-align: center;

            vertical-align: middle;

            cursor: pointer;

            -webkit-user-select: none;

            -moz-user-select: none;

                        -ms-user-select: none;

                                                user-select: none;

            background-image: none;

            border: 1px solid transparent;

            border-radius: 4px;

            text-decoration: none;

            text-transform: uppercase;

            box-shadow: 0 0 3px rgba(0, 0, 0, 0.42);

            border-color: #1A2874;

            text-shadow: none;

            background: #1F7A31;

            border-bottom: 4px solid #074E07;

            color: white;

}

a.pcButton {

            text-decoration: none;

    color: #FFFFFF !important;

}

.pcButton .pcButtonText {

            display: block !important;

            font-size: 14px;

            font-weight: 700;

            line-height: 1.42857143;

            color: #FFFFFF;

}

.pcButton img,

.pcButton input[type="image"] {

            display: none;

}

.pcButton:hover {

 

}

 

.pcButtonAddToCart {

 

}

.pcButtonAddToCart:hover {

 

}

.pcButtonAddToCart .pcButtonText {

 

}

 

.pcButtonMoreDetails {

            padding: 3px 6px !important;

}

.pcButtonMoreDetails:hover {

            padding: 3px 6px !important;

}

 

.pcButtonAddToCartSmall {

            padding: 3px 6px !important;

}

.pcButtonAddToCartSmall:hover {

            padding: 3px 6px !important;

}

.pcButtonMoreDetails .pcButtonText,

.pcButtonAddToCartSmall .pcButtonText {

            font-size: 12px !important;

            border-bottom-width: 3px;

}

 

.secondary {

 

}

.secondary:hover {

 

}

.secondary .pcButtonText {

 

}

 

 

.tiny {

            padding: 3px 6px !important;

}

.tiny .pcButtonText {

            font-size: 10px !important;

}

 

a.pcMoreLink {

            font-size: 15px;

            margin: 10px 0;

            display: inline-block;

}

 

/* ===================

END: BUTTONS

=================== */



-------------
GreyBeard Design Group

Certified ProductCart Developer

Web Design/Development/Hosting

http://tinyurl.com/5c8t4t" rel="nofollow - Add-Ons & Custom Code |



Print Page | Close Window

Forum Software by Web Wiz Forums® version 12.04 - http://www.webwizforums.com
Copyright ©2001-2021 Web Wiz Ltd. - https://www.webwiz.net