General Content - Tshwane Interim
Add general text content to the page.
Content Type Details
- ID: 95
- Name: General Content - Tshwane Interim
- Minimum user level: Contributor
- Compatible with page layouts: Homepage, Landing Page, Inner Page: Full Width, Inner Page: Left Navigation
Add WYSIWYG content to a page including text, links, buttons, lists, tables and inline images.
Optional Elements
- Heading - Will show styled heading text above the Main body
- Sub Heading - Will show styled sub heading text above the Main body, below the Heading
Required Elements
- Main body - Examples of what can be added are shown below
WSYIWYG areas across many content types use the TinyMCE editor, find out more about using TinyMCE in the T4 documentation.
Copy and Paste
When pasting in content from another web page or document (e.g., Word document or PDF) recommend to use the Paste as text option from the edit menu. This avoids any hidden code or formatting being added which could impact how your content is displayed on the page.
Link Text
Link text should be descriptive, giving information about the link's destination. If link text is generic and non-descriptive, like “Click here” or “Read more,” people may open the wrong link, or need to go back to read the paragraphs surrounding each link to try to find out where the link will go. If using generic link text of this nature ensure that the title attribute is set to provide additional details by adding the title in the modal when adding or editing a link, e.g.:
Use of Headings
Headings are ranked heading 1 (h1) through to heading 6 (h6). Use headings hierarchically, with the heading 1 representing the most important topic of the page. Each page should have only 1 heading 1, this is added using a masthead content type or content type that has built in masthead. Organise content on the page with heading 2 (h2) level headings. Those areas can be divided with heading 3 (h3) level headings, and so on.
Do not skip heading levels to be more specific, e.g., do not skip from heading 2 (h2) to heading 5 (h5). You can skip headings in the other direction though if required, e.g., from heading 4 (h4) to heading 2 (h2).
Do not use a heading based on its appearance. Select the appropriate heading level rank for the hierarchy on the page.
Do not make text bold instead of using a heading. A common accessibility mistake is to make text bold when a heading is required. The text is highlighted and visually may look like a heading, however the HTML code behind it is not a heading, and it will not be picked up by assistive technology like screen readers.
Content Type Elements Details
| Name | Description | Size | Type | Required | Conditionally Shown |
|---|---|---|---|---|---|
| Name | The Name Element | 80 Characters | Plain Text | Yes | No |
| Heading | This is the content heading (h2) | 150 Characters | Plain Text | No | No |
| Sub Heading | This is the content sub-heading | 500 Characters | Plain Text | No | No |
| Main body | This is the main body. See TinyMCE content options. | 99999 Characters | HTML | Yes | No |
General Content
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Lorem ipsum dolor sit amet, pri id wisi ullum assentior, eum ne saepe discere, vim suas appareat ut. Usu fugit ornatus eu, suavitate sadipscing interpretaris ut mei, ut duo mollis nusquam. Rationibus reprehendunt definitionem eam in, id iriure quaestio scribentur nec, simul complectitur mel eu. Ne nec quas nullam nominati, ad tritani quaestio expetenda eum, ne vix dicit quodsi. Ullum augue nostrud te vix. An per salutatus forensibus, modo reque epicuri ne mei. Ut eum molestie tincidunt. Sea omnes democritum interpretaris ut. Sea et nibh timeam. Qui eros sonet solet in, ut libris pericula eam.
I am the a tag example
I am the abbr tag example
I am the strong tag example
I am the cite tag example
I am the code tag example
I am the del tag example
I am the dfn tag example
I am the em tag example
I am the ins tag example
I am the kbd tag example
I am the q tag
example
I am the samp tag example
I am the small tag example
I am the span tag example
I am the sub tag example
I am the sup tag example
I am the var tag example
I am the small tag example
Different types of list can be added using the Toolbar.
- List item that wraps around itself. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.
- A list item
- A nested list item
- A nested list item
- A nested list item
- A nested list item
- A nested list item
- A nested list item
- A list item
- A list item
- A list item
- A list item
Ordered list
- A list item
- A nested list item
- A nested list item
- A nested list item
- A nested list item
- A nested list item
- A nested list item
- A list item
- A list item
- A list item
- A list item
Standard list of links:
An unstyled list of links:
- Unstyled list link item
- Unstyled list link item
- Unstyled list link item
- Unstyled list link item
- Unstyled list link item
A numbered list of links:
A list of long items:
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cras adipiscing enim eu turpis egestas.
- Tortor pretium viverra suspendisse potenti nullam ac tortor vitae. Id leo in vitae turpis massa. Neque convallis a cras semper auctor neque vitae. Justo nec ultrices dui sapien eget mi proin sed libero. Volutpat lacus laoreet non curabitur gravida arcu ac tortor dignissim.
- Netus et malesuada fames ac turpis egestas integer. Neque volutpat ac tincidunt vitae semper quis lectus nulla at. Aliquet sagittis id consectetur purus ut faucibus pulvinar. Odio euismod lacinia at quis. Amet est placerat in egestas erat imperdiet sed euismod nisi. Id volutpat lacus laoreet non curabitur gravida arcu ac. Sit amet consectetur adipiscing elit. Purus in mollis nunc sed id.
#test {
width: 100%;
}
PDF Links
To add a link to a PDF, you cannot highlight text and add a link to the media item. Instead, the PDF must be selected from the Media Library (like an Image).
The text is automatically generated from the name of the PDF file, you can double-click the text to change it.
Tables
Tables can be added and edited in the TinyMCE.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nec lectus massa. Fusce quis tincidunt neque, in laoreet justo. Nulla diam metus, iaculis et vestibulum non, facilisis eget nibh. Praesent aliquet augue in fermentum efficitur. In hac habitasse platea dictumst. Nulla congue dui dignissim erat rutrum ultricies. Suspendisse at faucibus mi.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @jthorn |
| 3 | Larry the Bird | @larry | |
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @jthorn |
| 3 | Larry the Bird | @larry | |
Larger Table
| # | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading |
|---|---|---|---|---|---|---|---|---|---|
| 1 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| 2 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| 3 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nec lectus massa. Fusce quis tincidunt neque, in laoreet justo. Nulla diam metus, iaculis et vestibulum non, facilisis eget nibh. Praesent aliquet augue in fermentum efficitur. In hac habitasse platea dictumst. Nulla congue dui dignissim erat rutrum ultricies. Suspendisse at faucibus mi.
Images
To add an image select the “Insert from Media” icon in the toolbar:
Find the image in the Media Library and either click it to add it with the default layout - which will display the image full-width or select the “Select with layout” option:
Select a layout:
- image-center - image displays the full width of the content area
- image-left - image floats left, maintains it's natural width and text flows around the image (on screens narrower than 990px the image will go "full width")
- image-right - image floats right, maintains it's natural width and text flows around the image (on screens narrower than 990px the image will go "full width")
With these layouts you can double-click an image and add a Caption that will display below the image.
image-right
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et mattis urna. Integer maximus dolor id sem tempus, non ultrices metus sagittis. Sed efficitur mi eget nulla faucibus gravida sit amet non erat. Integer in sem libero. Suspendisse ullamcorper massa tellus, tincidunt ultricies ex elementum a. Donec blandit diam sed nibh congue eleifend. Aliquam congue pharetra auctor. Curabitur dictum eleifend tellus a porta.
This is a caption
Aliquam erat volutpat. Aliquam placerat porttitor massa, non finibus enim rhoncus congue. Nam viverra tincidunt molestie. Donec vel tempor ante, ut posuere nisl. Proin et risus et arcu tincidunt vehicula. Aenean vitae dolor ut nibh tincidunt pretium. Vivamus venenatis diam semper, scelerisque tellus in, blandit est. Pellentesque varius sed tellus a sodales.
Nam vel vulputate arcu, at laoreet augue. In hac habitasse platea dictumst. Pellentesque hendrerit rutrum sem a varius. Vivamus condimentum orci non fermentum dignissim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam cursus ullamcorper lacus, in vestibulum nisl fermentum quis. Vivamus a risus lorem. Quisque posuere vestibulum bibendum. Donec id mauris blandit, commodo erat eu, accumsan massa. Vivamus accumsan dolor non efficitur sodales. Nulla urna eros, imperdiet sed faucibus nec, lobortis faucibus sapien. Curabitur lobortis interdum libero, non imperdiet tortor tincidunt id. Cras nec ex sit amet felis fermentum laoreet eget iaculis felis. Integer non massa fermentum, rutrum elit sed, scelerisque purus. In eros ex, varius a cursus ut, venenatis quis massa.
image-left
This is a caption
Proin mollis quis elit id tincidunt. Duis diam nunc, tempor vitae velit luctus, scelerisque placerat odio. In hac habitasse platea dictumst. Pellentesque vitae magna a erat scelerisque consequat. Nullam ac ipsum gravida, gravida mi et, posuere enim. Etiam vitae arcu massa. Pellentesque a porta mauris. Sed velit sem, viverra nec facilisis non, pulvinar vitae neque. Phasellus malesuada venenatis aliquet.
Nunc et ligula lacinia massa varius commodo id ut neque. Sed molestie tortor odio, ut fermentum ligula ornare id. Donec sed turpis vel lacus hendrerit varius. Phasellus malesuada arcu eget risus viverra finibus. Donec maximus purus quis dignissim semper. Suspendisse enim erat, posuere nec massa elementum, pellentesque congue turpis. Praesent ullamcorper condimentum orci, in pellentesque quam placerat et. Maecenas a lacus non nulla gravida viverra maximus eget dui. Pellentesque nec odio fringilla, ultrices elit a, tincidunt lacus. Fusce lacinia, diam a lobortis molestie, quam risus tempor nunc, et convallis mi massa non dolor.
Suspendisse interdum metus velit, egestas rutrum eros commodo ac. Curabitur non odio iaculis, consequat ante viverra, gravida tortor. Aenean eleifend ultricies turpis non condimentum. Donec blandit purus id ligula convallis varius. Maecenas mi massa, ultrices ac quam eget, pulvinar commodo turpis. Nam mattis finibus lacus eget dapibus. Proin sed dolor feugiat, auctor nisi sed, egestas sem. Etiam vel erat et lorem laoreet lacinia iaculis ac libero. Vestibulum congue lorem eu risus ullamcorper varius. Nam hendrerit faucibus velit et eleifend. Sed ac consectetur lacus. Sed nunc erat, posuere vitae dapibus sollicitudin, lobortis ac enim. Morbi in quam vel nulla faucibus dignissim id varius nulla. Fusce nec nulla elit.
image-center
This is a caption
Phasellus vel porta metus. Mauris commodo tortor nunc, quis semper lacus bibendum sed. Aliquam in laoreet augue, nec lobortis turpis. Mauris pharetra, nisl in auctor vestibulum, sapien augue pulvinar turpis, ut aliquet lectus arcu a sapien. Ut dapibus pretium ante non commodo. Integer id cursus lacus, vitae facilisis nisl. Sed in facilisis sapien. Mauris dictum lectus ac velit hendrerit, at hendrerit felis efficitur. Suspendisse eu mi sed sapien aliquet dictum sit amet a nibh. Suspendisse placerat tortor ultrices condimentum elementum.
Nullam ullamcorper nisl sed augue ultricies iaculis. Nam egestas arcu quis lectus imperdiet, et hendrerit nunc accumsan. Morbi id dolor lectus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer dapibus et metus sit amet hendrerit. In eu sapien nec nulla cursus sollicitudin. Maecenas in cursus erat. Phasellus lacinia felis nec ullamcorper porttitor. Aenean luctus purus vel enim cursus, non feugiat quam fringilla. Nunc felis tortor, pharetra ut faucibus eget, ullamcorper eu nisl. Donec molestie sapien bibendum felis suscipit, eget dignissim ligula ullamcorper. Sed fringilla massa ut lacus mollis, at pellentesque eros luctus. Nulla ut justo mauris. Nulla eros felis, hendrerit et sapien in, porttitor faucibus lectus. Duis iaculis risus in rhoncus convallis.
image
Aenean sit amet purus vel lorem tincidunt rhoncus. Fusce faucibus nibh mi, sit amet auctor augue ornare ut. Mauris vel ultrices tellus. Donec lacus lacus, aliquam eget turpis eget, ultricies tincidunt mauris. Proin ultrices nunc ac ultrices tempus. Ut enim turpis, feugiat quis ex convallis, viverra maximus dui. In hac habitasse platea dictumst. Nunc at risus ut leo maximus euismod.
Nunc in est a arcu dictum consequat. Nulla lacinia id lacus sed maximus. Etiam ac nisi nunc. Sed fermentum malesuada dolor, et vestibulum lectus efficitur vel. Morbi lacinia, erat a venenatis scelerisque, nunc sem accumsan nibh, nec imperdiet sem sem non nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam semper auctor neque, non aliquam dui lobortis non. Aenean odio augue, porttitor et fringilla congue, semper euismod est. Donec auctor non nulla rhoncus posuere. Nulla nibh eros, dapibus at turpis ut, sodales euismod purus. Suspendisse accumsan sagittis erat eu tempus. Vestibulum rutrum id lorem vel scelerisque. Sed elementum elementum velit sit amet condimentum.
Custom Formats
Custom formats can be applied via the TinyMCE editor to apply buttons styles to links. Note that within the editor text in buttons for internal (section/content links) will appear blue, but this is just within the editor, the style will be fine in preview and published content.
Buttons
To add a button style to a link, select the link and apply the one of the relevant custom format from the toolbar Format > Formats> Custom Formats
Primary (internal and external links)
Primary Outline (internal and external links)
Morbi purus tellus Ultricies eget tellus nec
Secondary (internal and external links)
Nullam suscipit Tincidunt augue auctor
Secondary Outline (internal and external links)
Donec sodales Tellus non congue
Blockquote
To add a blockquote style to highlight a paragraph(s), select the paragraph(s) and apply the blockquote format from the toolbar Format > Formats > Blocks > Blockquote:
e.g.,
Cras vestibulum orci ut leo eleifend, at commodo massa finibus. Donec malesuada ultrices laoreet. Phasellus sagittis sapien vitae mauris placerat tempus.