CSS Conflict

academys1

We have recently installed the JCE Pro editor but noticed that front-end editing does not allow selection of text color. The palette box is all blue as per the screenshot. The JCE authors say that it is a css conflict but I can't find that string in the CSS files. Can you point me in the right direction please?

saguaros

academys1 Hi

Could you share the URL + super admin account of your site so I can check?

academys1

Thank you. What is the way to contact you without anyone being able to read the login details? The site is at www.academysingers.com.au

saguaros

academys1 You can add info in your reply and set it as Private.

academys1

This message is visible to Moderators only

hidden content

saguaros

Thanks for the info, I can access your site now.

Accidentally, both our template and JCE editor have custom style for button element so it caused the conflict. It's not recommend to remove the button there as it will affect other pages (where also use button).

I suggest you apply some custom css to fix this issue:

.mceDefaultSkin .mceButton, .mceDefaultSkin .mceListBox .mceText, .mceDefaultSkin .mceListBox .mceOpen, .mceDefaultSkin .mceSplitButton .mceText, .mceDefaultSkin .mceSplitButton button, .wf-editor-header joomla-tab button {
    background-color: rgba(0, 0, 0, 0) !important;
}

.mceDefaultSkin .mceListBox .mceText, .wf-editor-header joomla-tab button {
    color: #444 !important;
}

Regards

academys1

Many thanks. Where do I insert the custom css? I created a file 'custom.css' and pasted the fix but it hasn't taken care of the issue.

saguaros

I can't log into your site with provided account anymore, which file did you add? kindly share the super admin account and FTP account.

academys1

This message is visible to Moderators only

hidden content

saguaros

As I can see that it's loading above custom CSS already and the editor looks fine now.

academys1

This message is visible to Moderators only

hidden content

saguaros

In this case, there is no way to override so I decide to remove the button element in the above style:

root/templates/business_line/index.php

and remove the 'button' element in line 69:

.readon, .button, .s5_ls_readmore, .dropdown-menu li > a:hover, .dropdown-menu li > a:focus, .dropdown-submenu:hover > a, .dropdown-menu .active > a, .dropdown-menu .active > a:hover, .nav-list > .active > a, .nav-list > .active > a:hover, .nav-pills > .active > a, .nav-pills > .active > a:hover, .btn-group.open .btn-primary.dropdown-toggle, .btn-primary, .item-page .dropdown-menu li > a:hover, .blog .dropdown-menu li > a:hover, .item .dropdown-menu li > a:hover, .btn, .pagenav a, .ac-container label:hover, .ac-container2 label:hover, .jdGallery .carousel .carouselInner .active, p.readmore a:hover, .s5_is_css_10 .s5_is_slide_css_plus_circle:hover, .progress_bar3, .s5_tab_show_slide_button_active, .steps_boxes_highlight1, .module_round_box.highlight1 {
background:#<?php echo $s5_highlightcolor1; ?> !important;
}