Drupal - Advanced: Themes and Theme Switcher

Themes and the Theme Switcher

Themes

There are now a few themes for the different sites within Bryn Mawr’s website:

• GSSWSR – https://www.brynmawr.edu/socialwork
• GSAS – https://www.brynmawr.edu/gsas
• Postbac – https://www.brynmawr.edu/postbac
• Marketing – https://www.brynmawr.edu
• Inside Bryn Mawr – https://www.brynmawr.edu/inside
• Alumnae Bulletin – https://www.brynmawr.edu/bulletin

Themes have two different settings:

• Main Theme, which is where the piece of content “lives”
• Display Theme(s), which are places the piece of content can “visit”

Let’s dive into what that means.

Theme Switcher

The first thing you may notice when you visit brynmawr.edu is the top navigation bars have changed.

Depending where you are, you will see a different  branded color band under the main navigation and logo to help you know where you are.

Here, since we are in the GSSWSR site you can see the GSSWSR logo on the left and you can see the Wisteria color band across the top . Depending on the page you are on, you may see the words Social Work in the breadcrumb link inside that Wisteria color band..  The Main Menu (News, Admissions & Aid, Academics, etc) is unique for GSSWSR site.

If we clicked on the “Bryn Mawr Home”, it would take us to the Marketing site.

Here is an example of a page within the Marketing site so you can see a few things have changed with the theme.

In addition to the color band switching from Wisteria to Lantern, you can see that the logo has changed.  The Main Menu for that particular site has also changed slightly.

Traversing the Navigation

If you opened the main menu while on the page in the example above, you would see it tell you where you are. Here you can see that the expanded menu says you are in the Bryn Mawr Home site, and you are on the Major, Minor and Concentrations page because that menu item is lighter in color and has a bronze vertical left-border to it.

If you want to visit any of the Bryn Mawr sites, like the Grad Schools or the Inside site, you can expand the "hamburger" menu in the upper right of the page

Once the menu opens, you can expand the Grad Programs and More menu option

From there, you can select another area of the site to visit. 

By changing to a different area, you will see that the choices in the yellow menu change to match the navigation of that part of the site. The area whose menu you are viewing is shown just below the Grad Programs and More area. Here you can see we are in the Graduate School of Social Work and Social Research area of the site.  Further, you can see that we are on the M.S.S. Certificate Programs page because the menu item is highlighted with a lighter color and a bronze left-border.

No matter which Homepage you visit

• GSSWSR – https://www.brynmawr.edu/socialwork
• GSAS – https://www.brynmawr.edu/gsas
• Postbac – https://www.brynmawr.edu/postbac
• Marketing – https://www.brynmawr.edu
• Inside Bryn Mawr – https://www.brynmawr.edu/inside

You will see engaging content that belongs (or “lives”) in that (Main) theme. There will also be links or teasers of content (like news or events lists) that belong (or “live”) in another (Main) theme but are getting referenced (or “visiting”) in that current (Display) theme.

Main Theme

The Main theme is a setting that is default set for all content, but may be adjusted on  Announcements, Basic Page, Event, Homepage, News and Story, if your permissions level permits. This Main theme tells the website that this piece of content “lives in” the Main theme or, in other words, should have the Main theme used when you visit the direct link to this content.

Display Theme(s)

The Display theme is a setting that is set for Announcements, Events, News and Story.

The Display theme tells the website that this piece of content is “visiting” or, in other words, is allowed to be displayed in all the themes that are selected in this field, whether as a direct piece of content (like a Basic Page or News) or via a Flexible Content Item that has one of these Display themes set.

Each piece of content that has these fields, should at the very least have the same Main and Display theme checked so that it can appear in that theme.

Tags

The Tags field is a setting for Announcements, Events, News and Story that helps the website categorize the content for display.

The Display Theme and Tags work together to pull the desired content into a display on a page.

Themes and Permissions in Drupal

Web Steward

As a Web Steward, you would only be able to create or edit a News and Basic Page.

You would be able to submit an Event or Announcement for review by Communications.

You would not be able to set the Main Theme.

Therefore, the piece of content that you create would retain the default Main theme of Inside Bryn Mawr or Marketing.

If you needed a piece of content to “live” in a different theme (like Graduate School of Social Work and Social Research), you would need to contact Communications communications@brynmawr.edu to have them set a different Main theme for that content.

Note how they will appear greyed out and unable to be selected/deselected.

Theme Editor

Certain Web Stewards can be assigned a supplemental role of Theme Editor if they are working to create and edit content for any of the Graduate Schools or Postbac.

If you find you need this supplemental role, please reach out to either Communications  communications@brynmawr.edu  or Web Services help@brynmawr.edu  to have your request granted.

What can this supplemental role do? This role of Theme Editor will allow you as a Web Steward to additionally set the Main Theme field for content you are able to create and edit.

Setting and editing theme settings

When editing a page, on the right side of the Edit Screen you will see something that says Themes or Themes and Options. You can open it and set the Main Theme field to be something other than the default setting.

The example below is a News page.

As such, we will need to set the Display Theme to include the new Main Theme we have chosen, so the content will always show up in it’s “home” theme.

There are two other Display Themes selected in our example, Marketing and Inside Bryn Mawr.

Because it is a News page, it has a default Display Theme of Inside Bryn Mawr and therefore this can not be deselected.

By setting these Theme fields on a News page, you are helping the website know which ones to display on a News listing page. This example, below, is the GSSWSR News listing page.

As you can see, the two articles (Deb Plotnick and Book by GSSWSR Alum) has no label on it, because it is

• Main Theme=GSSWSR
• Display Theme=GSSWSR

The other article show in the listing with the label “Alumnae Bulletin” because they have

• Main Theme=Alumnae Bulletin
• with an additional Display Theme=GSSWSR.

The Main Theme can be considered your News articles’ home base.

This is where your News article will live and it also dictates what theme your News article will have.

Display Theme(s) dictate what other themes your News article can be displayed in – this includes being displayed in other Listing Pages as well as News 3-Up and News & Contact Flexible Content Items that may exist on Basic Pages.

Whenever a News article is published, it automatically gets added to the All College News hub on Inside Bryn Mawr. This listing page contains all News articles regardless of their Main Theme or Display Theme settings.

For more information, please see the documentation on News Content Type.

Syndication

By using the News 3-Up or News & Contact Flexible Content Items in a Basic Page, you can bring your News article into a Basic Page by either referencing a tag you associated with the News article or via manual selection.

If the Display Theme isn’t set in the News page for where you want it to display (like Postbaccalaureate Premedical Program), it may not display on a Postbac page that has a News 3-up, even though it has the correct tag (like STEM).

For more information, please see the documentation on News 3-Up and/or News & Contact.

Session Video

This is a Panopto Video and may require you to sign-in to view.

Special Role Session – Homepage and Theme Editor