Process for Adding a Page

1. After logging in to your website, you will see a black menu bar across the top (if you do not see a black menu bar, contact your site administrator for assistance).
    
2. Select the Content menu, then Add content. You will see a list of different types of content that you can add. If your site is using the official Georgia Tech theme, then you should choose Basic page unless you know you want to add a special type of content.
    
3. Type your page title into the Title field.
    
4. Look to the right of the body content for URL ALIAS settings. If your site has the option, you can either check the "Generate automatic URL alias" box, or type in your own. To create your own, you should use the page title, or some variation of it. This will be used in the page’s URL. Always use lowercase letters and dashes between words. Aliases must start with a forward slash (/) and can contain forward slashes to place a page underneath a parent page, but should never end with a forward slash.  Please note that in Drupal 10, breadcrumbs are based on the URL Alias, not the menu page!  If you want breadcrumbs to work correctly, your URL aliases must be created with the same tree structure as your main menu.  
    
5. To  have the page show up in your website menu, go to MENU SETTINGS and check the "Provide a Menu Link" box. The "Menu link title" field will automatically populate with your page title. You can change it if you'd like. Next, decide what menu you want this page added to, by selecting it from the "Parent Item" drop-down list. If you want this page to be a main menu item in the gold bar, select, "Main navigation."
    
6. Select the Save button, and you’re done.

Adding Content to the Page

• You can now scroll back up the page and start adding content, or you can return to it later, by locating the page in the Content List.
• Learn how to add content to a Multipurpose page in this tutorial [add link].

About Drafts and Revisions

If your site has Revisioning installed and turned on (a standard feature for Drupal Express sites), then the following concepts will apply:

• After you have created or edited a page or block, it is saved as a draft.
• Every time you make a change to a page or block and save it, you create a new revision.
• In order to see your new content on your website, you must publish it.

The great thing about revisions is that you can compare versions and even revert back to an earlier version.

Viewing, Editing, Comparing, and Deleting Revisions

1. Navigate to the page you want to publish. Select the "Revisions" tab at the top of the page.
2. The last version of your page will be the first one on the list. If you have not yet published it, it will be highlighted in pink with the words, "In Draft/Pending Publication" in the "Status" column next to it.
3. Select the date link to view your draft. Now you can edit the latest version, compare it to the version that is currently published, delete it, or publish it.

Publishing Drafts

1. Navigate to your draft by following the steps above, OR, if you have just saved your page, the "Publish" button should appear at the top of the page.
2. Select the "Publish" button.
3. Select the "Publish" button to confirm that, yes, you really do want to make this revision go live.

Unpublishing Revisions

1. Select on the "Revisions" tab at the top of the page.
2. Select on the date of the draft/revision you want to unpublish in the Revision table, which will probably be the most recent revision at the top, and will say, "Current Revision (Published)" in the Status column next to it.
3. Above the Revision table, select the "Unpublish Current Revision" link
4. On the next page, select the "Unpublish" button to confirm that you do indeed want to unpublish this page.
5. Select the save button.

Basic Content Types (Built Into Drupal)

Basic Page

A web page has unique content that should usually have a link from the main menu (the top, gold menu in the new design). A page may contain documents, images, or just regular text. Use basic pages for your static content, such as an 'About us' page.

Block

A block usually looks like a box, contains text or images, and can be shown on one or many pages. You often see a block floating on either the right or left side of a page. The GT Theme offers a number of preset block layouts and block styles.

Georgia Tech Custom Page Layouts

If your site is using the GT Theme, and has had the custom GT Content Types page layouts module installed, you will also have three additional ways to organize content on your pages.  Every field (such as a row of blocks) that comes with each of these layouts is optional, so you can pick and choose just what you need for a particular page.

Horizontal landing page

This layout is most often used for homepages.

It allows up to four horizontal rows of blocks to be added below the main body text.

Vertical landing page

This layout is often used to show related content to whatever is at the top of the page.

It creates two vertical columns for blocks that can be added below the main body text.

Multipurpose page

Your Swiss army knife of page layouts, this layout works well for breaking up content-heavy pages into separate sections.

It provides three separate fields for body text, each with:

• a horizontal block row beneath it, and
• a sidebar beside it.

Switching Layouts

If you need to change from one layout to another, it is best to engage your website developer / administrator, as this process requires special privileges on many Drupal sites, and even on sites where a content editor can switch layout types, there is a risk of losing your content if you don't do the conversion properly.

Process for Adding a Page

1. After logging in to your website, you will see a black menu bar across the top (if you do not see a black menu bar, contact your site administrator for assistance).
    
