Community Shares of Wisconsin

Website Maintenance Manual

This manual for the Community Shares of Wisconsin website consists of three parts:

 

  1. The Design Pattern Library Page: A list of the components used to construct our pages
  2. The Sitemap Page: A list of all pages on the site
  3. This Page: A maintenance guide with instructions on various topics

Overview

Our website is developed using the WordPress content management system. WordPress is the most widely used website development tool, estimated to run nearly a third of all websites as of 2021.

WordPress sites get their look and feel from “themes.” Our website is based on the very widely-used Divi theme from Elegant Themes.

When customizing a theme to reflect a given organization’s brand, it’s common to create something called a “child theme” that modifies the base theme (Divi is our base theme). Our site uses a child theme called “Community Shares of Wisconsin – A Divi Child Theme” developed by Andy Giesler of Blazing Moon.

You can learn more about how themes and child themes work at the Envato Tuts post What is a WordPress Child Theme?

You’ll largely manage news posts with standard WordPress tools. Because of its popularity, there’s a great deal of online support and documentation about using WordPress, and the Madison area includes many people experienced in using WordPress.

You’ll largely manage pages with Divi’s page builder, which is a powerful visual editor. Elegant Themes provides excellent tutorials, in both text and video form, for all aspects of using its Divi platform.

Reference: Image Sizes

Hero Image

Width (Pixels)

Height (Pixels)

Notes

Hero Image

1260

400

The large header image on many pages. Though the image must look good at this wide aspect ratio, it’s okay if the image is taller, so long as cropping it to 1260 x 400 looks good. That’s the shortest and widest size at which the site will show this image.

Member Logo

200

200

White background; for the logo to appear in all relevant places, the logo’s file name must be formatted as csw-member-SLUG-logo.IMAGETYPE, for example: csw-member-sierra-club-logo.png and csw-member-chrysalis-logo.jpg

Image in Body Content

400-600

varies

Can vary depending on the content; 4 x 3 (width x height) is a good guideline

Featured Image (ideal)

835

626

WordPress featured image for a post; 4 x 3; larger than this provides no benefit and slows page loading

Featured Image (min)

500

375

WordPress featured image for a post; 4 x 3; smaller than this will blur at some screen sizes

Photo for Testimonial

200

200

Should be roughly square, with the face roughly center-top; larger is okay, but might slow page load times

Photo in 50-50 layout

630

varies

Height can vary depending on the content

Causes: Adding a Cause

Several steps are needed to add a cause to the list that CSW supports.

 

Create Cause Category

  1. On the Admin side, go to Pages > Causes
  2. Enter a name, slug, and description like those of existing causes
  3. Click Add New Cause

Create Logo

  1. Create a logo similar to those on the Our Causes page
  2. The logo must be 500 x 500 pixels
  3. The logo file must be named csw-cause-slug-icon.png — where “slug” is the slug you used above when creating the category

Create Cause Page

  1. Create a new page with the cause’s name
  2. Click Use the Divi Builder
  3. When prompted, choose to clone an existing page
  4. Close from the page _TEMPLATE Cause Page
  5. In the boxes on the right of the screen…check the appropriate cause
  6. …check all member orgs related to the cause
  7. …in the Page Attributes box, set the Parent to be the page Our Causes
  8. Edit the page’s content to be appropriate for the new cause

Edit Individual Member Pages

For each member that’s relevant to this new cause, edit the member’s page (from the Pages list on the Admin menu) and check the new cause’s box

Edit the “Our Causes” Page

  1. Edit the Our Causes page using the back-end editor (from the Pages menu on the admin site)—not the front-end Divi visual editor
  2. In the boxes on the right, check the new cause’s name
  3. Save the page and confirm the cause now appears on the Our Causes page

Hero Images: Alignment

Hero images are very wide, and by default they will remain centered.

That means for smaller screens or narrower browser windows, the far left and right of the image will no longer be visible: Essentially, the browser will zoom in on the center of the image for smaller screens. At certain sizes, we might lose as much as 25% of an image on either side.

For many images that’s fine since many photos have their area of greatest interest somewhere in the middle 50%. This tends to be true of most CSW images.

But if this centering and cropping causes a problem for a hero image where the visual interest is way on the left or the right, we can tell that specific page to focus on a different area of the image rather than on the very center.

To do this:

  1. Edit the Section (blue controls in the Divi editor) for the Hero Image
  2. Go to the Background section of the main Content tab
  3. Under Background Image Position choose something other than Center, as appropriate for the image

Examples:

  • if you want to always keep the upper left portion of the image in view, choose Top Left
  • if you want the bottom middle of the image to be locked into view, choose Bottom Center

Hero Images: Custom Color Bands

Our child theme automatically creates a gray color band behind the title text of hero images.

In general, changes to this band should be made centrally by editing styles for the entire site. (Geek note: You do that either by editing global.css directly or—preferably, if SASS is available—by editing SCSS file _design-patterns.scss)

