What exactly are you trying to achieve? The faucet is broken up into a number of shortcodes so that you can insert those into your own layout. Additionally, you can use CSS to style these parts. You will not be able to easily control the captchas themselves because they are in IFRAMEs, but this is not a limitation of this plugin. Other than that, you should be able to control the layout by arranging the shortcodes and with CSS.

Thank you.

You are correct, the faucet UIs do not currently have classes to allow for easy styling with CSS.

I will add some classes and will release a patch soon.

I will let you know here once this is done.

with regards

thank you but can you give a little detail on this? i am a bit confused

The main file in any child theme is a style.css file.

Make sure that you have created this file correctly and that the child theme is activated.

Then you can add to this file any CSS rules you like.

All the faucet UIs have classes in the markup. These include the class “wallets-faucet” plus some other classes to differentiate between the different UIs.

For instance, to change the color of the background in the “Faucet earnings” table, you would add something like:

.wallets-faucet.referrals-list table { background-color: lightblue; }

Hope this helps.

like i tried this and got nothing

.wallets-faucet.referrals-list 
table { 
    background-color: lightblue;
 }

.wallets-faucet.rewards
table {
    width: 60%;
    border-collapse: collapse;
    background-color: lightblue;
}

i put in the child theme and in the “additional css” in the theme

Hello,

This problem is not really about the plugin, but here’s a few things that might be giving you problems with your CSS:

1. First of all, you should not add your rules to any existing file belonging to the plugin or theme because these files get overwritten on each update. This is why the recommended way is to use a child theme. Because the child theme is a separate component, it can remain as is even if other components are updated.

2. In the example you showed me above, there should be at least one space between the first closing curly bracket and the second selector.

3. There might be other rules on your page with a higher specificity that override your rules. To learn more about CSS specificity you can have a look at this fun tutorial.

In general, you can use your browser’s inspector feature to see which rules are actually applied to your elements. This can help you quickly debug your CSS.

You can also use the browser’s debug console to verify that your CSS file was actually loaded.

Best of luck!