fbpx

Columbia Basin Trust

Supporting the ideas and efforts of the people in the Columbia Basin

Home > Private: Website Documentation > Banner (Home Page)

Banner (Home Page)

Several times a year the home page banners on the sites may need to be updated. This is one of the more complex procedures Trust staff may need to carry out, so a procedure checklist has been prepared so you can ensure consistent results when changing banners.

docs-banner-final-screenshot

Updating the Photoshop file

The banner photo must be prepared before upload using this photoshop file: CBT-banner-master-cropped.psd

Each banner is prepared in Photoshop as a layered image with the desired photograph and the banner graphic elements on separate layers. When the banner is to be updated, the procedure below should be followed.Select your new photograph, keeping in mind the horizontal crop and the ‘cutout’ required for the logo. Often photos will work best if they are shot with the banner usage in mind. A generally well-composed photo may – or may not – be appropriate for the banner, depending on whether the story the photo tells will remain strong when the strongly horizontal crop required for the banner is done.

  1. Crop the image into a circular shape on a transparent background. Image dimensions are 1050px by 279px.
  2. Open the image in photoshop and resize to 1050px by 279px or slightly larger.
  3. Copy and paste the image into ‘CBT-banner-image-master.psd’ as a new layer
  4. In the Layers panel, drag the image layer so it is above the green circular shape.
  5. Right click on the image layer and select “create clipping mask”
  6. Hide any other image layers not in use
  7. Go to File > Quick export to PNG
  8. The new banner image is now ready to install.

Installing the New Banner

The new banner photo is uploaded to the Header Right widget area at https://ourtrust.org/wp-admin/widgets.php.  Here are the steps required to upload a new photo.

  1. The header image may be replaced through editing the ‘Visual Editor’ widget placed in the Header Right Widget Area.
  2. The image (.png) is uploaded to the body of the widget using the ‘Add Media’ button.
  3. The CSS Class ‘banner-pic’ must also be included in the widget settings (at very bottom).
  4. Leave the widget title empty.
  5. This has already been done on all three sites, so you should should just need to upload/replace the image to the existing widget in the future. Select the current image | Choose the pencil icon (Edit) from the list of options | Choose Replace from the Image Details window
  6. Using the Media uploader, make sure the alignment is set to none and the image size is original/full size (no resizing, cropping).
  7. Image dimensions need to match PSD provided by Gord Draibye and be .png format.
  8. The new photo will automatically appear in the correct size and location in the home page banner.

 

Upcoming Events

View Calendar
View Calendar
Where is the Trust operating area?
Columbia Basin Trust is grateful to operate on the unceded traditional territories of the Ktunaxa, Lheidli T’enneh, Secwépemc, Sinixt and Syilx Nations.
Skip to content