Modifying pricing table

• mthant

  said

  I am in need of help in modifying the table pricing. I am modifying the pricing table to create topic modules. I have some problems in doing that.
  For example…
  1. I am not able to create equal height for each column module (I cheat by placing
  to make them look equal but then I found that it make them unresponsive
  2. I tried to create margin between each column and it did not work
  3. Change background and text color for column title and it did not work
  4. Change background color of each column. Instead it changed the table background
  5. Is it also possible to make each module as link instead of using buttons?
  Thanks if you can help me out.
  Myo
  Here is the code I wrote;

  <div style="height:25%;margin:10px;color:#327695;background:#c7e4f5; th{color:red;}">
  [pricing_table columns="2"]
    [pricing_column title="CTCAE"]
   
        <ul>
      <li>Complete National Cancer Institute's Common Terminology Criteria for Adverse Events 4.03 is available for quick reference </li>
      <li>[button_link url=""]Select[/button_link]</li>
        </ul>
    [/pricing_column]
    [pricing_column title="Treatment Protocols"]
        <ul>
       <li>More than 700 up to date protocols are available for quick reference.<br/>Protocols are updated monthly</li>
    <li>[button_link url=""]Select[/button_link]</li>
        </ul>
    [/pricing_column]
       [pricing_column title="Dose Modification"]
               <ul>
      <li>Dose modification module allows you to modify drug dose in patients with hepatic or renal impairment.</li>
      <li>[button_link url=""]Select[/button_link]</li>
        </ul>
    [/pricing_column]
    [pricing_column title="Journal Abstracts"]
        <ul>
       <li>Read current abstracts of more than 27 oncology journals</li>
                  <li><br/></li>
      <li>[button_link url=""]Select[/button_link]</li>
        </ul>
    [/pricing_column]
  [/pricing_table]
  </div>
  

• jeffw

  said

  First, and this is very important, to include code in your posts such as shortcodes, HTML, CSS, JavaScript, PHP → please follow the instructions on the forum home page.

  If you don’t do that then your code goes through the WordPress filters that changes things like hyphens into dashes and quotes into curly (smart) quotes. And that causes huge problems when copying and pasting code.

  So please follow the instructions on the forum home page if you want to include code in your posts.

  Thanks.

  (I have edited your post so that the code is enclosed in the appropriate tags.)

  Now to your questions…

  1.

  You’ll need to make sure that you include similar amounts of text in each column. The columns will always automatically resize so that they are just tall enough to enclose the content.

  2. There is no margin between columns but you could probably separate the columns with some custom CSS like this…

  .two-column-table .price-column { width: 48%; }
  .two-column-table .price-column.even-column { margin-left: 4% }

  3.

  Again, there are no shortcode options to change the background colour and text colour, but you could do that with some custom CSS. For example…

  .price-column .column-title {
    background-color: MistyRose;
    color: DeepPink
  }

  4.

  Once again, there are no shortcode options to change the background colour of each column, but you could do that with some custom CSS. For example…

  .price-column { background: Red }
  .price-column.first-column{ background: Green }
  .price-column.even-column  { background: Blue }
  .price-column.last-column  { background: Yellow }

  5.

  Yes, you can include a link instead of a button. Just remove the button shortcode from the content and add the appropriate HTML for a link instead.

  Lastly, please try to remember that we are here to answer questions about the theme. not to write custom CSS and HTML for you. Thanks.

• mthant

  said

  Jeff
  Thank you very much for your help. It worked. I always get confused how to integrate CSS with shorcodes.