Custom HTML

Custom HTML

SledPlus only.

Sled provides a large variety of components that response to various kinds of requirements. Anyways, you could sometime meet a very special need that could require a specific development. That is why Sled offers a Custom HTML component. Here is how to use it.

1. The HTML

This is the more important step of the creation of your custom component. You will need a minimum of knowledge in HTML. 

Keep also in mind that Sled is based on the Foundation framework, so take a look at the Foundation documentation. You will have to respect the Foundation convention to get the best result and to keep the consistency with other components.


As an exemple, drop a Custom HTML component, open the property panel and go to the Configuration Tab.

In the HTML section, enter a new table markup : 


<table>
 <thead>
  <tr>
   <th width="200">Table Header</th>
   <th>Table Header</th>
   <th width="150">Table Header</th>
   <th width="150">Table Header</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>Content Goes Here</td>
   <td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
   <td>Content Goes Here</td>
   <td>Content Goes Here</td>
  </tr>
  <tr>
   <td>Content Goes Here</td>
   <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
   <td>Content Goes Here</td>
   <td>Content Goes Here</td>
  </tr>
  <tr>
   <td>Content Goes Here</td>
   <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
   <td>Content Goes Here</td>
   <td>Content Goes Here</td>
  </tr>
 </tbody>
</table>


See the result live. As you can see, the table directly inherits from the Foundation look and feel. 


2. The CSS

Juste above the HTML section you will find the CSS section.

Again, remember that you will onherit from the Foundation stylesheet, and you will have to customise you CSS a very specific cases.


Be aware of the fact that the CSS you add here could impact all your page. Add specific ID / class to the element you want to customize to avoid any interaction with ohter styles.


To avoid :

p {
  color: red;
}

To prefer :

p.myParagraph {
  color: red;
}

3. The files.

If you go to the tab « Files » you will be able to attach some files to the component (images or PDF). It does mean that the attached files will be published with the component, and that you are free to integrate them, either in the HTML or in the CSS. To do this, alway use the given path


4. The script.

You cannot add a dedicated script in the component property panel. Anyway, you can add a script to the page and you can target your component using a specific ID on your HTML markup.