ProductCart E-Commerce Solutions Homepage
Forum Home Forum Home > ProductCart > Customizing ProductCart
  New Posts New Posts RSS Feed - Switching from Image Buttons to CSS Buttons
  FAQ FAQ  Forum Search   Events   Register Register  Login Login

Switching from Image Buttons to CSS Buttons

 Post Reply Post Reply
Author
Message
BlackReefDesigns View Drop Down
Newbie
Newbie


Joined: 28-May-2008
Location: San Diego, CA
Status: Offline
Points: 8
Post Options Post Options   Thanks (0) Thanks(0)   Quote BlackReefDesigns Quote  Post ReplyReply Direct Link To This Post Topic: Switching from Image Buttons to CSS Buttons
    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
Back to Top
Greg Dinger View Drop Down
Certified ProductCart Developers
Certified ProductCart Developers
Avatar

Joined: 23-September-2006
Location: United States
Status: Offline
Points: 238
Post Options Post Options   Thanks (0) Thanks(0)   Quote Greg Dinger Quote  Post ReplyReply Direct Link To This Post 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

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

Back to Top
 Post Reply Post Reply
  Share Topic   

Forum Jump Forum Permissions View Drop Down

Forum Software by Web Wiz Forums® version 12.04
Copyright ©2001-2021 Web Wiz Ltd.

This page was generated in 0.094 seconds.