2. Select the Content menu, then Add content. You will see a list of different types of content that you can add. If your site is using the custom GT Content Types,  and you are adding a top-level (AKA landing) page, we recommend that you choose Multipurpose page, as this will give you the most options for formatting and layout.  If your site is not using GT Content Types, or if you are creating an inside page that doesn't need a lot of special formatting, you should choose Basic page.
    
3. Type your page title into the Title field.
    
4. Scroll to the very bottom of the page and select URL Path Settings. If your site has the option, you can either check the "Automatic Alias" box, or type in your own. To create your own, you should use the page title, or some variation of it. This will be used in the page’s URL. Always use lowercase letters and dashes between words. Do not end your alias with a “/”
    
5. To add breadcrumb links and/or to have the page show up in your website menu, go to Menu Settings. Check the "Provide a Menu Link" box. The Menu Link Title field will automatically populate with your page title. You can change it if you'd like. Next, decide what menu you want this page added to, by selecting it from the "Parent Item" drop-down list. If you want this page to be a main menu item in the gold bar, select, "Main Menu."
    
6. Select the Save button, and you’re done.

Adding Content to the Page

• You can now scroll back up the page and start adding content, or you can return to it later, by locating the page in the Content List.
• Learn how to add content to a Multipurpose page in this tutorial [add link].

Many campus Drupal websites have either the What You See is What You Get (WYSIWYG) text editor called CKEditor, or the custom built specialized version of CKEditor known as "GT Editor".

The table below describes many of the control buttons you will find on the CKEditor or GT Editor toolbar.  If your control buttons don't look like these, you should ask your site administrator or local web developer to look into upgrading your site to the latest version of CKEditor.

Note: The control name can be seen by hovering over the control, and is what should be heard when working with accessibility technology.

Note: It is possible that your site administrator may have removed or rearranged control buttons or added ones not described below.  In addition, Drupal 8 sites will not have all of the buttons below by default, as Drupal 8 comes with a minimal functionality version of CKEditor.

Control Button Image	Control Button Name	Additional Notes
	Maximize	Maximizes the editor in the browser window so you can see more of your content while editing.
Styles	Formatting Styles	Lets you apply pre-defined combinations of various formatting styles to text.
B	Bold
I	Italic
X2	Superscript
X2	Subscript
	Insert Special Character
	Insert Teaser Break	Creates an invisible break to tell Drupal that everything above the break (and nothing below it) should be shown when this page is shown in a search listing or Views listing.
	Insert Horizontal Line
	Insert/Remove Bulleted List
	Insert/Remove Numbered List
	Decrease Indent	In a numbered or bulleted list, moves the current item up a level (further to the left)
	Increase Indent	In a numbered or bulleted list, moves the current item down a sub-level (further to the right)
	Table	Lets you create and configure a table
	Image	Lets you insert an image into your content
	Link (to content)	Link to other pages, uploaded files, other websites, etc.
	Unlink	Removes a link from text, returning the text to normal text.
	Anchor	Create a link anchor in your text, which can be used to send users directly to that part of the page.
	Paste from Word	Tries to preserve formatting and strip unnecessary markup when pasting in content from Microsoft Word
Source	Source	View and/or edit the HTML source code for your content.

If your site is running on Drupal 7 with the official GT Theme and the GT Editor module, then you should have a Styles drop-down option in the toolbar of your WYSIWYG (GUI) text editor (AKA CKEditor) with the following formatting styles.  If you are not using both the official theme and the GT Editor module, then you will not see any of these styles (and may not even see the Styles drop-down option).

"Block" styles

"Block" styles describes HTML elements or containers which do NOT sit next to each other on a line, but "own" the entire page's width for the lines they fill.

Basic HTML Styles

These first options are mainly headings, so you can add visual (and invisible) outlines to your pages and make it easier for people to scan them quickly.

• Heading <h3>
  • Subheading 1 <h4>
  • Subheading 2 <h5>
  • Subheading 3 <h6>
• Preserve format <pre>

Image and Media Styles

Mostly, these options style images within your pages. They work best when you place your image on its own line, and not inside a paragraph.

• Float Left: moves your image to align with the LEFT side of the page and makes other text wrap around your image on the same lines it occupies.
  • Float Left - Simple
  • Float Left 70%
  • Float Left 50%
  • Float Left 30%
• Float Right: moves your image to align with the RIGHT side of the page and makes other text wrap around your image on the same lines it occupies.
  • Float Right - Simple
  • Float Right 70%
  • Float Right 50%
  • Float Right 30%
• Clear Floats: forces text to NOT wrap around your image, so that the image has lots of white space on either side of it.
  • Clear Float Left
  • Clear Float Right
• Embedded Media Wrapper: not currently used, but may one day make videos more responsive on various sizes of device.

