Six Box Layout

Guide to working with special 6 box layout pages as seen on the SOM MD Program site.

Description

  • This is a type of page layout that features 6 boxes (2 rows of 3 boxes) with images and text in each box. The images have a slight zoom-in effect when hovered-over. Each box takes the user to a subsection. It's an advanced custom page layout.  As such, you should be comfortable working with HTML code to implement this.
  • Below is an example of what the page looks like. This is from a redesign of the MD program curriculum page.

6 Box example

First: Turn off the TinyMCE Editor

  • The first thing you should do before editing this page is Turn Off the TinyMCE editor. Go to your Editing Preferences and following these instructions. This is done because if you edit the page and hit "Save" while TinyMCE editor is on,  this will mess-up the look of the page and it may not be easy to undo. 

Prospective Students Example 

  • Here's the example we'll be working with. It's an existing page with the boxes already setup. We're using a dummy image in the Boxes right now.

6 box example 2

Upload your images 

  • Create a Folder in the directory you're working in where your images will live. In this case, I already created a folder called "landing_images" in the same directory where the page lives. 
    6 box image folder

  • Go into this folder and Add the Images you'll use in the boxes. Be sure to Publish each image or they will show up as a broken link.

On the Prospective Students page (above), Click on "Add, edit or remove portlet..." just below the Boxes
 

six-boxes-portlet

  • That takes you to this page. The Boxes are created using portlets. We’re using Portlet wells D, E & F (area in blue).
  • Review the userguide section on portlets to see why these are used. There are 2 "static text portlets" in each of these wells ; Each creating a Box. 
  • Click on "Admission Requirements" in well D (red circle). This will take you to the "Edit static text portlets" page

6 box edit static text

  • This is the page where you'll be editing the code to change the content in the first Box.
  • What's in red below is what you can change to edit the content of the Boxes 

The Code

<link rel="stylesheet" type="text/css" href="https://www.med.unc.edu/md/redesign/files/som-gallery-item.css" title="som-gallery-item.css"/>
  • You shouldn't need to do anything here. The first line is referring the css stylesheet that gives the Box its look. Though, it is recommended you download that css file and place it on your site. Then find out the resolveuid and use that instead of the URL above.  
<!-- update url below -->
<a class="som-story-gallery single" href="resolveuid/2daf490a8fb141e398e25020cc8d6222" target="_self" title="Admission Requirements">
  • Change the URL of the page the user goes to after clicking the Box. You can replace the "resolveuid" (in red) with an address such as "http://www.med.unc.edu/"
  • Also, change "Admission Requirements" to the title of the new page. If you're changing this, be sure sure to also change this in the Portlet Header box at the top of the page. 
<!-- update imagebelow -->
<div class="image" style="background-image: url('redesign/landing_images/placeholder/@@images/image/large');"></div>
  • This is where you change the background image in the Box. Replace "placeholder" (in red) with the name of one of the images you uploaded in the landing_images folder. You'll need to use the shortname of the image. The easiest way to find the shortname is to browse to that image and look at the URL bar to see what it is.
    6 box shortname 
<div class="titleboard">

<!-- update title below -->
<h3 class="title">Admission Requirements </h3>

<!-- update description below -->
<p class="type">and our ideal candidate</p>

</div>
</a>
  • Change the "Admission Requirements" to the new page title. This is the actual text that appears in the title area of the Box
  • Change the "and our ideal candidate" to the description you'd like beneath that, if any.

Make sure that "Omit portlet border" is checked. And hit "Save".



Once you're back in the portlet wells page, you can go ahead to edit the content in the 5 remaining Boxes using the same procedure.