How to add a banner image to a section in the college theme with SCSS.
Instructions
Follow the repo’s README.md instructions to begin the code editing workflow.
Place your image file in [site-dir]/branding/sections in your college site folder (e.g. rsc/branding/sections/admissions-records.png
)
Open a browser and navigate to the a page with the image to replace. Hover over the image and right click and select “Inspect” to view HTML source for the image. Find the div id="branding-img"
element wrapper. Note the class names for this div element.
<div id="branding-img" class="admissions-records students">
In your code editor, open [site-dir]/themes/[site-dir]/partials/_branding.scss in your site's theme folder. Add a line for your section's image using the class name noted earlier.
/* 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 dev stack you can use lando gulp
.
Refresh your web browser. May need to clear Drupal cache lando drush cc all
.
Follow the README.md instructions to push your changes as a pull request.
Add Comment