Hello JS,
Thank you very much for your detailed review. It gives us motivation to work harder to make it more useful and powerful.
Regarding CSS, you correctly point out about bootstrap but thing is, conflicts vary theme to theme for bootstrap based themes. What we are doing to make it work is that whenever there is report of the theme, we provide conflict resolution in product for that theme and so on. Can you also please share name of the theme and your CSS code which fixed on your site? So that it will get fixed for future users of the theme.
For non-bootstrap based themes there are hardly any css conflicts.
-
This reply was modified 7 years, 6 months ago by
SupportCandy.
-
This reply was modified 7 years, 6 months ago by
SupportCandy.
Sure, I’m happy to share. 🙂
Here are the front-end fixes:
/* -------- Support Candy -------- */
#content .bootstrap-iso * {
-webkit-border-radius:0; /* fix dated rounded corners */
-moz-border-radius:0; /* fix dated rounded corners */
border-radius:0; /* fix dated rounded corners */
}
#content .bootstrap-iso input,
#content .bootstrap-iso select,
#content .bootstrap-iso textarea {
-webkit-border-radius:0 !important; /* fix dated rounded corners */
-moz-border-radius:0 !important; /* fix dated rounded corners */
border-radius:0 !important; /* fix dated rounded corners */
}
#content .bootstrap-iso input[type="radio"],
#content .bootstrap-iso input[type="checkbox"] { /* fix checboxes to match back-end */
border: 1px solid #b4b9be;
background: #fff;
color: #555;
clear: none;
cursor: pointer;
display: inline-block;
line-height: 0;
height: 16px;
outline: 0;
padding: 0 !important;
text-align: center;
vertical-align: middle;
width: 16px;
min-width: 16px;
-webkit-appearance: none;
box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
transition: .05s border-color ease-in-out;
}
#content .bootstrap-iso .btn-lg { /* standardize and always use small buttons */
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
}
#content .mce-tinymce {
border:1px solid #cccccc;
}
#content iframe#ticket_description_ifr {
height:300px !important;
}
#content div.row.wpsc_tl_action_bar {
padding-top:13px; /* fix for extra space bellow buttons */
}
#content div.row.attachment {
margin-top:10px !important;
margin-bottom:0 !important;
}
#content #frm_wpsc_sign_in {
margin-top:20px; /* fix space in sign-in form */
}
#content #frm_wpsc_sign_in input[type="text"] {
margin:10px 0; /* fix missing space between input boxes */
}
#content #wpsc_frm_signup_user {
margin-top:20px; /* fix space at top of form */
margin-bottom:30px; /* fix space at bottom of form */
}
#content div.captcha_container {
font-weight:normal; /* no need for bold with already highlighted dark button */
padding:7px 15px 10px 15px; /* button too big and inherits wrong left/right padding */
width:33.33333333%; /* match default input field width of 33% instead of 50% */
}
#content #wpsc_popup {
height:auto; /* allow the popup body to adjust */
}
#content #wpsc_popup_body {
max-height:80vh; /* adjust to 80% of vertical height */
}
And the back-end fixes:
/* -------- Support Candy -------- */
#wpbody-content .bootstrap-iso * {
-webkit-border-radius:0; /* fix dated rounded corners */
-moz-border-radius:0; /* fix dated rounded corners */
border-radius:0; /* fix dated rounded corners */
}
#wpbody-content .bootstrap-iso input,
#wpbody-content .bootstrap-iso select,
#wpbody-content .bootstrap-iso textarea {
-webkit-border-radius:0 !important; /* fix dated rounded corners */
-moz-border-radius:0 !important; /* fix dated rounded corners */
border-radius:0 !important; /* fix dated rounded corners */
}
#wpbody-content .mce-tinymce {
border:1px solid #cccccc;
}
#wpbody-content iframe#ticket_description_ifr {
height:300px !important;
}
#wpbody-content div.row.wpsc_tl_action_bar {
padding-top:13px; /* fix for extra space bellow buttons */
}
#wpbody-content div.row.attachment {
margin-top:10px !important;
margin-bottom:0 !important;
}
#wpbody-content div.captcha_container {
font-weight:normal; /* no need for bold with already highlighted dark button */
padding:7px 15px 10px 15px; /* button too big and inherits wrong left/right padding */
width:33.33333333%; /* match default input field width of 33% instead of 50% */
}
#wpbody-content #wpsc_popup {
height:auto; /* allow the popup body to adjust */
}
#wpbody-content #wpsc_popup_body {
max-height:80vh; /* adjust to 80% of vertical height */
}
Note that fixing the rounded corners is just a personal preference – I prefer a “flat” style to a rounded style for the containers on my sites, which includes input fields, buttons, etc.
js.
And in case you’re interested, here is the support site. 😉
https://surniaulula.com/support/
js.
Thank you very much again 🙂