However, if needed it’s possible to change the color of the band for an individual page. Just bear in mind that page-specific edits will make it much harder in the future to implement site-wide hero style changes, since each of these manually edited pages will have to be edited manually to match the new hero style.

To change the band’s color for a specific page:

  1. Edit the page using Divi’s visual builder
  2. Click the module’s properties gear (the gear in the gray controls) for the text module that has the hero’s title
  3. Go to the Advanced tab
  4. Open the Custom CSS section
  5. Add something like the following CSS to the Main Element section

background-color: rgba(20, 0, 40, 0.7) !important;

This is a CSS color code—and is actually the code used for the hero at the top of this documentation page, specifying a purple bar that’s a little darker than normal. The rgba means you’re numerically specifying the Red, Green, and Blue color components, as well as the Alpha (transparency) weight.

The default color code being used for all pages as of launch is gray with medium opacity:

background-color: rgba(0, 0, 0, 0.5) !important;

Layout: Alternating Text-Image Sections

Imagine you have a page with alternating text/image sections like this:

alternating text-image sections

For a full-width browser on a desktop computer or a laptop, the sections are arranged as shown in the screenshot, which is very reasonable:

  • text #1 – image #1
  • image #2 – text #2
  • text #3 – image #3
  • etc.

But when the browser window is narrow enough—for example, on a tablet or a phone screen—there isn’t room for the text and images to be side-by-side. They collapse int a single column of text and images:

  • text #1
  • image #1
  • image #2
  • text #3
  • text #3
  • image #3
  • etc.

This is confusing for visitors: notice that sometimes two images or two text sections are directly above and below each other. It’s not visually obvious which image goes with which text.

For clarity, on smaller screens we want any “text – image” rows to reverse their content, changing from “text – image” to “image – text” so that all sections begin with an image and follow with text:

  • image #1
  • text #1
  • image #2
  • text #3
  • image #3
  • text #3
  • etc.

To do this, we need to tell any text-image sections that when the screen is too small for text and an image to appear side-by-side, they should reverse the content and show the image first.

If you add a text-image design pattern (50-50 or 67-33) directly from the Divi Library, you’re golden: This fix is already in place.

However, if you ever create a layout like this from scratch, you’ll need to make the fix yourself to all rows where text appears on the left: 

 

  1. Go into Row Settings (the purple gear)
  2. Go to the Advanced tab
  3. Open CSS ID & Classes
  4. In “CSS Class” add this text: fifty-fifty-reverse
  5. Save

Members: Adding a Member

Several steps are needed to add a member to CSW’s family.

 

Create Member Category

  1. On the Admin side, go to Pages > Member Orgs
  2. Enter a name, slug, and description like those of existing members
  3. Click Add New Member Org

Create Logo

  1. Create a logo similar to those on the Our Members page
  2. The logo must be 200 x 200 pixels with a white background
  3. The logo must be a JPG or a PNG file
  4. The logo file must be named csw-member-slug-icon.png — where “slug” is the slug you used above when creating the category
  5. Upload the logo to the media library
  6. Note: It’s fine if WordPress append some characters to the end of the file name—for example, csw-member-connextions-logo-e1610565872118.jpg

Create Member Page

  1. Create a new page with the member’s name
  2. At the top, edit the page’s slug so that it’s the same as the slug you used above; this is necessary for the member’s link on the “Our Members” page to work
  3. Click Use the Divi Builder
  4. When prompted, choose to clone an existing page
  5. Close from the page _TEMPLATE Member Page
  6. In the boxes on the right of the screen…check the appropriate member
  7. …check all causes related to the member
  8. …in the Page Attributes box, set the Parent to be the page Our Members
  9. Add the member’s logo as the Featured Image for their page
  10. Edit the page’s content to be appropriate for the new member

Edit Individual Cause Pages

  1. For each cause that’s relevant to this member, edit the cause’s page (from the Pages list on the Admin menu) and check the new member’s box
  2. Save, then confirm that the new member now appears on that cause’s page.

Edit the “Our Members” Page

  1. Edit the Our Members page using the back-end editor (from the Pages menu on the admin site)—not the front-end Divi visual editor
  2. In the boxes on the right, check the new member’s name
  3. Save the page and confirm the member now appears on the Our Members page

Members: Removing a Member

To remove a member, we only need to undo a few of the steps we took when creating the member. This is because some of the member’s data will remain on the site. It just won’t be prominently featured for visitors—for example, the member won’t be listed on the Our Members page.

 

  1. Edit their category. On the Admin side, go to Pages > Member Orgs and edit the category description to be “Former Member Group”
  2. Remove the member from Cause pages. For all causes related to this member, edit the cause’s page and uncheck that member’s box
  3. Remove the member from the Our Members page. Edit the Our Members page and uncheck the member’s box
  4. Delete the member’s page. From the Admin side go to Pages, edit the member’s page, and in the Publish box in the right-hand column click Move to Trash (or if for any reason you want to keep the page but make it inaccessible to visitors, in that same Publish box edit the status from Publish to Draft)