This guide is specific to the UCDC website.
Table of Contents
Our Research
Patients and Families
Researchers and Clinicians
Early Stage Investigators
About Us
Other Things to Know About Drupal
When you log into Drupal, you will see a toolbar across the top of the page:
Content
When you click on Content, you will see this sub-menu:
When you use this toolbar to view things, this is another way to locate pages or information within Drupal.
If you wish to see all content on the site, you can just click on the top “Content” menu item.
From here, you can click on a title to view the page on the live site, or you can click on edit to make updates.
By choosing “Content type” you can search for only specific type of content (not all content types listed are currently being used).
You can also search by “title” if you know the name of the page you are looking for.
Currently, we are using “Basic block” and “Research Study Details”.
To see all Blocks, click on the first “Blocks” under “Add Content” on the left side.
Commonly Used Components / Paragraph Types
Accordion
Used to organize a page when there are multiple, text-heavy topics to cover. Most commonly seen on:
FAQs
Consortia Diseases Studied pages
Prior Publications
Tips
Be sure to open the “Heading” tab and select the desired heading level
If you do not want the first accordion in a series to be open upon page load, add an empty accordion item to the top.
View this component in action on the RDCRN What are Rare Diseases? page.
Blocks and Views
Both of these can be very confusing and too complicated to explain easily in this guide. Please reach out to the DMCC website team for assistance with either of these components. The exception would be making updates to detailed study blocks (explained above) and adding a new detailed study block (also explained above).
Container
Placing components/content inside of a container guarantees that a margin will be added to the left and right sides of the content. It is often used for Image Left Text Right, Image Right Text Left, Video Left Text Right, and Accordions.
You must select a Container Type after inserting the component or the correct CSS will not be applied.
Consortium sites feature three container types:
Container Fluid
Container - Most commonly used
Card Container - Best for use on Meet Our Team pages, or anywhere else multiple cards will be displayed.
Heading
Insert a heading from levels H1* through H5. *H1 is commonly used to insert the page title at the top of all content. Keep in mind, this component will always display the title centered. If you wish to insert a heading with a left or right alignment, use Simple Text.
Please always consider accessibility and search engine optimization rules when inserting headings. The purpose of heading levels is to organize content, not apply stylistic choices such as font size or color. You cannot skip a heading level, e.g. H2 followed by H4. It is acceptable to do the following:
H1
H2
H2
H3
H4
H2
H3
Image Left Text Right
Used when you want text to appear alongside an image. The image displays to the left and a heading (optional), descriptive text, and button (optional) to link to any webpage, internal or external, are displayed to the right. View this component in action on the RDCRN Our Network page.
Image Right Text Left
Used when you want text to appear alongside an image. The image displays to the right and a heading (optional), descriptive text, and button (optional) to link to any webpage, internal or external, are displayed to the left. Most commonly used in conjunction with Image left text right to create a staggered look, seen here on the Network website. View this component in action on the RDCRN Our Network page.
Resource Accordion
Resource accordions can house all of the above components. They are most commonly used on the Resources for Patients & Families and Resources for Researchers & Clinicians pages to organize multiple pieces of related content. View this component in action on the RDCRN Resources for Researchers & Clinicians page.
Video Left Text Right
Used when you want text to appear alongside a video. The video displays to the left and a heading (optional), descriptive text, and button to link to watch the video on its native platform (optional) are displayed to the right.
View this component inside of Resource Accordions on the RDCRN Resources for Researchers & Clinicians page.
Cards
Team Card
Commonly used on consortium site Meet Our Team pages (see CEGIR for example), but can be utilized any time you want a card with an image at the top, text in the middle, and a CTA button on the bottom.
Select the Container component first, select “Card Container” from the Container Type dropdown menu
Insert a General Card and select “Team Card*” from the Card Type dropdown menu.
General Cards also have a “Columns” dropdown menu. Select the desired width based on the number of cards you would like to appear in each row.
*The Team Card image style is managed in Configuration > Media > Image styles > Team Member </admin/config/media/image-styles/manage/team_member>. “Scale and Crop” prevents the image from being stretched or squished if it does not perfectly fit the specified width and height.
View this component inside of Resource Accordions on the FCDGC Meet Our Team page.
General Card
Used to create a card with a heading that features a background color for emphasis, followed by an optional image (you can skip this is you only want text in the card), then body text against a white/neutral background, and finally, a CTA button. See “Team Card” instructions above, but select “General Card” from the Card Type dropdown menu instead.
Card with Shadow
Similar in design to the General Card, but adds a white border around the colored heading and adds a shadow to the perimeter of the card, making it look more like the news cards displayed on each website’s homepage.
HTML
Source Code
To avoid adding unwanted design elements to content that is copied and pasted, toggle to the source code to paste in content or clean the content first by pasting it into a plain text document (Note Pad or Text Edit), then pasting the cleaned content into Drupal.
Sometimes content edited in rich text can wind up with spacer HTML inserted in place of a traditional space. If this happens enough, it can ruin the way content is displayed on page, especially when a browsers window is made smaller. You can replace this code with a space when it is between words.
Add Space Before/After a Paragraph
To add space before, after, or to the side of a paragraph, use HTML as follows.
<p style=”margin-bottom: 5%;”>
<p style=”margin-top: 5%;”>
<p style=”margin-right: 5%;”>
<p style=”margin-left: 5%;”>
Add Space to the Left of a Bullet or Numbered List
Current CSS does not automatically add a margin (indent) to the left of a bullet or numbered list. To add this, you can use the following HTML:
<ul style="margin-left: 3rem;">
<ol style="margin-left: 3rem;">
NOTE:
You can replace the 5% with any desired number. You can also replace with with code akin to font size, e.g. 3rem.
You can also add this same style code to add space above a line break, e.g. <hr style=”margin-top: 5%;” />
Sample of code in use: <p class="text-align-center" style="margin-bottom: 5%;">The RDCRN’s <a href="/patient-advocacy-groups/cpag">Coalition of Patient Advocacy Groups</a> creates resources for patients and patient advocacy groups to advance the cause of rare disease research and improve patient outcomes throughout the network. To date, they have hosted two webinar series, one on navigating rare disease clinical trials and another featuring a variety of resources related to rare disease advocacy work:</p>
On this page: https://www.rarediseasesnetwork.org/patient-advocacy-groups/cpag/webinars
Tables
Tables generally have a gray background with gray text, which has presented accessibility issues. We should probably ask the dev team to update the CSS, but I’ve found adding this code to its own Simple Text component on a page with a table does the trick.
<style type="text/css">tbody, td, tfoot, th, thead, tr {
border-width: 1px;
}
table {
border: 1px;
border-color: black;
}
tr td, tr th {
border: 1px solid #000000;
}
tr {
background: #ffffff;
}
</style>
API Content
Adding Study Detail Pages
Study detail URLs are automatically created on the related consortium site when a study is created and marked “Active” in Django.
All information featured in the right column on the page is populated via API and must be updated in Django.
To add study detail information (HTML) text to the left-side of the page, you must do the following:
Go to Structure > Block layout > Add custom block
Create a Research Study Details block </block/add/research_study_details>
Insert the protocol number in the title (this will make your life easier later)
Enter all study detail text and format as required. Please make sure to implement headings in an accessible manner (in order, no skipping levels).
Should you need to edit this block, you can find it here Structure > Block layout > Custom block library </admin/structure/block/block-content>
Save the new block, then navigate to Structure > Block layout > Custom block library </admin/structure/block>
Scroll to the Research Study Detail section and click “Place Block”
Search for your block name and click the “Place Block” button
Click the “Configure” button
Make sure to deselect the “Display title” box
Under “Visibility,” select “Page” and enter the path alias for the related study detail page, e.g. /research-study/7701 (do not use the full website address). If you skip this step the newly created study detail page will populate onto every detailed study page.
Click the “Save” button. Your Study Detail text will not appear on the left side of the Study Detail page.
How to update the Menu options
Once you’ve logged into Drupal, click on “Structure”, then “Menus”, then “Main navigation”.
This will bring up the menu links (with dropdown items) you see at the top of the website. From here you can edit menu items, add menu items, hide menu items and change the order of menu items.
To add a new menu item, click the “Add link” button
Add the title of the menu item under “Title”. You can choose to either have that link take you to a page, or it can just be a top menu display with no link – example “About Us” is not a link to an About Us page, it’s just the top menu item or heading for this sub category drop down list – for this just add <nolink> in the “Link” box.
To determine where this falls within an existing drop-down category, look to the right side of the page and click on “Main Navigation” below the “Parent link”
Select where your new menu item should reside. Click Save.
You will notice right below the “Parent link” a “Display settings” option. This will determine where this new link will reside within the “parent link”. This is a weighted choose and can be confusing to figure out. There is an easier way to position links where you would like within a menu.
To move a menu item, go to the main navigation view. Locate the menu item you’d like to move – in our example we are looking at the main menu header “Researchers and Clinicians” and the drop-down link “Refer a Patient”. We’re going to move “Refer a Patient” from being the bottom drop-down link to being the first drop-down link. To do this, click on “Refer a Patient”. When this click turns yellow, move the item up to the top position. If we were now to click save, this would display at the top of the drop-down for this menu item.
Also notice the blue check box on the right. This means that the link is active and viewable on the live site. There may be a situation where you don’t want to delete a link, but you don’t want it to visible on the live site. An example would be something like an event you would like to promote. You could add the /event drop-down menu link under “Latest News”, but once the event is in the past, you could uncheck this box but keep it for future use.
Drupal Tools
Content
Content →Add content
Select the component you’d like to add such as a “basic page”. If you click on “Content”, this will show you a display of all content on the site.
Content→Blocks
Select this to add a block. If you click on the word “Blocks” a list of all blocks will display. From here, you can choose to make edits to the block content.
Content→Comments
This is not currently used.
Content→Feeds
This currently feeds news articles from the RDCRN site that feature your consortium.
Content→Files
This lists all files used on the site and where they can be found.
Content→Media
If you click on “Media” all media added to the site will display. You can also hover on “Media” to add a new media file.
Structure
Block Layout
Discussed some above – can be complex. Reach out to DMCC for more help.
Block Types
Discussed some above – can be complex. Reach out to DMCC for more help.
Comment Types
Not currently being used
Contact Forms
Not currently being used
Content Types
Lists the current content types available. Please reach out to the DMCC for assistance.
Display Modes
Please reach out to the DMCC for assistance
Feed Types
Discussed above for RDCRN news. Please reach out to the DMCC for assistance.
Media Types
This lists which types of media can be used on the site and some specifications around each type. We recommend you not make any changes to these.
Menus
Discussed above
Views
This is complicated. Please reach out to the DMCC for assistance.
Webforms
This is set to capture signups for newsletters.
Configuration
There should be no need to make any changes under any of the options listed under this menu item. Please reach out to the DMCC with any questions.
Reports
...
Link to login to Django: (this will provided during training)
Link to login to Drupal: (this will be provided during training)
RDCRN Login Process Documentation
To login to our systems, you will need to download the free Duo App from either the Apple or Google store. Duo Two-Factor Authentication for RDCRN Documentation.
Table of Contents:
Our Research
Patient and Families
Researchers and Clinicians
Funding Opportunities (this page is duplicated in the main under Early Stage Investigators)
Early Stage Investigators
Funding Opportunities (this page is duplicated in the main under Researchers and Clinicians)
News and Events
About Us
Drupal Miscellaneous Information