How to change the default plugin layout

[Anonymous]

Hey folks,

i want to change the default layout of the faucet extension, any ideas?

[alexg]

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.

[Anonymous]

how can we change the css so it does not look like this?

https://prntscr.com/knlizu

also the text area here:
https://prntscr.com/knljrm

i know it is coming from main css but is it possible we change somewhere?

[alexg]

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

[alexg]

With version 1.4.1 you can now use the provided CSS classes to style your UIs.

Either provide a child theme to your theme, or use one of the many plugins for adding custom CSS rules to your page.

kind regards

[Anonymous]

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

[Anonymous]

I have looked all over…

i created a child theme, but not knowing what files to change and what are the name of the elements to change make it rough

thanks!

[alexg]

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.

[Anonymous]

thanks!

and the wallet class is located in that style.css?

when i get back i can look

[Anonymous]

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

[Anonymous]

i even added this in the wallet in the plugins/wallets/assets/styles/wallets-3.6.4.min.css

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

is there docs that i am missing where to do these things? this is def confusing me why i can not get this to work i even added a css plugin but nothing is working

[alexg]

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!

[Author]

Posts