This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

pagebuilder and tables

Resolved 10 replies plugin plugin-page-builder premium

Jose Victor Villarreal

11 years ago · Last reply by Andrew Misplon 11 years ago

hi, whenever i try to make tables using the text widget on pagebuilder it overrides all of my settings and instead of making a table with borders and centered text i get a borderless table with left-aligned text

please help

URL: http://www.suprasolar.mx/productos/accesorios

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

Andrew Misplon Staff 11 years, 5 months ago
Hi Jose
Thanks for running Page Builder. Can you perhaps describe the table you want verbally and I’ll write the CSS to assist with this task.
Jose Victor Villarreal 11 years, 5 months ago
Hi andrew, yes, basically i just want the borders to show, to change the color of the font and the content to be centered.

Jose Victor Villarreal 11 years, 5 months ago

this is my current table

<table border="2" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td colspan="6" align="center" bgcolor="#68af26">EQUIVALENCIA</td>
</tr>
<tr>
<td align="center" bgcolor="#68af26">LUMINARIA</td>
<td align="center" bgcolor="#68af26">ALTURA</td>
<td align="center" bgcolor="#68af26">HM</td>
<td align="center" bgcolor="#68af26">HPS</td>
<td align="center" bgcolor="#68af26">POTENCIA</td>
<td align="center" bgcolor="#68af26">FLUJO LUMINOSO DE LAMPARA</td>
</tr>
<tr>
<td align="center">30W</td>
<td align="center">5-7 m</td>
<td align="center">70W</td>
<td align="center">39W</td>
<td align="center">35W</td>
<td align="center">2,700 lm</td>
</tr>
<tr>
<td align="center">40W</td>
<td align="center">5-7 m</td>
<td align="center">100W</td>
<td align="center">70W</td>
<td align="center">45W</td>
<td align="center">3,600 lm</td>
</tr>
<tr>
<td align="center">60W</td>
<td align="center">5-7 m</td>
<td align="center">175W</td>
<td align="center">100W</td>
<td align="center">95W</td>
<td align="center">5,400 lm</td>
</tr>
<tr>
<td align="center">80W</td>
<td align="center">7-9 m</td>
<td align="center">250W</td>
<td align="center">150W</td>
<td align="center">135W</td>
<td align="center">7,200 lm</td>
</tr>
<tr>
<td align="center">100W</td>
<td align="center">7-9 m</td>
<td align="center">250W-400W</td>
<td align="center">150W - 250W</td>
<td align="center">145W</td>
<td align="center">9,000 lm</td>
</tr>
<tr>
<td align="center">120W</td>
<td align="center">7-9 m</td>
<td align="center">400W</td>
<td align="center">250W</td>
<td align="center">195W</td>
<td align="center">9,600 lm</td>
</tr>
<tr>
<td align="center">150W</td>
<td align="center">7-9 m</td>
<td align="center">-</td>
<td align="center">400W</td>
<td align="center">195W</td>
<td align="center">12,000 lm</td>
</tr>
</tbody>
</table>

Andrew Misplon Staff 11 years, 5 months ago

Give this a try. First, some slightly simplified HTML:

<table>
<tbody>
<tr>
<td colspan="6">EQUIVALENCIA</td>
</tr>
<tr>
<td>LUMINARIA</td>
<td>ALTURA</td>
<td>HM</td>
<td>HPS</td>
<td>POTENCIA</td>
<td>FLUJO LUMINOSO DE LAMPARA</td>
</tr>
<tr>
<td>30W</td>
<td>5-7 m</td>
<td>70W</td>
<td>39W</td>
<td>35W</td>
<td>2,700 lm</td>
</tr>
<tr>
<td>40W</td>
<td>5-7 m</td>
<td>100W</td>
<td>70W</td>
<td>45W</td>
<td>3,600 lm</td>
</tr>
<tr>
<td>60W</td>
<td>5-7 m</td>
<td>175W</td>
<td>100W</td>
<td>95W</td>
<td>5,400 lm</td>
</tr>
<tr>
<td>80W</td>
<td>7-9 m</td>
<td>250W</td>
<td>150W</td>
<td>135W</td>
<td>7,200 lm</td>
</tr>
<tr>
<td>100W</td>
<td>7-9 m</td>
<td>250W-400W</td>
<td>150W - 250W</td>
<td>145W</td>
<td>9,000 lm</td>
</tr>
<tr>
<td>120W</td>
<td>7-9 m</td>
<td>400W</td>
<td>250W</td>
<td>195W</td>
<td>9,600 lm</td>
</tr>
<tr>
<td>150W</td>
<td>7-9 m</td>
<td>-</td>
<td>400W</td>
<td>195W</td>
<td>12,000 lm</td>
</tr>
</tbody>
</table>

Next insert the below into Appearance > Custom CSS and edit as required. Looks good on my side:

.entry-content table {
border: 1px solid #ededed;
border-collapse: collapse;
border-spacing: 0;
font-size: 14px;
line-height: 2;
margin: 0 0 20px;
width: 100%;
}

.entry-content table td {
border: 1px solid #ededed;
padding: 0.5em;
}

.entry-content table tr:first-of-type td {
background: #68af26;
color: #fff;
font-weight: bold;
}

.entry-content table tr:nth-child(2) td {
background: #68af26;
border: none;
color: #fff;
font-weight: bold;
}

Jose Victor Villarreal 11 years, 5 months ago
Hi andrew,
it kinda half worked. i can see the border lines now, and the text color is exactly as i wanted, but it still wont center the text. also if i try to change the border size or the border color it doesn’t do anything
Jose Victor Villarreal 11 years, 5 months ago
http://www.suprasolar.mx/productos/accesorios
Jose Victor Villarreal 11 years, 5 months ago
ok, i went to the theme css and changed
from this
```
caption,th,td{
font-weight:normal;
text-align:left;
}
```
from this
```
caption,th,td{
font-weight:normal;
text-align:center;
}
```
and it seems to be working now

Andrew Misplon Staff 11 years, 5 months ago

Ahh my bad, I forgot to center the text.

Changes made to style.css won’t survive theme upgrade which is why you need to place your additions under Appearance > Custom CSS. So your complete Custom CSS should be:

.entry-content table {
border: 1px solid #ededed;
border-collapse: collapse;
border-spacing: 0;
font-size: 14px;
line-height: 2;
margin: 0 0 20px;
width: 100%;
}

.entry-content table td {
border: 1px solid #ededed;
padding: 0.5em;
text-align: center;
}

.entry-content table tr:first-of-type td {
background: #68af26;
color: #fff;
font-weight: bold;
}

.entry-content table tr:nth-child(2) td {
background: #68af26;
border: none;
color: #fff;
font-weight: bold;
}

Jose Victor Villarreal 11 years, 5 months ago
got it, so all changes must be made to the custom css.
the new code work thanks a lot.
now one last question. what if i want another type of table,
can i create a class?
Andrew Misplon Staff 11 years, 5 months ago
Yes, all code CSS inserted under Appearance > Custom CSS. This will apply to all your tables. All I’ve done with the last two selectors is say, the first row, make that bold, green bg and white text and do the same for the second row but with no border.

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread