Putting CSS code in the text editor

BB Theme
1

I am trying to create a fancy table in one of my pages, and I am trying to use some CSS code.
But when I paste it into the text editor, it removes all the things I have put between the style tags, such as font size, color, padding, etc., and only includes the code that starts and ends with a table tag. I am including an example below, that came from www.w3schools.com:


<html>
<head>
<style>
#customers {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    width: 100%;
    border-collapse: collapse;
}

#customers td, #customers th {
    font-size: 1em;
    border: 1px solid #98bf21;
    padding: 3px 7px 2px 7px;
}

#customers th {
    font-size: 1.1em;
    text-align: left;
    padding-top: 5px;
    padding-bottom: 4px;
    background-color: #A7C942;
    color: #ffffff;
}

#customers tr.alt td {
    color: #000000;
    background-color: #EAF2D3;
}
</style>
</head>
<body>

<table id="customers">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr class="alt">
    <td>Berglunds snabbköp</td>
    <td>Christina Berglund</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr class="alt">
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr class="alt">
    <td>Königlich Essen</td>
    <td>Philip Cramer</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr class="alt">
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
  <tr>
    <td>North/South</td>
    <td>Simon Crowther</td>
    <td>UK</td>
  </tr>
  <tr class="alt">
    <td>Paris spécialités</td>
    <td>Marie Bertrand</td>
    <td>France</td>
  </tr>
</table>

</body>
</html>

In the above example, what remains after I save it starts with <table id=“customers”>
and ends with </table>

2

Hey Douglas,

Ah, I see the issue here. I believe you are attempting to paste this into the visual tab of the text editor. Code like this should go in the text tab of the text editor or even better, an HTML module. I’ve tried both and they both work great so go with whatever is easiest for you! :slight_smile:

Best,
Billy

3

I used the text tab of the text editor.

Here is what it looks like when I paste it in:

code before

And here is what it looks like after I save it and open it up again:

code before

And finally, here is what it should look like:

code before

Instead, I get a table with no borders, no colors, and default font.

4

Hi Douglas,
Not sure that the html and head (and their closing tags) should be included.
Can you not put the CSS in the CSS code section of the customizer, then you just need to include the table section of your html ?
HTH, Dave

5

Thanks Dave.

Putting the CSS section into the CSS code section of the customizer did the trick!

YTH
Douglas