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

Official support hours
Monday to Friday
09:00 - 17:00 Europe/London (BST)

Please create a new Ticket and we will get back to you as soon as we can.

#106123 Can't change background color on JCE tooltip

Posted in ‘Mediabox’
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 LukeDouglas on Monday, 14 December 2020 20:13 GMT

Sunday, 13 December 2020 20:42 GMT

LukeDouglas
I cannot change the background color of JCE tooltips on a site. It looks like my code is fine but it doesn't seem to be recognized. https://bamadenver.com/game-schedule/2020-football 

/* change background color on JCE tooltip
.tooltip {
    .tooltip-inner {
	    background-color: #800000 !important;
	    border-color: #800000 !important;
    }
    .tooltip-top .tooltip-arrow {
        border-top-color:#800000 !important;
    }
}
Any suggestions?

Monday, 14 December 2020 09:26 GMT

Ryan
Where have you added this code to? Also, your code is not in a standard css format, which does not support nested classes, so unless it is in a less or scss file that is being compiled to css, it should be: 

.tooltip .tooltip-inner {
    background-color: #800000 !important;
    border-color: #800000 !important;
}

.tooltip .tooltip-top .tooltip-arrow {
    border-top-color:#800000 !important;
}

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Monday, 14 December 2020 18:37 GMT

LukeDouglas
I edited the template custom SCSS file as shown in the location below. 

public_html/templates/g5_hydrogen/custom/scss/custom.scss
I went ahead and used your code but it didn't work.

Monday, 14 December 2020 19:17 GMT

Ryan
Did you click the Recompile CSS button in the template settings after making the changes?

Also, you appear to be using JCH Optimize on your site. Perhaps there is a cache that needs to be cleared there too.

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Monday, 14 December 2020 19:49 GMT

LukeDouglas
Ryan,

I did catch one mistake. It is "tooltip.top", not "tooltip-top". 😃

Yes, I always recompile the template CSS after making any changes.

Also, I always do the System > Clear Cache after recompiling any template.

I did disable the System - JCH Optimize Pro plugin as well as the System - Page Cache and System - Regular Labs - Cache Cleaner, then cleared the cache again. No luck! :(

FYI, I've developed over 160+ websites since I standardized on Joomla back in 2005 after the split from Mambo. I've worked in Gantry framework for over 5 years. Just to let you know, I am proficient. Which is why I am so confused as it 'honestly' looks correct.
Edited by LukeDouglas on 2020-12-14 19:57 GMT

Monday, 14 December 2020 19:54 GMT

Ryan
I should point out that the tooltip you are seeing is not a JCE MediaBox tooltip, as JCE MediaBox no longer includes tooltips, but rather the core Joomla tooltip, which JCE MediaBox now triggers using the .jcetooltip selector. So essentially you are attempting to override the css of the core Joomla tooltip. As to why this is not working, I can't tell. Perhaps your custom.css file is not being compiled or loaded for some reason. It's impossible to see with JCH Optimize in play.

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Monday, 14 December 2020 20:13 GMT

LukeDouglas
After checking the location, I caught that it was the default Gantry tooltip. So using the Gantry documentation at http://docs.gantry.org/gantry5/advanced/file-overrides, I created a templates/g5_hydrogen/custom/assets/css/ folder and copied the media/gantry5/assets/css/bootstrap-gantry.css into that folder. I directly changed the #000000 to #800000 in the tooltip styles but it didn't work.

I'll check with some of the Gantry support forums.

Thanks!