Four Helpful HTML Tips in Sitefinity

Sitefinity offers a user-friendly approach to editing content blocks on a page. If you have worked within "Pages" in the back end of Sitefinity, you probably often utilize the WYSIWYG (short for 'what you see is what you get'). For clarification, you can access the WYSIWYG by selecting “Edit” in the top right-hand corner of the content block. 

Once you are in the WYSIWYG, you will see the "Design" and "HTML" sections. Typically, most of the time you can achieve what you want by working in “Design,” however, sometimes if you have more specific formatting requests you will need to switch over from “Design” and work in the HTML. For anyone who is not familiar with code, this can be confusing, so here are four helpful tips for working with HTML in Sitefinity:  

1. Make images fit to any screen

You have added an image to the content block, but the image stretches out past the text when you view it on a smaller screen. To fix this, add the following line of code directly into the image’s HTML.

style="max-width: 100%; margin: auto; display: block;"

You will want to locate the image in the HTML, which will look something like this:

<img src="/images/default-source/default-album/sunflowers-1322185.jpg?sfvrsn=e03acf03_0" data-displaymode="Original" alt="sunflowers" title="sunflowers" sfref="[images|OpenAccessDataProvider]1fcbaafa-09f1-652e-9770-ff0000d525d7" />

What will give it away is the <img src= followed by a link to the image. You will want to put the line of code directly after that first link’s closing quotation mark. That will look something like this: 

Once you have done that, click “Save” and your image will be sized for most device screens. 

2. Add or remove a line break on a page

When in “Design,” all you have to do to add a line break is hit “Enter/Return.” But sometimes, the formatting can get disheveled and you would like to manually add or remove these line breaks. To add a line break, all you need to include is the HTML element <br> to move to the next line. You can have multiple <br> elements next to each other to represent the amount of line breaks you choose.

In my example below, I have added a line break right after the end of the paragraph, and three line breaks between the text and the image. Your code will look like this: 

3. Add a strikethrough in your text

You may have noticed that Sitefinity does not offer strikethrough as a formatting option in the WYSIWYG. That’s OK! You can easily add it into the HTML. To add a strike through to text, you will be using the <s> or <del> element. However, some older sites that do not use HTML 5 (the latest version of HTML) will use <strike>.You will need to wrap this element around the text that you would like to strike out. It is going to look something like this:

<s> Here is the text I want to strike out. </s> 

OR

<del> Here is the text I want to strike out. </del> 

This will strike out the text inside these tags, and when you flip back over from “HTML” to “Design” you will notice the text includes the strikethrough. 

4. List items

Bulleted and numbered lists are included in the out-of-the-box formatting options within the content block. You might run into some formatting issues when implementing these, as the formatting options are quite finnicky. To save yourself the frustration, you can easily learn how to add bullets and numbers to lists in HTML.

Bullet points are called “unordered lists.” The HTML element for an unordered list is <ul> with the closing tag </ul>.

Numbered lists are called “ordered lists.” The HTML element for an ordered list is <ol> with the closing tag </ol>.

You are going to wrap these around the entire list. Each item on the list will have the list tags wrapped around it, which are <li> and </li>.

Here is what each list will look like:

HTML may seem intimidating, but it is actually fairly simple. If you have any questions about HTML or editing content in Sitefinity content blocks, reach out to your Vanguard Client Manager!