How to set up a responsive footer

Feb 17, 2015

One of the most noticeable changes within the Core Publisher Responsive Theme is how logos and links are added to and displayed in your site's footer. We've replaced the "flexi-footer" from the old Core Publisher with a cleaner, trimmed down responsive footer. The new footer style is actually two separate but cohesive footers that allow stations to feature partner logos as well as supplementary links depending on the unique needs of individual stations. 

An example responsive footer with a few partner logos and a couple of links.

For those who are familiar with the "flexi-footer," it's important to note that this new feature is not the same thing. The flexi-footer gave stations a way to add dozens of links to different categories — almost like a site map. That capability is now housed within the flexi menu at the top of site pages. This new system allows for a clutter-free presentation across devices.  

The Partner Footer  is a space built exclusively for logos of partner organizations that can be used as links to that organization's website. The Auxiliary Links Footer is designed to be a place for supplemental links to things like your privacy policy, about page, or EEO report. Both footers are persistent across all pages on your site. 

Let's go over how to add and edit items within each of the responsive footer spaces.

 

INSTRUCTIONS

  

To edit either footer you are going to start by logging into your site's station admin account and clicking the Manage Queues tab at the top of the page. You can also access both footer admin menus from the Edit Queues menu located on the left side of any admin view page. 

  Editing the Partner Footer

  1. Click the Partner Footer option from the Edit Queues menu on the left rail of the admin view or the Manage Queues tab at the top of the page.
  2. There is an optional field titled Partner label text where you may enter a label for your footer; e.g. "Our Partners" or "WTST is proud to partner with"
  3. To begin uploading your partner logos click the Select Media button in the first column of the table. 
  4. In the window that appears you may choose to upload a new file by clicking the Choose File button, selecting a file from your hard drive, and then clicking Upload, or you may search for a file in your library of previously uploaded media. (This Dropbox file contains the most common partner logos that many stations use, or you can create your own.)

  5. Once you have uploaded or chosen a file, click the Submit​ button. You will see the image appear in the Logo portion of the table.*

  6. Enter the full URL of the partner organization website whose logo you just added in the Image URL field. (Optional)

  7. Enter the desired alt text that will appear when users mouse over the image in the Image Alt Text field. (Optional)

  8. If you would like the logo link to to open a new tab or window, check the box in the New Window? field. (Optional)

  9. In the Queue Settings box, the Number of Rows field must be changed to the total number of partners/logos that you would like to add. Once you have entered the appropriate number click the Rebuild button. The necessary number of rows will appear in the table. 

  10. Repeat steps 3-9 for each partner logo that you would like to display in your partner footer. 
  11.   You can modify the order that logos are displayed by clicking and dragging the cross hair icons located in the top right corner of each row in the logo edit table.

*Note: If you do not include an image file with your Partner Logo item, that item will not be displayed in your footer. 

Editing the Auxiliary Links Footer

  1. Click the Auxiliary Links Footer option from the Edit Queues menu on the left rail in the admin view or the Manage Queues tab at the top of the page.
  2. In the Text column of the table enter the text you would like displayed for whatever you are linking to; e.g. "Privacy Policy"
  3. In the URL column enter the full URL including "http://" for whatever you are linking to. 
  4. If you would like the link to to open a new tab or window, check the box in the New Window? field. (Optional)

  5. In the Queue Settings box, the Number of Rows field must be changed to the total number of auxiliary links that you would like to add. Once you have entered the appropriate number click the Rebuild button. The necessary number of rows will appear in the table. 

  6. Repeat steps 2-4 for each auxiliary link that you would like to display in your auxiliary links footer.

  7. You can modify the order that links are displayed by clicking and dragging the cross hair icons located in the top right corner of each row in the edit table. *

  *Note: Because Core Publisher responsive is built to adjust to variable browser sizes, links cannot be arranged by column like with the old "flexi-footer." Links will stack on top of one another in smaller browser windows. 

Questions?

Contact Station Relations at http://info.ds.npr.org/support.html