For Themers: these apply a <div> with a special class around the selected image or media. That <div> may replace the <p> element if your image is within a paragraph, leading to incorrect styling. This is intentional, as every Float style (except for those ending in "Simple") is designed to provide special styling to any text that accompanies your Floated image.

Paragraphs, Buttons and Links

Add visual enhancements to paragraphs or turn small phrases or a short sentence into a special button or link.

• Intro Text: makes a paragraph's font size and line spacing larger (designed to be used only for the FIRST paragraph on a page).
• Yellow Highlight Button
• Blue Highlight Button
• Jump Link

For Themers: these apply a <p> with a special class around the selected text.

"Inline" styles

"Inline" styles describes containers which are designed to sit next to each other on the same line and usually occur within a paragraph.

Basic HTML Styles

• Computer Code <code>
• Cited Work <cite>
• Inline Quotation <q>
• Block Quotation <blockquote>

Pull Quotes

• Pull-quote - Left: styles a sentence as a large quote on the LEFT side of the page.
• Pull-quote - Right: similar to above, but on the RIGHT side of the page.

For Themers: these apply a <blockquote> with a special class around the selected text.

File Types

Add icons to your selected text, which show pictures of the related file type.

• PDF Icon
• MS Word Icon
• MS Excel Icon
• MS PowerPoint Icon
• Generic File Icon

For Themers: these apply a <span> with a special class around the selected text.

The following instructions are for adding an image or picture to a page when your site is using GT Editor or otherwise has the IMCE module installed.

Important!  Be sure to properly resize your image file before you upload it to your site.

1. Place your text editing cursor where you want to be located within your content
   • If you want the image on it's own line, create that blank line and place the cursor on it
   • If you want the image to float left or right of existing text, place your cursor at the beginning of that line of text
2. Select the Image button in the editor toolbar (it looks like a painting of an outdoor landscape with a mountain and a little sun in the upper-right corner).
3. In the pop-up control panel, select the Browse Server button to the left of the URL field.
   • If you do not see a Browse Server button, then your site is not configured with the IMCE module, and the following instructions do not apply to your website.
4. In the next pop-up control panel that appears, navigate to the folder where you want to save your uploaded image or a folder that already contains a file that you wish to use for your link.  To upload a new file to your chosen folder:
   1. Select the Upload toolbar button, and then use the resulting controls to find and select the correct file on your local computer.
   2. Once you have selected a file, select the Upload button that appears below the Create thumbnails option (not the Upload button above in the toolbar).
   3. Your newly uploaded file should appear in the folder file list.
5. Select your chosen or uploaded file to highlight it, then select the Insert File button from the toolbar.
6. You will now be returned to the first pop-up control panel, and you should see a filesystem path in the URL field.
7. If your image is conveying something important to your website users (i.e. the image is not purely decorative, meaning you could remove it and users would still get the same message from the page), then you need to enter a short description of the message conveyed by the image in the Alternative Text field.
8. If you want your image to float left or right of your existing text, then select the appropriate option for the Alignment field.  You may also need to add a little horizontal or vertical spacing by entering a small numeric value (usually 10 works) for the HSpace and / or VSpace fields.
9. When you are finished, select the OK button to place your image into the page.

When (and When Not) to Use a Table

Tables should only be used for the display of tabular data (data that is connected to one or more headings).

Do not use tables for any of the following reasons:

• Displaying a list of items (use an unordered or ordered list instead)
• Creating a multi-column page layout (use proper page layout tools instead)

If you are not sure about how to present a certain type of information, please check with your communications manager, your website developer, or even the Georgia Tech Drupal Mailing List for assistance.

How to Place and Configure a Table Using GT Editor or CKEditor

1. Place your cursor where you want the table to appear.
   • If you want the table on it's own line, create that blank line and place the cursor on it
   • If you want the table to float left or right of existing text, place your cursor at the beginning of that line of text
2. Select the Table button in the toolbar: 
3. In the pop-up control panel, fill in the fields as appropriate:
   • For Rows and Columns.  (You can adjust this again later if needed.)
   • Leave the Width field blank to allow for automatic sizing of the table, or enter 95% to force a full-width table with a little bit of right-hand spacing
   • Set Headers to something other than None.  All tables must have at least one row or column of headers (if not both) to be compliant with accessibility laws.
   • To float the table to the Left or Right of existing content, select the appropriate option under Alignment
   • Under Summary, enter a short summary of what the table represents and what message you expect your website visitors to get from the data in the table.  This is very important for people with vision disabilities who cannot directly view the table and thus cannot see the visual arrangement of the data.
   • Use the Caption field to give the table a visible title.  If the caption can properly summarize the intent of the table and its data, then you could use it alone and leave Summary blank, but at least one or the other should be used (and you can use both, if that works best for your needs).
