WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] How to present a list in WP that I currently generate in HTML (13 posts)

  1. daSpud
    Member
    Posted 10 months ago #

    I currently display a list of items on our HTML based website. We are moving to a WP based site and I would like to do the same thing. I generate the code for each list item from a program so it is easy to change, but I need to know WHAT to change it to.

    Here is the HTML for 2 lines with alternating colors. I am not an HTML or CSS or PHP or any other alphabet soup wizard. Someone else came up with this and they are now gone (hence the move to WP). Thanks in advance for the help.

    <TABLE ALIGN="center" BORDER=1>
    
    <TR BGCOLOR="#FFFFFF">
    <TD ALIGN=center>
    <INPUT TYPE=checkbox NAME=item1A VALUE="1-Item&nbsp;1:&nbsp;&nbsp;Bulk&nbsp;D&nbsp;&nbsp;Barley,Organic,Pearled,&nbsp;&nbsp;(25lb)*29.75$&nbsp;20%"></TD>
    <TD ALIGN=center>1</TD>
    <TD>Item 1:   Bulk D  Barley,Organic,Pearled,  (25lb) </TD>
    <TD ALIGN=right>$29.75</TD>
    <TD ALIGN=right>20%</TD><TD ALIGN=center>1</TD></TR>
    <TR BGCOLOR="#AAAAFF">
    <TD ALIGN=center>
    <INPUT TYPE=checkbox NAME=item2A VALUE="2-Item&nbsp;2:&nbsp;&nbsp;Bulk&nbsp;H&nbsp;&nbsp;Organic&nbsp;Garbonzo&nbsp;Beans&nbsp;(25lb)*59.75$&nbsp;18%"></TD>
    <TD ALIGN=center>2</TD>
    <TD>Item 2:   Bulk H  Organic Garbonzo Beans (25lb) </TD>
    <TD ALIGN=right>$59.75</TD>
    <TD ALIGN=right>18%</TD><TD ALIGN=center>1</TD></TR>
  2. vtxyzzy
    Member
    Posted 10 months ago #

    If you create a Page or Post in WP and switch to the 'Text' mode (as opposed to 'Visual'), then paste in the HTML, it should work.

  3. daSpud
    Member
    Posted 10 months ago #

    That was what I thought might happen, but it very nicely reproduced the pasted text and not the desired list.

  4. vtxyzzy
    Member
    Posted 10 months ago #

    Are you sure that you switched from 'Visual' mode to 'Text' mode before you pasted the HTML?

  5. daSpud
    Member
    Posted 10 months ago #

    Well I thought I had, but it appears that I did not. Your suggestion was spot on. Thank you very much.

  6. vtxyzzy
    Member
    Posted 10 months ago #

    If your problem has been solved, please use the dropdown on the right to mark this topic 'Resolved' so that anyone else with a similar question can see that there is a solution.

  7. daSpud
    Member
    Posted 10 months ago #

    Wow, the Visual display is close to what I want and when I preview it the columns got very much narrower.

    Strange how the visual and preview are SO far apart....

  8. daSpud
    Member
    Posted 10 months ago #

    I need to learn how to make a table.

    In the Visual the columns are sized pretty much proportionally to their content. In the Preview they are all the same size so the text becomes many lines to fit.

    I presume there is a way in HTML to specify something about the width of a column as a percent of the entire width?

  9. vtxyzzy
    Member
    Posted 10 months ago #

  10. daSpud
    Member
    Posted 10 months ago #

    There is a lot of good stuff there. Thanks!

    I used their CSS tryit and the table comes out exactly as I wanted it, but it doesn't happen that way with WP. I took the code from the WP page and pasted it there.

    <table border="1" align="center" Width="100%" CELLPADDING="2" CELLSPACING="2">
    <tbody>
    <tr bgcolor="#FFFFFF">
    <td width="5%" align="left"><input type="checkbox" name="item1A" value="1-Item 1:  Bulk D  Barley,Organic,Pearled,  (25lb)*29.75$ 20%" /></td>
    <td width="5%" align="left">1</td>
    <td width="60%" align="left">Item 1: Bulk D Barley,Organic,Pearled, (25lb)</td>
    <td width="10%" align="right">$29.75</td>
    <td width="10%" align="right">20%</td>
    <td width="10%" align="center">1</td>
    </tr>
    <tr bgcolor="#AAAAFF">
    <td align="left"><input type="checkbox" name="item2A" value="2-Item 2:  Bulk H  Organic Garbonzo Beans (25lb)*59.75$ 18%" /></td>
    <td align="left">2</td>
    <td>Item 2: Bulk H Organic Garbonzo Beans (25lb)</td>
    <td align="right">$59.75</td>
    <td align="right">18%</td>
    <td align="center">1</td>
    </tr>
    </tbody>
    </table>
  11. daSpud
    Member
    Posted 10 months ago #

    Here is the mystery page: http://stjfoodcoop.com/wp/shop/case-lots/

  12. vtxyzzy
    Member
    Posted 10 months ago #

    The problem is with the CSS in /wp/shop/case-lots. You can override this with CSS in style.css.

    You should create a Child theme to make your changes. If you do not, all of your changes will be lost if you update your theme.

    Try adding a class to your table (like class='case-table', and then add this to the end of your child theme's style.css:

    table.case-table td {
       padding: 10px 4px;
       line-height: 1em
    }

    You will also need to change the width of the text column to 60 and the width of the price column to 15 to allow for the cents.

  13. daSpud
    Member
    Posted 10 months ago #

    Thank you again for your help. It worked perfectly. To make room for the fields, I reduced the font size by adding font-size:12px; to the table class.

    Thanks!

Reply

You must log in to post.

About this Topic