Jump to Content

3D Content Panel

Content Panel 1

This content panel floats to the right of the page. Other content appears to the left of it.

Full Width Panel

Panels can be full width. Non-informative

All panels can contain media library items. ‌

If this Content Panel is not displaying full width, scroll down and click on 'With Rightbar' to hide the right bar.

Panel 3

Any number of panels can be added to a page.

They float to the left by default (i.e. content appears to their right and wraps around them).

Panel 4

Panels stretch to be as long as the content in them requires.

They can be included in any type of page.

You don't need a set number of panels on a line because the text will wrap around them.

Note: This only happens if your screen is wider than 1000px. Anything narrower than that will render the panels as full-width to ensure legibility.

Content Panel 5

If the screen width is less than 1000px, all panels change to full-width, thereby ensuring maximum legibility on mobile devices.

See how this content type looks in different page types:
With Rightbar, Without Rightbar, Widescreen, and Ultra-Wide (sub-site) / Ultra-Wide (top-level) pages
or else
Normal, Widescreen, and Ultra-Wide (Sub-Site) / Ultra-Wide (Top-Level) Landing pages

Note: You change a page's width (and other options) using its section's DC.Keywords field - see my interactive demonstration for full information.

Tweaking this content type:

Normally, you'd want the title (aka headline) to appear on all your panels but it is possible to hide it.
This can look very effective if you are using foreground images at the top of your panel and you want them to appear flush with the top of the panel.

To remove the headline from all 3d content panels on the page:

Add an 'NUIG Code Only' content type to the same page (at the botttom)
a. Give it the name: 'Hide all 3d content panel headers'
b. For the code, paste in the following:

<script>
$(document).ready(function(){
$('.panel h2').hide();
});
</script>

c. Click on the small arrow beside Save Changes and choose 'Save and approve'

Activate / De-activate This Feature On This Page

How do I create a 3D Content Panel

Log in to t4.
Go to the site structure and find the page you with the 3D Content Panel to appear.
Click on the Actions Button, choose Edit section from the dropdown menu to enter the content of that section.
Click on +Add Content.
Choose the 3D Content Panel content type from the available content types.
Fill in the Name, Title and choose the Width that you want to use.
Fill in the Content which you want to appear in your 3D Content Panel.
Tick the Right Justified box if you want your 3D Content Panel to go to the Right of your page.
When editing is complete click on Save changes to put your content to Pending.
Click on the white arrow beside Save changes and choose Save and approve to approve your content.

Sidebar Panel

Panels can also appear in the sidebar (rightbar)

If you want to have a sub-heading in a panel (see the below panel for an example), you should insert a horizontal rule and then set the next line to be 'Heading 3', using the 'Format' dropdown in the editor's toolbar.

Tips

When adding a panel to the sidebar, you should specify 'Full Width' to use all the available space in the sidebar.

Panels under the left menu

If you want the sidebar to move under the left navigation menu, simply modify the section, go to the 'Metadata' tab, and enter 'fullContentWidth' in the 'DC.Keywords' field. Then 'Save Changes' the section to save your changes.

The space on the RHS of the page (where the sidebar) used to be will now be part of the page body, so you could also have panels on the right of the page by creating a quarter-width panel that floats to the right.