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

• Place your image file in your colleges branding section folder 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/locations
    e.g. docroot/sites/default/branding/locations/conference-center.png

  • 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-

...

• theme]/partials/_branding.scss

...

• Add a line for your

...

• 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

Merge Changes to Pantheon

...