Open extra topbar

How to change the default plugin layout

If you are new here, please see some information on how to ask for support. Thank you!

How to change the default plugin layout

dashed-slug.net Forums Faucet extension support How to change the default plugin layout

This topic contains 11 replies, has 3 voices, and was last updated by  alexg 1 year, 2 months ago.

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1629

    zoop
    Participant

    Hey folks,

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

    #1654

    alexg
    Keymaster

    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.

    #4181

    dynamitemedia
    Participant

    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?

    #4184

    alexg
    Keymaster

    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

    #4186

    alexg
    Keymaster

    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

    #4202

    dynamitemedia
    Participant

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

    #4205

    dynamitemedia
    Participant

    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!

    #4208

    alexg
    Keymaster

    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.

    #4216

    dynamitemedia
    Participant

    thanks!

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

    when i get back i can look

    #4217

    dynamitemedia
    Participant

    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

    #4218

    dynamitemedia
    Participant

    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

    #4219

    alexg
    Keymaster

    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!

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.