How to present a list in WP that I currently generate in HTML

  • Resolved daSpud

    (@daspud)


    10 years, 7 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>
Viewing 12 replies - 1 through 12 (of 12 total)
  • vtxyzzy

    (@vtxyzzy)

    10 years, 7 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.

    Thread Starter daSpud

    (@daspud)

    10 years, 7 months ago

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

    vtxyzzy

    (@vtxyzzy)

    10 years, 7 months ago

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

    Thread Starter daSpud

    (@daspud)

    10 years, 7 months ago

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

    vtxyzzy

    (@vtxyzzy)

    10 years, 7 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.

    Thread Starter daSpud

    (@daspud)

    10 years, 7 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….

    Thread Starter daSpud

    (@daspud)

    10 years, 7 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?

    vtxyzzy

    (@vtxyzzy)

    10 years, 7 months ago

    This article might help: http://www.w3schools.com/tags/att_td_width.asp

    Thread Starter daSpud

    (@daspud)

    10 years, 7 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>
    Thread Starter daSpud

    (@daspud)

    10 years, 7 months ago

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

    vtxyzzy

    (@vtxyzzy)

    10 years, 7 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.

    Thread Starter daSpud

    (@daspud)

    10 years, 7 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!

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘How to present a list in WP that I currently generate in HTML’ is closed to new replies.

Tags