Applying CSS classes in Content Blocks

Return to top
Have more questions? Submit a request

2 Comments

  • Angéline Nguyen

    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 &amp; Derivatives Application</summary>
    <ol>
    <li>
    Log in to your Fairways Debt account, e.g.&nbsp;<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>&nbsp;&gt;
    <span class="click">Debt &amp; Derivatives</span>.
    </li>
    </ol>
    <p>&nbsp;</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.

    0
  • Katarzyna Karpinska
    Zendesk Product Manager

    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.

    0

Please sign in to leave a comment.

Powered by Zendesk