4. Select the OK button and you should see your empty table generated within the content of your page.
5. Now, you can add content to each cell of the table by clicking on or tabbing to a cell.

How to Modify an Existing Table

You can modify the configuration of an existing table by right-clicking on the table and using the pop-up contextual menu.  Through this menu,  you can add columns, add rows, manipulate individual cells, and adjust the display and formatting settings for the table.

Available table contextual menu options:

• Paste
• Cell ->
• Row ->
• Column ->
• Delete Table
• Table Properties

This page covers the creation of different types of links using the standard CKEditor link tool.  If your website is using the GT Editor or otherwise has the Linkit module installed, then you will have some additional options as described on the Creating Links in GT Editor (Linkit).

Accessibility and Usability of Links

To comply with accessibility law, and good sense usability guidelines, always make the visible text of your link something that clearly indicates what the website visitor is going to be taken to when following that link.  Some examples of improper link text include:

• Click Here
• Here
• Read More
• More
• Follow This Link

Wording like these give the user no indication of what you are linking them to, and this is really bad for users with vision disabilities who utilize screen readers.  As a matter of speed and efficiency, these users often have the list of links on a page read aloud without their supporting context.  Hearing "Click Here" ten times makes it impossible for these users to know which link is which, and thus they will be unable to navigate through the links on your page.

While you can make an image into a link, it is best to only make text into links, or to link both an image and an equivalent piece of text together as a link so that you always have some plain text describing the destination of your link.  If you really only want to make an image into a link, then you must set the Alternative Text field of the image to a description of where the link is going to take the user.

Drupal 7

CKEditor in Drupal 7 has a variety of options available.  It is best to only use the ones described below:

Adding a Link

1. Highlight the text that you want to turn into a link.
2. Select the Link control button on the toolbar:
3. Select the type of link you want to add in the Link Type drop-down:
   • URL: Links to another page in the current site, or an external site:
     • Enter the URL into the URL field.  The Protocol field will automatically adjust itself.
     • Enter links to pages on the current website as relative URLs, which do not include the server name:  /undergraduate/minors
     • Enter links to pages on the a different website as fully qualified URLs, which include the server name:  http://mysite.gatech.edu/undergraduate/minors
   • Link to anchor in the text: If you have already placed anchors in the current page, this will let you select one of them and create a jump-link to that anchor point
   • E-mail: This will let you easily create a link that invokes the user's default email program to send an email to a designated email address:
     • Fill in the E-Mail Address, Message Subject, and Message Body fields as desired.  Only the E-Mail Address is required, and bear in mind that the user can easily change the subject and body text in his/her email client - what you provide here is just a suggestion to the user.
4. Select the Save button and your highlighted text should now be a link.

Please note that you cannot follow a link while in CKEditor.  You must either Preview your page or Save the page and return to View mode to be able to follow any of your links.

Removing a Link

1. Put your text cursor somewhere within the linked text.
2. Select the Unlink control button:
3. The link will now be gone, though the text will remain.

Drupal 10

If you are working with a Drupal 10 site, you will find that it's version of CKEditor has taken a minimalist approach, so the instructions are really simple:

Adding a Link

1. Highlight the text that you want to turn into a link.
2. Select the Link control button on the toolbar:
3. Enter the URL of your link into the URL field of the pop-up contol panel and select the Save button and your highlighted text should now be a link.

Please note that you cannot follow a link while in CKEditor.  You must either Preview your page or Save the page and return to View mode to be able to follow any of your links.

Removing a Link

1. Put your text cursor somewhere within the linked text.
2. Select the Unlink control button:
3. The link will now be gone, though the text will remain.

If your Georgia Tech Drupal website has the GT Editor feature package installed, then it also has the Linkit module, which gives you an enhanced interface for creating links to local content.

Accessibility and Usability of Links

To comply with accessibility law, and good sense usability guidelines, always make the visible text of your link something that clearly indicates what the website visitor is going to be taken to when following that link.  Some examples of improper link text include:

• Click Here
• Here
• Read More
• More
• Follow This Link

Wording like these give the user no indication of what you are linking them to, and this is really bad for users with vision disabilities who utilize screen readers.  As a matter of speed and efficiency, these users often have the list of links on a page read aloud without their supporting context.  Hearing "Click Here" ten times makes it impossible for these users to know which link is which, and thus they will be unable to navigate through the links on your page.

While you can make an image into a link, it is best to only make text into links, or to link both an image and an equivalent piece of text together as a link so that you always have some plain text describing the destination of your link.  If you really only want to make an image into a link, then you must set the Alternative Text field of the image to a description of where the link is going to take the user.

