How to add a default CSS class for one kind of elements in Hugo?

Question

I'm modifying a theme I found for Hugo and I wondered how I can add a css class to the tables in the HTML code generated. I want to use a css framework and I would like if the tables haveclass="u-full-width", I know I can edit the css codes but I think there must be a clever way.

Somthing that automatically add the class attributes to every tables in the HTML generated code.

Do you need to add `class="u-full-width"` to tables generated by users in the .md files, or just to tables generated by the theme itself? Also, what's the theme that you're modifying? — Jack Taylor, Jul 30 '17 at 23:27
I understand you need shortcodes : https://zwbetz.com/style-a-markdown-table-with-bootstrap-classes-in-hugo/ — djibe, Apr 25 '20 at 08:18

score 1 · Answer 1 · answered Aug 03 '17 at 10:36

After doing a little digging, I assume you're using the SKELETON CSS Framework?

I think your best option here is to wrap your tables with vanilla markup, and add a single line of CSS:

<div class="u-full-width">
| Tables        | Are           | Cool  |
| ------------- |:-------------:| -----:|
| col 3 is      | right-aligned | $1600 |
| col 2 is      | centered      |   $12 |
| zebra stripes | are neat      |    $1 |
</div>

... with your CSS like so:

div.u-full-width > table {
  width: 100%;
  box-sizing: border-box;
}

... or alternatively, you can inherit the styles from SKELETON:

div.u-full-width > table {
  width: inherit;
  box-sizing: inherit;
}

M0ns1f · Answer 2 · 2017-07-30T15:15:03.867

0

You can do that with javascript you can simply use var tables = document.getElementsByTagName("table") as your selector.

Then add the class using for

here is the code

window.onload = function() {
    var tables = document.getElementsByTagName("table"),
        len = tables !== null ? tables.length : 0,
        i = 0;
    for(i; i < len; i++) {
        tables[i].className += " u-full-width"; 
    }
}
function addclass(){
    var tables = document.getElementsByTagName("table"),
        len = tables !== null ? tables.length : 0,
        i = 0;
    for(i; i < len; i++) {
        tables[i].className += " u-not-full-width"; 
    }
}

table {
border:1px solid #000;
width:100%;
height:300px;
}
td {
border:1px solid red;
}
.u-full-width{
background-color:blue;
}
.u-not-full-width{
background-color:green !important;
}

<button onclick="addclass();">Add class to all tables</button>
<table>
 <tbody>
  <tr>
   <td> </td>
   <td> </td>
   <td> </td>
  </tr>
  <tr>
   <td> </td>
   <td> </td>
   <td> </td>
  </tr>
  <tr>
   <td> </td>
   <td> </td>
   <td> </td>
  </tr>
 </tbody>
</table>
<table >
 <tbody>
  <tr>
   <td> </td>
   <td> </td>
   <td> </td>
  </tr>
  <tr>
   <td> </td>
   <td> </td>
   <td> </td>
  </tr>
  <tr>
   <td> </td>
   <td> </td>
   <td> </td>
  </tr>
 </tbody>
</table>
<table >
 <tbody>
  <tr>
   <td> </td>
   <td> </td>
   <td> </td>
  </tr>
  <tr>
   <td> </td>
   <td> </td>
   <td> </td>
  </tr>
  <tr>
   <td> </td>
   <td> </td>
   <td> </td>
  </tr>
 </tbody>
</table>

Yes you can

edited Jul 30 '17 at 15:15

answered Jul 30 '17 at 14:19

M0ns1f

2,705
3
15
25

I would like to not use javascript, is it possible? – Andrea Ciceri Jul 30 '17 at 14:21
yes you can try the code above, and give me an upvote and mark it as answred please :) – M0ns1f Jul 30 '17 at 14:33
I really appreciate your effort (I'll upvote your answer) but this is not what I mean, I know that using javascript I can do that but I want to change the html generated by Hugo. – Andrea Ciceri Jul 30 '17 at 14:50
you can make an author but my answer is what you asked for. you want to add a class automaticly to all table generated by Hugo ^^ – M0ns1f Jul 30 '17 at 15:00
Market as resolved then i would help you in your next question, do it for the community – M0ns1f Jul 30 '17 at 15:03
"I wondered how I can add a css class to the tables **in the HTML code generated**" I'm not an english native speaker but I think I've been clear; correct your answer and I'll be happy to mark it as resolved – Andrea Ciceri Jul 30 '17 at 15:07
if you added this script anywhere in your code, in the footer if you would like, then all the **tabels in the HTML code generated** would have that class, i guarantee it :) – M0ns1f Jul 30 '17 at 15:09
There i added a button to do that – M0ns1f Jul 30 '17 at 15:15

How to add a default CSS class for one kind of elements in Hugo?

2 Answers2