Content Dock Close Button

[pettar2462]

Hi!

I am having the worst time changing the color of the close X button on the content dock on my home page.
I tried changing it in the content dock section in the back end, and I tried a few of the CSS suggestions found on the forum, but had had no luck.

Any help would be great. I just want to make it white.
Here is the site: https://www.legadoinitiative.org/

Thanks much!
Tara

[nabeel]

Hey Tara,

Thank you for reaching out to us. The close button is actually a svg image and you can’t change it’s color with CSS so we need a different approach to change the color. We can use a font awesome close icon instead of an image and then change it’s color with custom CSS. To do this, please add the following code in the Theme Options > CSS:

.x-close-content-dock > span > img {
    display: none !important;
}
.x-close-content-dock > span:before {
    content: '\f00d';
    width: 1em;
    height: 1em;
    font-family: "FontAwesome" !important;
    font-style: normal !important;
    font-weight: normal !important;
    text-decoration: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: white;
}

In the above code i’m using color: white; you can change it to different color as per your need. Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

[pettar2462]

Hi Nabeel!

Worked like a charm! Thanks so much!

Quick question: Just curious why there is an option to change the close button color in the Content Docks settings if it’s an svg?

Thanks again and have a great weekend!
T

[nabeel]

Hi Tara,

When i tested the Content Dock extension in my local setup i was able to change the color and hover color of the close button because it was rendered as an icon and not the svg so there must be something with your setup. Please check if you have the latest version of Content Dock extension. The latest version is 2.0.3. Go to your plugin’s section and check the version number and update it.

Let us know how this goes!

[pettar2462]

Interesting.

My Content Dock is version Version 1.1.4. Shouldn’t that be updating when the X theme automatically updates?

Thanks!
Tara

[friech]

Hi Tara,

No, it won’t update automatically, but it can easily be updated.

To update the Extensions to the version that is supported by the theme:

- Ensure your theme is validated so Extensions can be installed automatically
- Deactivate and delete the extensions, from the plugins panel.
- On the X > Validation > Extensions locate and install the extensions that you need.
- Visit "Plugins" panel in your Dashboard to activate the newly installed version.

Because all of the plugin settings are stored in the database, and because version 2.x will migrate settings from older versions, its safe to use this method of deleting the previous version. But always keep a backup of your entire site just to be safe.

Remember to clear all your caching features (plugin, server-side, CDN, and browser’s cache) after updating so that the code from the latest release is always in use. This will help you to avoid any potential errors.

Cheers!