[Ultimate Branding] Transparant countdown clock possible?

Hi,
We want to make some changes on our website and want to use the Coming Soon Page & Maintenance Mode module.

We tested it and we would like to make the countdown clock a bit more transparent so the background image can be seen more.
Is that possible?

Kind regards, Age

  • Adam Czajczyk

    Hi jongag1

    I hope you're well today and than you for your question!

    You can achieve that with a little bit of additional CSS:

    .has-counter .page {
        background-color:rgba( 255, 255, 255, 0.7);
    }

    The code above sets the color to semi-transparent white. First three values - 255, 255, 255 - are, accordingly: red, green, blue color values (value can be from 0 to 255) and the last one is the transparency (opacity) where 0 is fully transparent and 1 is no transparency at all.

    You can add this code to your site e.g. via "Appearance -> Customize -> Additional CSS" option in site's back-end.

    I hope that helps :slight_smile:

    Best regards,
    Adam

  • Adam Czajczyk

    HI jongag1

    I just tested the code on that new site via browser and it seemed to work. Here's what I got:

    But I didn't see the code added to the site actually before I put it in a browser CSS editor so I'm not sure why it isn't working for you. I'd like to take a look so would you mind granting me a support access to that site? I'd check it and I'm sure we can make it work :slight_smile:

    You can grant support access by going to the "WPMU DEV -> Support" page in site's back-end and clicking on "Grant support access" button there, just let me know please once it's done.

    Best regards,
    Adam

  • Adam Czajczyk

    Hi jongag1

    Thanks for granting access. It turns out that it's not related to your site and to your CSS plugin. I actually missed that when creating the code because I checked it in the browser and kind of "automatically assumed" that it's enough to add it to the site.

    Ultimately, the issue is different. In theory, Ultimate Branding already has a setting for transparency for background but that's not working fine. That's a known issue and will be fixed in Branda (Ultimate Branding 3). Until that's released the CSS is the only way to achieve it.

    However, the point it - and that's what I missed - when a coming soon/maintenance page is displayed, there's a "template_redirect" hook used to actually load an entirely custom page template. That template is simplified to that level that there's no header/footer hooks executed that could be used to easily inject the CSS - that's why the CSS form your plugin (and that would apply to any other plugin as well, including the code added to customizer if it was available) doesn't work and simply is not even added.

    This, theoretically, could be addressed by hooking to some internal Ultimate Branding filter or action hook but again - there's none until Branda is released.

    So ultimately, the solution here is to actually edit one of the plugin files. This will work and it's not a complex change but you need to remember that:

    - this will be a "fixed change" so it will "override" color settings form UB maintenance module settings
    - it will be lost after plugin update (on the other hand: after Branda is released it should no longer be necessary).

    So how to do this?

    You'd need to edit following file on your server:

    /wp-content/plugins/ultimate-branding/ultimate-branding-files/modules/maintenance/assets/maintenance.css

    and simply add the CSS from my first post at the very end of the file. After you save it (and, probably, clear browser cache) the change should be visible. This time I tested it on my own test site to make sure so I can confirm that it works :slight_smile:

    Best regards,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.