Creating Links to Pages Within Your Site

1. Highlight the text that you want to turn into a link.
2. Select the Link control button on the toolbar:
3. If your site has Linkit installed, then the pop-up panel should have two fields: Search for content and Link URL along with a Insert Link button.  If your pop-up panel doesn't have these fields and button, then you'll need to follow the instructions for Creating Links in CKEditor.
4. In the Search for content field, begin typing any word(s) from the title of the page you would like to link to.  As you type, a drop-down box should open up and show you any pages whose titles have the word(s) you have entered.  Simply select the page you want from the list.
5. As a confirmation, you should see a URL path appear in the Link URL field after you have selected a page.
6. Select the Insert Link button to create your link.

Creating Links to Pages on Other Sites

1. Highlight the text that you want to turn into a link.
2. Select the Link control button on the toolbar:
3. If your site has Linkit installed, then the pop-up panel should have two fields: Search for content and Link URL along with a Insert Link button.  If your pop-up panel doesn't have these fields and button, then you'll need to follow the instructions for Creating Links in CKEditor.
4. In the Link URL field, type in the fully qualified (starts with "http://" or "https://") URL for the page to which you want to link.
5. Select the Insert Link button to create your link.

Creating Links to Uploaded Files

Note: A "file" can be anything that can be reasonably opened in a web browser or which your site users would want to download to their own computer: a Word Document, a PDF file, an image file, etc.  For the greatest level of usability, consider turning any kind of office related document into a PDF, as PDFs can be opened on virtually any computer or mobile device without needing any additional software.

Note: These instructions require that your site be running the GT Editor feature package or otherwise have both the Linkit and IMCE modules installed.

1. Highlight the text that you want to turn into a link.
2. Select the Link control button on the toolbar:
3. If your site has Linkit installed, then the pop-up panel should have two fields: Search for content and Link URL along with a Insert Link button.  If your pop-up panel doesn't have these fields and button, then you'll need to follow the instructions for Creating Links in CKEditor.
4. Select the Open file browser button below the Search for content field.
   • If you do not have an Open file browser button, then your Drupal site does not have the IMCE module installed.  Stop and contact your site administrator or developer for further assistance.
5. In the next pop-up control panel that appears, navigate to the folder where you want to save your uploaded file, or a folder that already contains a file that you wish to use for your link.  To upload a new file to your chosen folder:
   1. select the Upload toolbar button, and then use the resulting controls to find and select the correct file on your local computer.
   2. Once you have selected a file, select the Upload button that appears below the Create thumbnails option (not the Upload button above in the toolbar). 
   3. Your newly uploaded file should now appear in the folder.
6. Select your chosen or uploaded file to highlight it, then select the Insert File button from the toolbar.
7. You will now be returned to the first pop-up control panel, and you should see a filesystem path in the Link URL field.
8. Select the Insert Link button to create your link.

It is important to resize images to best fit the needs of a particular web page.  When an image is larger than necessary, this results in users wasting time and bandwidth (which they may have to pay for on mobile devices) to download image content that they will never actually see.

These days, photographs straight from a digital camera may be over 4000 pixels wide, which is much too wide for a web page.  Even if you are creating a photo gallery, most desktop monitors can only display around 2000 pixels in width.  So, you need to reduce the size of these images before uploading them to your website.

Image Resizing Guidelines

• If you try to make a small image larger, it will simply become fuzzy (AKA pixelated), and the larger you make it, the fuzzier it will become.  However, you can easily make a large image smaller when needed.

• For basic website pages, 400 pixels wide images are a good best-practice. For mobile compatibility, choose a width for your image that is less than 400 pixels.

• If uploading large images for the press to use, your resolution should not be higher than 300ppi (pixels per inch) and the image should not be more than 3,000 pixels on it's longest side. If these images are not for the press, but are used as full-page-width decorations, you should make them even smaller.

• If you are uploading an image for a headline / hero image (an image at the top of a main landing page that fills the page left to right), resize your image to no more than 1440 pixels wide.

• When making an image smaller, don't sacrifice the quality of the image.  Instead, simply change the pixel length/width of the image.

• Also, be sure to check "Scale proportionally" or "Maintain aspect ratio", so that your picture does not get skewed to where people have extra-wide heads that look strange.

How to Resize Images

• Resizing images on Windows using Paint
• Resizing images on Mac OS X (or macOS) using Preview

Of course, you can use any graphic image editing program that you are comfortable with, such as Adobe PhotoShop, GIMP, etc.  If you are not sure how to resize images in one of these editors, just do a search in your favorite search engine on the editor's name and the phrase "resize image".

