Home Forums Weaver Xtreme Theme Need to create a payment chart of multiple columns

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #18032

    I need to create a payment plan which is like a mini spreadsheet with 3 columns and several rows. I need to be able to show the gridlines, define the widths of the columns (they will be equal but not use the whole page) and change the background color.

    I have played with the div and .content-3-col to create the columns but do not know who to add the gridlines, color, width, etc… I do not have Weaver plus.

    You will see the section Adult Membership Monthly Fees. I need the columns to be Age, First Member, Secondary Member to only be as big as the box with Adult Membership Fees.

    A table might be the solution. Although not responsive, tables are good for tabular info. I use Tablepress:  https://wordpress.org/plugins/tablepress/


    I agree that ultimately when you need a tabular data set you need a table. Just make sure you use responsive settings like % width.

    You do need to check if the 3 columns will fit all the way down to a cell phone screen, because if they don’t fit side by side on a phone size screen, you then need to decide what happens there.

    That being said, the way to create and style a 3 column with divs and the content-3-col if they should always be 3 columns (instead of becoming 2 on mobile) is below.

    The HTML would look like

    <div class=”content-3-col row1″>First column content</div>
    <div class=”content-3-col row1″>Second column content</div>
    <div class=”content-3-col row1″>Third column content</div>
    <div class=”content-3-col row2″>First column content</div>
    <div class=”content-3-col row2″>Second column content</div>
    <div class=”content-3-col row2″>Third column content</div>
    <div class=”content-3-col row3″>First column content</div>
    <div class=”content-3-col row3″>Second column content</div>
    <div class=”content-3-col row3″>Third column content</div>
    <div style=”clear:both;”></div>

    and the custom CSS

    [class*=row] {border:1px solid black;}  /*Styling common to all rows*/
    .row1 {background-color:green;}
    .row2 {background-color:grey;}
    .row3 {background-color:blue;}
    /*rules below to undo 2 col on mobile*/
    .is-mobile :nth-of-type(2n+1).content-3-col {clear:none !important;}
    .is-mobile :nth-of-type(3n+1).content-3-col {clear:left !important;}
    .is-mobile .content-3-col {width:33.3%;}


    Thanks. I will check out the table option, but if I use the above div, where do I put the custom css?


    CUstom CSS goes in Main Options > Fonts & Custom > Custom CSS Rule box

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.