Advanced Design Styling

Note: You need to put all of these in "Advanced"

Center justify Logo (Resposive)

/* HEADER FLEX LAYOUT */
.amplify-header .container {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap…

A lakeside aerial view with "Welcome", "Read more", and options for Board Meetings, Meter Readings, Employment Opportunities, and Report Leaks.

Change color of carousel gradient to blend with quicklinks.

Chat gpt prompt: need to update this gradient (see below) to be based on this color ______ (color at the top of the quicklinks)
/*change color of…

Catalog Search in nav bar 😬 (works on homepage and internal)

https://bridgeportlibrary.specialdistrict.org/
<script>
(function() {
const targetHref = "/search-the-catalog";
const targetText = "Search the…

Google Translate Options

Text displaying options: Privacy Policy, Website Accessibility, Transparency, powered by Streamline, Sign In.

Add Website Accessibility Statement to Standard Amplify Footer

Contact info and links for Sacramento Metropolitan Fire District, including hours, phone, social media, and website policies.

Custom Amplify Footer

Slightly improved quicklink stacking for mobile NOT BROADLY TESTED

add between styles brackets in advanced design styles

Sticky Header for Mobile (Amplify)

Place this code in the 'Site-wide custom HTML before </head>' field of the Advanced tab to make the header stick to the top of the page for mobile…

Call to Action Underline - Teaser Cards

No dark gradiant on image block

IMPORTANT: These can cause ada errors if not used carefully -- not suggested for customers that will be regularly updating homepage design and adding…

Amplify Social Media Embed (side by side)

example- https://www.ncfireca.gov/amplify-homepage-preview

Quicklinks in 1 row

Put in Advanced - Sidewide

Logo Height

Put in Advanced - Sidewide

Center Quicklinks Titles

Put in Advanced - Sidewide

Less Padding

Put in Advanced - Sidewide

Ease transform quicklinks

.amplify-quicklinks-container .container header:hover {
transform: scale(1.1);
transition: transform 0.3s ease;
}