...
Code Block | ||
---|---|---|
| ||
<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
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-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
Code Block | ||
---|---|---|
| ||
/* 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 recompiledstyle.css
andstyle.css.map
files.
...
Refresh your web browser, you may need to clear Drupal caches to see changes
...