Using the NI Community

Showing results for 
Search instead for 
Did you mean: 
Reply

HTML Templates for User Groups

Highlighted

HTML Templates for User Groups

[ Edited ]

As a GroupAdmin, you are able to add content to your group overview page using the custom component provided. You can insert plain text, or if you would like a more stylized look you can use HTML.

Below you will find some common HTML that you can use to get the look you desire. We've also provided some text styling that you can copy and paste as you see fit to make your own template.

If you would like to achieve a look like in the example group here, you can use the template attached by copying and pasting the HTML into the component on your group overview page, then replacing the placeholder text with your own.

 

Please remember: if you do use HTML, do not copy/paste from a program such as Word. Doing so may insert HTML that you are unaware of and could cause styling or performance issues on the page. It is best to use a program such as Notepad or Notepad++ when editing HTML.

 

Common HTML:

<b>bold</b>
<i>italics</i>
<img src="URL"> to display an image
<a href="URL">Link text here</a> to hyperlink text
<ul> to start a list
<li>item one</li>
<li>item two</li>
</ul> end list
<hr> insert a horizontal line

 

One Column with One Header:

onecolumnblock.png

 

 <!--One title with one Column-->
 <h3 style="color:#0e385f" align="center"><b>Section Title Here</b></h3>
 <hr>
  <p style="margin-left: 10px">Description text. Description text. Description text. Description text. 
Description text. Description text. Description text. Description text. Description text. Description text.
Description text. Description text.Description text. Description text. Description text. Description text.
Description text. Description text.</p>

 

Two Columns with Two Headers:

 

TWOCOLUMNS.png

 

<!--Two Columns-->
<table width="100%" align="center"><tbody>
  <tr>
    <th><h3 width="45%" style="color:#0e385f" align="center"><b>Column One Title</b></h3><hr></th>
    <th width="10%"></th>
    <th><h3 width="45%" style="color:#0e385f" align="center"><b>Column Two Title</b></h3><hr></th>
  </tr>
  <tr>
    <td width="45%" valign="top">
      <p style="margin-left: 10px">
        Column one description text. Column one description text. Column one description text.
      </p>
    </td>
 <td width="10%"></td>
    <td width="45%" valign="top">
      <p style="margin-left: 10px">
        Column two description text. Column two description text. Column two description text.
      <br><br>
      </p>
    </td>
  </tr>
</tbody></table>

Two Columns with One Title:

 

oneheadertwocolumns.png

 

<!--One title with two Columns-->
<h3 style="color:#0e385f" align="center"><b>Section Title Here</b></h3>
<hr>
<table width="100%" align="center"><tbody>
  <tr>
    <td width="45%" valign="top">
      <p style="margin-left: 20px">
        Column one description text. Column one description text. Column one description text. Column one description text.
      </p>
    </td>
    <td width="10%"></td>
    <td width="45%" valign="top">
      <p style="margin-left: 20px">
        Column two description text. Column two description text. Column two description text.
      </p>
    </td>
  </tr>
</tbody></table>

One Column List with Title:

onecolumnlist.png

<!--One title with one Column list-->
<h3 style="color:#0e385f" align="center"><b>Section Title Here</b></h3>
<hr>
 <h4 style="margin-left: 10px"><b>Bold text</b></h4>
 <p style="margin-left: 20px">Description text. Description text. Description text. Description text. 
Description text. Description text.</p><br> <h4 style="margin-left: 10px"><b>Bold text</b></h4> <p style="margin-left: 20px">Description text. Description text. Description text. Description text.
Description text. Description text.</p><br> <h4 style="margin-left: 10px"><b>Bold text</b></h4> <p style="margin-left: 20px">Description text. Description text. Description text. Description text.
Description text. Description text.</p>

 

0 Kudos
Message 1 of 1 (690 Views)
0 Kudos