Page Comparison

...

<div id="branding-img" class="admissions-records students">

...

Prepare and place the image

• Prepare an image with the high height and width dimension dimensions of 1600x225 pxpixels

• Name the image the same as the CSS class name you found above, make sure it is all lowercase letters and includes dashes instead of spaces

e.g. rename Admissions and Records1600x255.PNG to admissions-records.png

• If your image is for a section, place your image file in your colleges branding section folder Place the image into its respective branding folder, create the folder if one doesn’t exist
  

  Image Added

  • Award: docroot/sites/default/branding/awards
    e.g. docroot/sites/default/branding/awards/airline-operations.png

  • Location: docroot/sites/default/branding/

  sections

  • locations
    e.g. docroot/sites/default/branding/

...

• • locations/

...

• • conference-

...

• • center.png

  If the image is for a program or an award page, place the image into its respective branding folder, create the folder if one doesn’t exist

  • Program: docroot/sites/default/branding/programs
    e.g. docroot/sites/default/branding/programs/aviation.png

  • Section: docroot/sites/default/branding/sections
    e.g. docroot/sites/default/branding/

...

• • sections/

...

• • admissions-

...

• • records.png
    

Add the style

• In your code editor, open docroot/sites/default/themes/[site-dirtheme]/partials/_branding.scss

• Add a line for your section's banner image using the class name noted earlier in the appropriate area: parent, section, or sub-section

  /* Section */
  #branding-img.admissions-records { background-image:url(#{$site_branding_path}/sections/admissions-records.png); }

• Save and recompile your college's SCSS folder

• If using the Lando development stack, you can use lando gulp

• The git status command will show your modified _something.scss files and the recompiled style.css and style.css.map files.

...

• Refresh your web browser, you may need to clear Drupal caches to see changes

...