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 (1600x225 px) 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.
0 Comments