The following instructions assume that you have the Video Embed Field module installed on your Drupal 7 site.  This is included on any Drupal Express site, but may not be installed on other Drupal sites found on campus.

Note: For best results, try not to put more than three videos on one page.

Embed a Video from YouTube

1. Go to the video on YouTube.
2. Beneath the video, select the "Share" link.
3. Copy the URL.
4. On your Drupal site page, type in the following shortcode, replacing your-url-here with the URL you copied from YouTube:

[VIDEO::your-url-here]

Example:

[VIDEO::http://www.youtube.com/embed/98nNpzE6gIs?rel=0"&autohide=1]

Don't forget to save your changes!

If you have access to manage blocks on your Drupal site, the following tips and tricks may help you achieve better positioning of your blocks.

Automatic Re-Sizing and Regions

Blocks that are placed within the main content regions of a horizontal, vertical or multipurpose page (only available if you have installed the custom Georgia Tech Content Types package) will automatically resize, based on number of blocks in that region. Regions whose blocks behave this way include:

• Area ABOVE Main Content (IGNORES sidebar regions)
• Area ABOVE Main Content (RESPECTS sidebar regions)
• Main Content
• Area BELOW Main Content (RESPECTS sidebar regions)
• Area BELOW Main Content (IGNORES sidebar regions)

Choose your Width

There are also block layout options that you can use to change a block's default width. You'll find these in the Layout drop-down list when you are creating or updating a Block:

• Full width
• Three quarter width
• Two thirds width
• Half width
• One third width
• One quarter width

For instance, you could have four blocks that sit side-by-side, but then apply the "Full width" layout option to the fifth block so that it extends the full width of the region, rather than sitting there like a misplaced element.

Remember: these widths apply to a block WHEREVER it is shown. So, if you need the same content to display differently on different pages, you may need to create a separate block for each look.

Screen Size and Number of Horizontal Blocks

Blocks will have different limits on number shown per row, based on the screen size of the device used to view your site.

• For a desktop computer view of your site: regions are limited to four blocks next to each other (horizontally), after which additional blocks will break and start a new row.
• On smaller screen sizes (such as tablets): blocks will stack two or three horizontally.
• On the smallest viewports (such as smartphones): blocks will stack on top of each other (vertically), instead of next to each other (horizontally).

Clear Floats to Prevent Collisions

There is also a "Clear floats" checkbox available, useful for preventing block collisions due to varying content heights within each block.

An example problem might be a block in a lower row colliding with a block in the row above it, due to the content of the block in the upper row causing it to sit higher than its adjacent blocks. Just apply the clear floats option to the lower block and it will no longer collide with the block above.

If your site is using the Drupal 7 GT Theme, and has had the custom Georgia Tech Page Layouts package installed, then when adding a new block, or editing an existing block, you can make your blocks look fancier than a standard Drupal block.  This is done by selecting a custom style via the checkboxes under the "STYLING" section at the bottom of any block configuration page.  The available styles are:

• BLOCK STYLE: promo block
• BLOCK STYLE: related info block
• ICON: Information
• ICON: Alert
• ICON: Download
• ICON: Link
• ICON: Institution
• ICON: Mortar Board
• BLOCK TITLE: GT Gold
• BLOCK TITLE: GT Blue
• BLOCK TITLE: Gray

BLOCK STYLE: promo block

This style formats your block title on a transparent background and the rest of the block on a grey background with gold top and bottom borders.

BLOCK STYLE: related info block

This style formats your block title on a gold background and the rest of the block on a grey background.

ICON: Information

This style formats your block title with an 'i' information icon before the title and a gold border below the title.  The body is styled as a normal Drupal block.

ICON: Alert

This style formats your block title with an exclamation point icon before the title and a gold border below the title.  The body is styled as a normal Drupal block.

ICON: Download

This style formats your block title with an down arrow icon before the title and a gold border below the title.  The body is styled as a normal Drupal block.

ICON: Link

This style formats your block title with an arrow icon (pointing to the upper right) before the title and a gold border below the title.  The body is styled as a normal Drupal block.

ICON: Institution

This style formats your block title with a Greek / Roman building icon before the title and a gold border below the title.  The body is styled as a normal Drupal block.

ICON: Mortar Board

This style formats your block title with a graduation mortar board icon before the title and a gold border below the title.  The body is styled as a normal Drupal block.

BLOCK TITLE: GT Gold

This style formats your block title with a gold background.  The body is styled as a normal Drupal block.

BLOCK TITLE: GT Blue

This style formats your block title with a blue background.  The body is styled as a normal Drupal block.

BLOCK TITLE: Gray

This style formats your block title with a grey background.  The body is styled as a normal Drupal block.

Super Blocks are only available if your site has the Georgia Tech Super Block module installed.

Creating a Super Block

To start making a new Super Block, use the Administrative toolbar (the black bar across the top of your site). Choose Content > Add content > Super Block.

After the new Super Block form opens, you can enter your information into the fields described below.

Title and Description

Description

• Example Description 1: "Block - Homepage - Bachelor's Programs"
• Example Description 2: "Block - About Section - Contact Information"
• The Description field is always required.
• Only you and other editors of the site will see the "Description" field; it will be used for the block reference fields on layout pages (such as in the Article or Aside areas on a Multipurpose page.)
• Be concise, but describe each block in a way that is easy for your fellow editors to sort through later (because you will probably have a long list of blocks) .
• Consider using a pattern for naming your blocks that indicates what type of content it is, what parts of your website it will probably appear on, and then the specific content in this block.

Title

• Example Title: "Bachelor's Programs"
• The Title is optional.
• If used, visitors to your site will read the Title as a very short text headline at the top of a Super Block.
• You can use <em>, <strong>, and <br />, tags in the title if needed. Just don't forget to close <em> and <strong> tags! (i.e., <strong>Strong Title</strong>)

The Teaser and Image

​​Teaser Text

• This field is optional, but can be used to include text or a blurb about the image in your Super Block.
• It can also be used instead of an image, if only want to include text and links in your Super Block.

Primary Image

• The Primary Image is optional, but is the heart of what makes super blocks so fun!
• Image Size Recommendation: 492 by 320 pixels
• Always enter the "Alternative text" so that your images communicate with people using screen readers, too!

Image Placement

• This field is required, but you can ignore it if not uploading an image.
• Here you can select positioning for your image and the default value is "Left".
  • If super blocks are in a region with other blocks (such as within the "Articles" section of a Multipurpose page), the image will fill the entire width of the block across the top, and any teaser text you entered will appear below the image.
  • But, if a super block appears alone in a region, the image will align with the left or right side of your block and any teaser text you entered will wrap around the sides of your image inside of the block.

The Jump Link

Jump Link Title and URL

• These are optional, but you can enter a link (in the URL box) and it's human-readable label (in the Title box), if necessary.
• The Link Title will show on the completed Super Block as a standard "Highlight Button".
• The Link URL you enter will apply to the Highlight Button, and also to the Title and Primary Image of the Super Block.

Jump Link Location

• This field is required, but you can ignore it if not entering a Jump Link.
• Depending on what options you select, your Highlight Button link will appear either:
  • Below the teaser text and image (the default value), or
  • As an overlay on top of the image.

The Skin (or Design)

• This field is required, and determines which of the pre-set design treatment is used for this block. The skin options are:
  • Standard: uses a gray title and jump link with white text and a gold icon (this is the default value).
  • GT Blue: uses a blue title and jump link with white text and gold icon.
  • GT Gold: uses a blue title, but the jump link is gold with white text, and a blue icon.

Roles are used by Drupal to apply a set of permissions to a group of user accounts. Some roles are built into Drupal, and some are automatically created by different Georgia Tech community modules and distributions, such as Drupal Express.  Below are the roles normally found on a Drupal 10 Drupal Express website:

Anonymous user

Automatically applies to anyone visiting your site who is not logged in.

Authenticated user

Automatically applies to anyone who is logged in to your site, so be careful about what permissions this role is given.

Editor

This role can edit all pages, as well as the menu and some of the blocks / block regions on the website. It's not usually assigned automatically, but by one of your site's Administrators.

Administrator

This role has full access to to all features and configuration settings of a Drupal site. It should NEVER be assigned automatically and should only be given to a highly trusted user (ideally only full-time employees).

Roles are used by Drupal to apply a set of permissions to a group of user accounts.  Some roles are built into Drupal, and some are automatically created by different Georgia Tech community modules and distributions, such as Drupal Express.

Drupal Provided Roles

Anonymous user

Automatically applies to anyone visiting your site who is not logged in.

Authenticated user

Automatically applies to anyone who is logged in to your site, so be careful about what permissions this role is given.

Roles Provided by Georgia Tech Community Modules

Editor

This role can Edit all pages, as well as the menu and blocks on a GT Drupal site. It's not usually assigned automatically, but by one of your site's Administrators.

Administrator

This role has limited access to the Administrative section of a GT Drupal site and can also do anything Editors can. Should NEVER be assigned automatically.

Super Administrator

This role has full access to the Administrative section of a GT Drupal site. Should NEVER be assigned automatically.

Editor's Note: The following was written for Drupal 7, but should work as described under Drupal 10.  The one main difference is that Drupal 10 does not have a "master" view, but you could have "block" or other types of views.  Just make sure you're editing the view to which you want to apply a contextual filter.

Contextual filters in Views are powerful, but getting them to work perfectly can be a nightmare. This will hopefully save some people from the headaches I had.

My goal was to have a News page that could easily be filtered to only have specific stories. I started with:

• A Taxonomy vocabulary called "Keywords"
• A "News Story" content type
• A field named "Keywords" in the News Story that is a Term Reference type linked to the Keywords taxonomy

Our news stories are imported from Mercury, and the keywords are automatically imported into the Taxonomy vocabulary.

The goal is to have a page that lists all our news stories at example.gatech.edu/news.  A simple view can handle that easily. With a correctly configured contextual filter, we can add a taxonomy term to the end of the URL, and the view will automatically filter itself down to just the stories tagged with a term. Basically:

• example.gatech.edu/news will list all news stories
• example.gatech.edu/news/robotics will list all news stories with the keyword "robotics"
• example.gatech.edu/news/music will list all news stories with the keyword "music"

Neat, right? The problem is, contextual filters can be a nightmare to set perfectly.

Part 1: Create the Basic View

1. Create a new view at Structure -> Views -> Add. We set ours to show content of type News, sorted newest first.
2. Make sure the "Create a page" box is checked, give it a URL, and set the display format to something simple like unformatted list of linked titles.
3. Save the view and head to the URL to make sure it works. Good? Let's head back and edit that view.

Part 2:  Make the View Advanced!

Make sure you are using the Page display, not the master. Usually when something isn't working, it's because I was not editing the page view.

1. Open the Advanced menu on the right if it isn't already.
2. Select Add next to Contextual filters.
3. Check Content: Has taxonomy term ID in the pop-up and Apply.

On the next page, under "When the filter value is NOT in the URL:"

This controls what the view does when there's nothing added to the end of the view's URL - i.e., in our case, what will show at http://example.gatech.edu/news.  The options include:

• Display all results for the specified field - Shows everything that matches the view's base filter. This is what makes our default news page show all stories.
• Provide default value - Lets you chose a default tag if you want a subset shown.
• Show "Page not found."
• Display a summary.
• Display contents of "No results found."
• Display "Access Denied."

The next section is "When the filter value IS in the URL or a default is provided:"  We used two options:

• Override title - this lets you change the default title. We entered "News stories tagged with %1", which will take the term in the URL and substitute it for the %1. So if you are on example.gatech.edu/news/music, the title will be "News stories tagged with music."
• Specify validation criteria - this is the tricky part. Check this, then:
  • Set Validator to "taxonomy term."
  • Select the "Keywords" vocabulary.
  • Set Filter value type to "Term name converted to Term ID."
  • Check "Transform dashes in URL to spaces in term name filter values."
  • Set Action to take if filter value does not validate to "Display a summary."

Finally, save the filter, then save the view.

Create a Menu

1. Navigate to the Menus page (Structure -> Menus).
2. Select Add Menu.
3. In the Title field, enter a title.
4. In the Description field, enter an optional description.
5. Select Save.

Enable a Menu

Enabling the menu allows it show up in the dropdown list when you want to add a web page to a menu.

1. Navigate to the content type for which you want to enable the menu (e.g. Structure -> Content Type -> Multipurpose Page)
2. Choose Menu Settings
3. Select the checkbox of the menu(s) you want to enable
4. (Optional) Set the "Default Parent Item" to choose whatever menu you want as the default for that particular content type.

Rename a Menu

Note: The default menus cannot be renamed.

1. Navigate to the Menus page (Structure -> Menus).
2. Select Edit Menu.
3. In the Title field, enter a new title.
4. Select Save

1. ​Navigate to Structure > Menus, or you can get there by hovering over the gold primary menu bar until a little cog appears in the upper right-hand corner. Click on the cog.
2. You will see a list of links in your primary menu.
3. Select the Add Link button.
4. In the Path field, enter a path for the link.
   • This can be an internal Drupal path such as "node/add." or an external URL such as http://example.com.
   • Enter <front> to link to the front page.
5. In the Description field, enter the text that will be displayed when a user hovers over the link.
6. Enable any of the following options:
   • Enabled: If the link is not enabled, it will not be displayed in the menu.
   • Expanded: If this option is enabled and the menu link has children, the menu will always appear expanded.
7. In the Parent Link list, select the parent menu of the link.
8. (Optional) In the Weight list, select the relative weight of the link. Links with the "lightest" weight will display higher in a menu. Links with the same weight will display in alphabetical order.
9. Select Save.