Affiliate Plugin Shortcodes / Layout

I've installed the Affliate program plugin, but for some reason the layout is showing funny. If you look at the attached file, you can see what the tutorial shows - the layout as it should be - and then as it currently is (squashed/out of line and without borders around the boxes).
I've used the shortcodes as per the instructions on the tutorial, but I can't find how or where to fix it so it looks professional as it does is the tutorial.
Any help would be appreciated :slight_smile:

  • Sajid

    Hi @Pam

    Hope you are doing good today :slight_smile:

    The layout depends upon your current theme. The screenshot in usage guide were taken from default WordPress theme. Have you tried switching to default WP theme like TwentyFifteen ?

    Also can you please post the exact page link where I can see the issue and give you code to make look like demo by inspecting the deb tool.

    Take care and have a nice day :slight_smile:

    Cheers, Sajid

  • Pam

    Hi Sajid and thanks for the quick reply.
    The exact link is test.p6solutions.co.nz/drgerald/affiliates - you can login with the user information t***/s*** so you can see the page that is laid out horribly.
    I see your point in regards to the default theme - I'm a WP newbie so apologies if I sound like an idiot. I'm using the WPMU Dev theme Spirit, but it won't let me make adjustments with the Upfront editor. I assume there's somewhere I can change the code or put a custom rule but I can't fined where :slight_frown:
    Thanks :slight_smile:

  • Nastia

    Hello @Pam, I trust you are well today!

    I have edited your post and hid your credentials. Please don't share any private information (passwords, API keys, etc.) here, support staff will ask for these via email if they are required.

    Please paste the following into the CSS editor:

    #visitstable table th, td {
        padding: 0.4em;
        border: 1px solid rgba(51, 51, 51, 0.1);
        text-align: left;
        }
    #visitstable table{
        margin-bottom: 1.6842em;
        border-collapse: separate;
        border-spacing: 0;
        border-width: 1px 0 0 1px;
        margin: 0 0 1.6em;
    	table-layout: fixed;
    	width: 100%;
        }
    
    #visitstable  caption, th, td {
        font-weight: normal;
        text-align: left;
        }
    
    #visitstable table th {
    font-weight: 700;
    border-width: 0 1px 1px 0;}
    
    #visitstable table tr, td {
        border-top: 1px solid #0c53f8;
        border-bottom: 1px solid #0c53f8;}
    
    #clickstable table.widefat tfoot tr {
        background-color: #78acfa;
        color: #000;
        text-align: left;
    }
    
    #visitstable table thead {
        font-weight: bold !important;
        font-size: larger;
        }
    
     #affiliateuserdetails table th {
        border: none;
        vertical-align: top;
        font-weight: 500;
     }

    If you don't have CSS editor, please use Simple Custom CSS plugin:
    https://wordpress.org/plugins/simple-custom-css/

    I hope this helps!

    Cheers,
    Nastia

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.