Menu
Accessibility Tool

This tool uses cookies, click confirm below to use this tool

Confirm

PressShift + a to open/close this menu

Grayscale
Contrast
Invert Colors
Invert
Cursor Size
Cursor
Font Size
Reset Accessibility Options

Expandable Staff Layout

This feature will allow our staff pages to be more customizable than they already are! The HTML structure is based off of our other Divided Features. What makes this feature different? This feature is controlled by a JavaScript file that will allow each individual staff photo to be clicked on and expanded out so that the site visitor can see the staff member’s short biography and even some quotes from that staff member!

For a complete list of best practices, visit the main portlet page: Features

Javascript: Click Here

HTML Structure


<div class="featureWrapper staff">
	<div class="feature">
		<div class="image">
			<a class="expand"> href="">
				<img src="theme/features/feature1.jpg" alt="" />
                <div class="overlay">overlay</div>
			</a>
		</div>
          
        <div class="text">
        	<h2>Feature Title</h2> 
            <!-- Rich text. This is the ONLY area where text elements may be added/edited. --> 
      		<p>Feature content</p>
            <div class="quotes">
              <ul>
                <li>Text Example</li>
                <li>Text Example</li>
                <li>Text Example</li>
              </ul>
            </div>
          </div>
      </div>
   </div><!-- End feature -->
<!-- Copy/paste div.feature and contents for more features of the same type --> 
</div><!-- End featureWrapper -->

Default Styling

2024 © All Rights Reserved | Website Design By: Televox | Login