---
title: Format your content on the legacy editor with some basic coding tricks
description: Learn how to add font colors, text sizes, anchor links and more on the legacy editor!
---

[![uConnect](https://s41911.pcdn.co/wp-content/uploads/logo.svg)](https://www.gouconnect.com/)

- [Knowledge Base](https://support.gouconnect.com/)
- [Career Everywhere](https://www.gouconnect.com/career-everywhere/)
- [Community](https://www.gouconnect.com/career-everywhere/community/access/)
- [Submit a Ticket](https://share.hsforms.com/10AUHU9-DRi-Bw3fdB-SUYA8bok)
- [Support Portal Login](https://support.gouconnect.com/_hcms/mem/login)

✕

## Submit a Ticket

Loading support form...

[Skip to content](https://support.gouconnect.com/articles/2331597-format-your-content-on-the-legacy-editor-with-some-basic-coding-tricks#main-content)

Open main navigation

Close main navigation

 What do you need help with today?

- There are no suggestions because the search field is empty.

1. [uConnect Knowledge Base](https://support.gouconnect.com/articles)
2. [Platform Design](https://support.gouconnect.com/articles/platform-design)

# Format your content on the legacy editor with some basic coding tricks

Formatting your content is a fun way to add flare and style to your platform. The trouble is, the wide expanse of information on HTML and CSS formatting that's available online is MORE than overwhelming, especially if you've never done it before. Below, we've broken down a few easy tricks to help you add some extra formatting to your text within the classic/legacy editor.

​

# Where the coding happens:

If your screen looks like the below when you're adding content to a blog post, custom page, resource, or Community static content, you're on the legacy/classic editor. Formatting your content can be done wherever you see this option:

![](https://support.gouconnect.com/hubfs/Knowledge%20Base%20Import/visual+vs_+text-1.png)

'**Visual**' is the default editor of any content you add. The '**Text**' version, is where the coding fun happens! This shows the back-end, HTML code that creates the visual presentation you see on the front-end. 

# The most important thing to note:

Any code you add must be **exactly right.** Forgetting even a comma or bracket can throw off an entire page. It's important to be detail oriented when adding any customizations here.

First, it's important to note that any styling you want to add, has to be done within quotations in the brackets surrounding your text: 'style="formatting-goes-here"\>text', or it won't apply to your text. For example, in the 'text' editor, if you'd like to edit a title, you might see: 

# This is a title!

​   
The 'h1' indicates that the text surrounded by the brackets follows the 'Header 1' formatting. 

# To add color:

If you want to add style to the formatting, you'd include something like this: 

# This is a title!

This tells the system that the text between the

# and

 will display in the color identified by the Hex code you included. (A hex code is a 6 number / letter combination that specifies a unique color in the color wheel. Here's a [link](https://htmlcolorcodes.com/color-picker/) where you can find the one you want to use! 

In addition to color, all kinds of attributes can be added within the **style=" "** section of your text, to further change your formatting. Just remember to keep it within the quotations! 

# Other formatting options:

- To center align your text: **style="text-align: center;" **
- To make your text all uppercase: **style="text-transform: uppercase;"**
- To add spacing between the characters of your text: **style="letter-spacing: 3px;"** (the higher the number you include here, the more spaced out your letters will be)
- To make your text larger: **style="font-size: 24px"** (you can replace with a different number, for different sizing)
- To add a horizontal line, add
  
  ---
  
   in its own line.

Remember, if not done correctly, adding any custom code can cause visible formatting issues on your front-end. Make sure to double check that your coding came out the way you want by previewing your pages before publishing! And as always, if you need help - feel free to reach out to us at [support@gouconnect.com](mailto:support@gouconnect.com). 😁

# Check out this tutorial video for a visual demonstration of how to create your own coded content:

<iframe allowfullscreen frameborder="0" mozallowfullscreen="" src="https://fast.wistia.net/embed/iframe/dhnhdkaojz" webkitallowfullscreen=""></iframe>

Use [this link](https://htmlcolorcodes.com/) to convert CMYK and RBG colors into hex codes.

If you notice that your screen looks different as you're editing a blog post, custom page, resource, or Community static content, you're likely on the latest version of the editor, called the block editor! You'll find an example of what this looks like below:

![](https://support.gouconnect.com/hubfs/Knowledge%20Base%20Import/Screen+Shot+2023-03-21+at+11_22_04+AM-1.png)

The key differences you may notice above are that there's no longer a text/visual tab, and you now have a blue plus sign in the top left as you're editing content on the block editor.

Through the block editor, you have the ability to add text color and other formatting options without having to code!

Instead, you can take advantage of sidebar options to change colors:

![](https://support.gouconnect.com/hubfs/Knowledge%20Base%20Import/Screen+Shot+2023-03-21+at+11_23_39+AM-1.png)

Or, for assistance in choosing a desired format for the text on your page, you can use the blue plus sign to scroll for 'blocks' or ways to format your content without needing to add any code:

![](https://support.gouconnect.com/hubfs/Knowledge%20Base%20Import/Screen+Shot+2023-03-21+at+11_24_49+AM-1.png)

For questions on the above, [please reach out to us](https://share.hsforms.com/10AUHU9-DRi-Bw3fdB-SUYA8bok?form_link_page=Format%20your%20content%20on%20the%20legacy%20editor%20with%20some%20basic%20coding%20tricks) and a team member would be happy to help!

- [Get Started](https://support.gouconnect.com/articles/get-started)
- [AI Search](https://support.gouconnect.com/articles/ai-search)
- [Analytics & Data](https://support.gouconnect.com/articles/analytics-data#main-content)

    - [Outcomes Data](https://support.gouconnect.com/articles/analytics-data#outcomes-data)
    - [Platform Analytics](https://support.gouconnect.com/articles/analytics-data#platform-analytics)
    - [Google Analytics](https://support.gouconnect.com/articles/analytics-data#google-analytics)
- [Publish Content](https://support.gouconnect.com/articles/publish-content)
- [Manage Your Communities & Content Categories](https://support.gouconnect.com/articles/manage-your-communities-content-categories#main-content)

    - [Communities](https://support.gouconnect.com/articles/manage-your-communities-content-categories#communities)
    - [Content Categories](https://support.gouconnect.com/articles/manage-your-communities-content-categories#content-categories)
- [Manage Subscribers & Users](https://support.gouconnect.com/articles/manage-subscribers-users)
- [Platform Design](https://support.gouconnect.com/articles/platform-design#main-content)

    - [Widgets](https://support.gouconnect.com/articles/platform-design#widgets)
    - [Block Editor (WordPress)](https://support.gouconnect.com/articles/platform-design#block-editor-wordpress)
    - [Menus](https://support.gouconnect.com/articles/platform-design#menus)
- [Accessibility Hub](https://support.gouconnect.com/articles/accessibility-hub#main-content)

    - [Block Editor](https://support.gouconnect.com/articles/accessibility-hub#block-editor)
- [Market Your Platform](https://support.gouconnect.com/articles/market-your-platform#main-content)

    - [Activation and Promotion Guides](https://support.gouconnect.com/articles/market-your-platform#activation-and-promotion-guides)
- [Modules & Integrations](https://support.gouconnect.com/articles/modules-integrations#main-content)

    - [Outcomes Data Visualization](https://support.gouconnect.com/articles/modules-integrations#outcomes-data-visualization)
- [Technical Configurations](https://support.gouconnect.com/articles/technical-configurations#main-content)

    - [Automated Subscriber Uploads (SIS)](https://support.gouconnect.com/articles/technical-configurations#automated-subscriber-uploads-sis)
- [Product Updates](https://support.gouconnect.com/articles/product-updates)
- [Customer Training Recordings](https://support.gouconnect.com/articles/customer-training-recordings)
- [Candid Career+](https://support.gouconnect.com/articles/candid-career)
- [General](https://support.gouconnect.com/articles/general)

  

[![uConnect Logo](https://s41911.pcdn.co/wp-content/uploads/logo-white.svg)](https://www.gouconnect.com/)

- [Customers](https://www.gouconnect.com/customers/)
- [Case Studies](https://www.gouconnect.com/customers/case-studies/)
- [Client Directory](https://www.gouconnect.com/customers/client-directory/)
- [Testimonials](https://www.gouconnect.com/customers/testimonials/)

- [Product](https://www.gouconnect.com/product/)
- [Use Cases](https://www.gouconnect.com/product/use-cases/)
- [Integrations](https://www.gouconnect.com/product/integrations/)
- [Become a Partner](https://www.gouconnect.com/company/partner/)

- [Company](https://www.gouconnect.com/company/)
- [Careers](https://www.gouconnect.com/company/careers/)
- [News](https://www.gouconnect.com/company/news/)
- [Status Page](https://status.gouconnect.com/)

- [Career Everywhere](https://www.gouconnect.com/career-everywhere/)
- [The Movement](https://www.gouconnect.com/career-everywhere/movement/)
- [Community](https://www.gouconnect.com/career-everywhere/community/access/)
- [Podcast](https://www.gouconnect.com/career-everywhere/podcast/)

© 2026 uConnect Inc.

<https://www.linkedin.com/company/uconnect-inc-> <https://x.com/gouconnect> <https://www.facebook.com/gouconnect/> <https://www.youtube.com/channel/UCVzqw0N04626cZGwaffVZNw> <https://www.instagram.com/gouconnect/>

[Accessibility Policy](https://www.gouconnect.com/accessibility-policy/) · [Privacy Policy](https://www.gouconnect.com/privacy-policy/)