I've attached examples of the difference between views of the editor in the front and backend, thanks
You need to be logged in to post in the forum - Log In
An active JCE Pro Subscription is required to post in the forum - Buy a Subscription
Support is currently Offline
09:00 - 17:00 Europe/London (BST)
Please create a new Ticket and we will get back to you as soon as we can.
#102743 Button layout and colours issue
This is a public ticket
Everybody will be able to see its contents. Do not include usernames, passwords or any other sensitive information.
Latest post by CirrusTeam on Tuesday, 28 January 2020 15:15 GMT
Thursday, 23 January 2020 16:58 GMT
I've attached examples of the difference between views of the editor in the front and backend, thanks
Thursday, 23 January 2020 19:17 GMT
It seems to be picking up different sizing and colours which is affecting the layout and use (including making certain aspects unusable such as the font colour dropdown).
These changes are most likely caused by css rules in your template's stylesheet, that are overriding the editor's own toolbar button styles on <div> and <td> tags.
Ryan Demmer
Lead Developer / CEO / CTO
Just because you're not paranoid doesn't mean everybody isn't out to get you.
Monday, 27 January 2020 09:19 GMT
Thanks for the response. We can see that the menu is inheriting the styles from our template. We have used these templates for 5 years along with JCE , is there any reason for this change ? (we haven't updated the themes in years) Any ideas on a fix as we bought these templates a long time back and now dont have any support with them.
Another issue : We can no longer select colours from the colour picker either as all colours are being changed.
Thanks in adnance
Monday, 27 January 2020 09:53 GMT
Ryan Demmer
Lead Developer / CEO / CTO
Just because you're not paranoid doesn't mean everybody isn't out to get you.
Monday, 27 January 2020 11:04 GMT
We have used these templates for 5 years along with JCE , is there any reason for this change ?In JCE 2.7 we updated the editor toolbar to improve the HTML used, so it is more semantic, eg: the <button> tag is used for button elements. Your template stylesheet includes a number of styles for the button element - line 60 of templates/allbusiness/css/template.css - Some of these include an !important statement which makes the css style override any other style for the button element. You will need to remove !important from these styles to fix the issue, eg:
.button,
button,
a.button,
.btn,
#com-form-login-remember input.default,
.camera_caption a.button,
a.product-details,
input.addtocart-button,
a.ask-a-question,
.highlight-button,
.vm-button-correct,
span.quantity-controls input.quantity-plus,
span.quantity-controls input.quantity-minus,
a.details {
padding: 10px 22px 10px 22px;
cursor: pointer;
vertical-align: middle;
font-weight: 600;
text-decoration: none;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.40);
line-height: 16px;
border-style: solid;
border-width: 0px;
-moz-transition-duration: 0.4s;
-webkit-transition-duration: 0.4s;
-o-transition-duration: 0.4s;
-ms-transition-duration: 0.4s;
transition-duration: 0.4s;
-webkit-transition-property: all;
-ms-transition-property: all;
-o-transition-property: all;
-moz-transition-property: all;
transition-property: all;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.39);
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.39);
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.39);
display: inline-block;
text-align: center;
margin: 5px;
}
There apppear to be a number of "inline" styles, possibly in the index.php file of the template, that also contain overrides and will need the important statement removed, eg:
.button,
button,
a.button,
.btn,
dt.tabs.closed:hover,
dt.tabs.closed:hover h3 a,
.closemenu,
.vmproduct.product-details .spacer:hover .pr-add,
.vmproduct.product-details .spacer:hover .pr-add-bottom,
a.product-details,
a.ask-a-question,
.highlight-button,
.vm-button-correct,
.cartpanel span.closecart,
.vm-pagination ul li a,
#LoginForm .btn-group>.dropdown-menu,
#LoginForm .btn-group>.dropdown-menu a,
a.details,
#stickymenuButton,
.img_style2 .con_style2 p::before,
.product-neighbours a.previous-page::before,
.product-neighbours a.next-page::after,
input.addtocart-button,
.camera_caption .button.b-arrow::after,
#com-form-login-remember input.default,
.camera_caption_bg a.button,
#sbox-btn-close:hover::after,
.owl-theme .owl-controls .owl-buttons div.owl-prev:hover::before,
.owl-theme .owl-controls .owl-buttons div.owl-next:hover::before,
.activeOrder,
.view-as li a,
.button.light:hover,
.button.light.white:hover,
.button.light.black:hover {
color: #ffffff;
background-color: #77bc1f;
}
Ryan Demmer
Lead Developer / CEO / CTO
Just because you're not paranoid doesn't mean everybody isn't out to get you.
Tuesday, 28 January 2020 15:15 GMT
Please wait
Your post is being submitted…