You can customize and style a block of text in a Content Block by applying a CSS class from the Editor toolbar. Applying CSS classes to content blocks makes it easier to use them for disclaimers, special notes, and other call-outs that visually pop out from other content.
To apply CSS to a block of text in a content block
- In Guide, click the Manage articles icon (
) in the sidebar.
- In All articles, open the article you want to add a Content Block to or edit a Content Block for.
- Next, create a Content Block or edit a Content Block.
- Select the text in the Content Block that you want to style and click the CSS
icon or use the shortcut CTRL + . or CMD + .
The system detects the element that you want to apply the class to and wraps it in a <div>.
- In the Apply CSS class dialog, type the name of the class/es that you
want to apply.
If you want to use multiple classes, separate them with a <space>.
- Click Apply CSS class, Create or Update all articles.
- Preview or publish the article.
After you have applied a CSS class to text, it is visible as a CSS styled block in the article editor. If you click in the CSS class block, you can edit or remove the applied CSS class and change the text within that block.
The following shortcuts are also helpful to know:
- To add another line - ENTER
- To get out of the block - SHIFT + ENTER
- To get out of the CSS block - Click Cancel
2 Comments
Hi Zendesk, thank you for taking into account your users' feedback! This feature does resolve some of the limited formatting options I talked about in the EAP feedbacks.
However, I was wondering if instead of developing each feature one by one, it'd be easier to have the ability to create a content block with a source code? Once we can add a source code, we can content block everything: tables, colors, lists, etc.
For example, I have this source code:
<p class="alert">Note: Fields marked with an asterisk<span class="wysiwyg-color-red120">*</span> are mandatory.</p>
With the CSS class feature, I can apply my alert class to that text block. However, as mentioned, I still can't apply another class inside the block, here some color for my asterisk *.
Another example is the following block. We can content block lists but not apply the CSS to a few words or add images inside the block yet. Also, as you can see, we have extra tags (details, summary) to create an accordion style. When adding a content block to an article, the content block doesn't show in the source code. I tried to find a workaround -having the list as the content block and wrapping that block in the source code with my <details> tags-, but the content block doesn't show in the source code.
For the context, we copy/paste this block in a lot of articles, it's a very common navigation step. You can see the accordion in this article.
<details>
<summary class="fairways">Navigate to the Debt & Derivatives Application</summary>
<ol>
<li>
Log in to your Fairways Debt account, e.g. <a href="https://login.financeactive.com/login" target="_blank" rel="noopener">https://login.financeactive.eu/</a>.
</li>
<li>Select a customer account.</li>
<li>
Navigate to
<span class="click">Applications <img class="icon" src="/hc/article_attachments/360012355777/Applications.png" alt="Applications.png"></span> >
<span class="click">Debt & Derivatives</span>.
</li>
</ol>
<p> </p>
</details>
Finally, tables, you can see how it looks in this article.
<table>
<tbody>
<tr>
<th>
<p>Holiday</p>
</th>
<th>
<p>Date</p>
</th>
</tr>
<tr>
<td>
<p>
<span class="wysiwyg-color-black20">1918 Armistice Day</span>
</p>
</td>
<td>
<p>
<span class="wysiwyg-color-black20">Wednesday 11 November 2020</span>
</p>
</td>
</tr>
<tr>
<td>
<p>Christmas Day</p>
</td>
<td>
<p>Friday 25 December 2020</p>
</td>
</tr>
</tbody>
</table>
Again, I think we're heading in the right direction! But if we can content block source codes, I think it'll resolve most style requests.
Angéline Nguyen Thanks so much for providing this detailed feedback. And I'm happy to hear that this feature is covering your basic cases - this is what it was designed for.
For better control over styling and fancier formatting options, we'll be looking into introducing a pure HTML editor but it's a bigger piece of work and will take us some time. Therefore we've decided to introduce this less robust option quicker to help address at least some of the styling concerns.
Please sign in to leave a comment.