### HCA Get In Touch Button Styles Source: https://www.wheelhousedmg.com/insights/podcast/episode-05-the-path-to-hipaa-compliant-web-analytics/ Defines the styling for the 'Get In Touch' button specific to the HCA (Healthcare) context. It features a distinct yellow background, a border matching the background, rounded corners, dark text, and specific margins. ```css .hca-get-in-touch-btn { background-color: #FED448; border: 2px solid #FED448; border-radius: 30px; color: #003d31; padding: 12px 24px; width: 168px; margin-top: 24px; margin-bottom: 54px; } ``` -------------------------------- ### Prefetch Configuration Source: https://www.wheelhousedmg.com/capabilities/ A JSON object defining prefetching strategies for web resources. It specifies conservative eagerness for documents that match certain criteria and exclude others like specific WordPress paths or no-prefetch elements. ```json {"prefetch":[{"source":"document","where":{"and":[{"href_matches":"\/\*"},{"not":{"href_matches":["\/wp-*.php","\/wp-admin\/\*","\/wp-content\/uploads\/\*","\/wp-content\/\*","\/wp-content\/plugins\/\*","\/wp-content\/themes\/save-ferris\/\*","\/\*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]} ``` -------------------------------- ### Prefetch Configuration Source: https://www.wheelhousedmg.com/insights/podcast/ Configuration object for prefetching resources, specifying conditions for conservative eagerness. It defines rules for which links to prefetch based on their href attributes and excludes specific patterns. ```JSON { "prefetch": [ { "source": "document", "where": { "and": [ { "href_matches": "\\/*" }, { "not": { "href_matches": [ "\\/wp-*.php", "\\/wp-admin\\/*", "\\/wp-content\\/uploads\\/*", "\\/wp-content\\/*", "\\/wp-content\\/plugins\\/*", "\\/wp-content\\/themes\\/save-ferris\\/*", "\\/*\\?(.+)" ] } }, { "not": { "selector_matches": "a[rel~=\"nofollow\"]" } }, { "not": { "selector_matches": ".no-prefetch, .no-prefetch a" } } ] }, "eagerness": "conservative" } ] } ``` -------------------------------- ### General Button Styles Source: https://www.wheelhousedmg.com/insights/articles/category/technical-services/ Styles for general buttons, such as the HCA 'Get in Touch' button, defining background color, border, radius, padding, and margins. ```css .hca-get-in-touch-btn { background-color: #FED448; border: 2px solid #FED448; border-radius: 30px; color: #003d31; padding: 12px 24px; width: 168px; margin-top: 24px; margin-bottom: 54px; } ``` -------------------------------- ### Custom Component and Responsive Styles Source: https://www.wheelhousedmg.com/capabilities/our-technology/lighthouse/ This snippet contains CSS for custom components like webinar contact buttons and sample audit page elements. It includes styles for button appearance, icon sizing, and responsive adjustments for layout and margins based on screen size. ```css .webinar-contact-btn { display: inline-block; margin-top: 1rem; vertical-align: middle; } .webinar-contact-btn a { padding: 12px 24px; font-size: 1rem; } .news-sub-btn input { cursor: pointer !important; } .about-icon { width: 60px !important; } .podcast-summary { color: #8C8CA1 !important; } @media (min-width: 768px) { .webinar-contact-btn { margin-left: 96px; margin-right: 96px; } } @media (min-width: 1024px) { .webinar-contact-btn { margin-left: 112px; margin-right: 112px; } } .hidden-field-ruid { display: none; } .gap-1em { gap: 1em; } .gap-2em { gap: 2em; } .sample-audit-centered-group { display: flex; justify-content: center; align-items: center; width: 100%; padding: 20px; } .sample-audit-block { margin: auto; max-width: 375px; min-height: 250px; margin-bottom: 32px; } .centered-container { display: flex; flex-direction: column; align-items: center; text-align: center; } .sonar-link { font-size: 1.5rem !important; } .sample-audit-button, .audit-button a { background-color: #FED448; color: #003d31; } .audit-images-container { display: grid; grid-template-columns: repeat(4, 1fr); } .audit-images-card img { margin: auto !important; } .audit-accordion { max-width:1200px; margin: auto !important; } .audit-images-card { margin: 10px; background-color: #f9f9f9; color: #f9f9f9; text-align: center; } @media (max-width: 768px) { .audit-images-container { grid-temp ``` -------------------------------- ### CSS Custom Property Example Source: https://www.wheelhousedmg.com/capabilities/digital-advertising/display-programmatic-advertising/ A CSS rule demonstrating the use of a custom property `contain-intrinsic-size` within a media query-like selector, potentially for optimizing image rendering or layout. ```css img:is([sizes="auto" i], [sizes^="auto," i]) { contain-intrinsic-size: 3000px 1500px; } ``` -------------------------------- ### Healthcare Contact Form Styling Source: https://www.wheelhousedmg.com/capabilities/digital-advertising/paid-social-advertising/ Specific styles for a 'Get in Touch' button and a general contact button within a healthcare context. Includes button background colors, borders, padding, and border-radius. ```css .hca-get-in-touch-btn { background-color: #FED448; border: 2px solid #FED448; border-radius: 30px; color: #003d31; padding: 12px 24px; width: 168px; margin-top: 24px; margin-bottom: 54px; } .wpf-hca-contact-btn { background-color: #f9f9f9 !important; border: 2px solid #003d31 !important; border-radius: 30px !important; color: #003d31 !important; padding: 12px 20px 30px 20px !important; text-decoration: none; } ``` -------------------------------- ### General CSS Styling and Theming Source: https://www.wheelhousedmg.com/capabilities/digital-strategy-seo/local-seo/ This snippet encompasses a broad range of CSS rules for styling various HTML elements and components. It includes definitions for font sizes, font families, layout gaps, specific component styles (like WPForms variables and buttons), and responsive adjustments. The styles are designed to create a consistent visual theme across different parts of a web application. ```css font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;}.has-xs-font-size{font-size: var(--wp--preset--font-size--xs) !important;}.has-sm-font-size{font-size: var(--wp--preset--font-size--sm) !important;}.has-base-font-size{font-size: var(--wp--preset--font-size--base) !important;}.has-lg-font-size{font-size: var(--wp--preset--font-size--lg) !important;}.has-xl-font-size{font-size: var(--wp--preset--font-size--xl) !important;}.has-2-xl-font-size{font-size: var(--wp--preset--font-size--2-xl) !important;}.has-3-xl-font-size{font-size: var(--wp--preset--font-size--3-xl) !important;}.has-4-xl-font-size{font-size: var(--wp--preset--font-size--4-xl) !important;}.has-5-xl-font-size{font-size: var(--wp--preset--font-size--5-xl) !important;}.has-6-xl-font-size{font-size: var(--wp--preset--font-size--6-xl) !important;}.has-7-xl-font-size{font-size: var(--wp--preset--font-size--7-xl) !important;}.has-8-xl-font-size{font-size: var(--wp--preset--font-size--8-xl) !important;}.has-9-xl-font-size{font-size: var(--wp--preset--font-size--9-xl) !important;}.has-sans-font-family{font-family: var(--wp--preset--font-family--sans) !important;} :where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;} :where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;} :root :where(.wp-block-pullquote){font-size: 1.5em;line-height: 1.6;}:root { --wpforms-field-border-radius: 3px; --wpforms-field-border-style: solid; --wpforms-field-border-size: 1px; --wpforms-field-background-color: #ffffff; --wpforms-field-border-color: rgba( 0, 0, 0, 0.25 ); --wpforms-field-border-color-spare: rgba( 0, 0, 0, 0.25 ); --wpforms-field-text-color: rgba( 0, 0, 0, 0.7 ); --wpforms-field-menu-color: #ffffff; --wpforms-label-color: rgba( 0, 0, 0, 0.85 ); --wpforms-label-sublabel-color: rgba( 0, 0, 0, 0.55 ); --wpforms-label-error-color: #d63637; --wpforms-button-border-radius: 3px; --wpforms-button-border-style: none; --wpforms-button-border-size: 1px; --wpforms-button-background-color: #066aab; --wpforms-button-border-color: #066aab; --wpforms-button-text-color: #ffffff; --wpforms-page-break-color: #066aab; --wpforms-background-image: none; --wpforms-background-position: center center; --wpforms-background-repeat: no-repeat; --wpforms-background-size: cover; --wpforms-background-width: 100px; --wpforms-background-height: 100px; --wpforms-background-color: rgba( 0, 0, 0, 0 ); --wpforms-background-url: none; --wpforms-container-padding: 0px; --wpforms-container-border-style: none; --wpforms-container-border-width: 1px; --wpforms-container-border-color: #000000; --wpforms-container-border-radius: 3px; --wpforms-field-size-input-height: 43px; --wpforms-field-size-input-spacing: 15px; --wpforms-field-size-font-size: 16px; --wpforms-field-size-line-height: 19px; --wpforms-field-size-padding-h: 14px; --wpforms-field-size-checkbox-size: 16px; --wpforms-field-size-sublabel-spacing: 5px; --wpforms-field-size-icon-size: 1; --wpforms-label-size-font-size: 16px; --wpforms-label-size-line-height: 19px; --wpforms-label-size-sublabel-font-size: 14px; --wpforms-label-size-sublabel-line-height: 17px; --wpforms-button-size-font-size: 17px; --wpforms-button-size-height: 41px; --wpforms-button-size-padding-h: 15px; --wpforms-button-size-margin-top: 10px; --wpforms-container-shadow-size-box-shadow: none; } .webinar-contact-btn { display: inline-block; margin-top: 1rem; vertical-align: middle; } .webinar-contact-btn a { padding: 12px 24px; font-size: 1rem; } .news-sub-btn input { cursor: pointer !important; } .about-icon { width: 60px !important; } /* Correcting font change after changing the tailwind color namings */ .podcast-summary { color: #8C8CA1 !important; } @media (min-width: 768px) { .webinar-contact-btn { margin-left: 96px; margin-right: 96px; } } @media (min-width: 1024px) { .webinar-contact-btn { margin-left: 112px; margin-right: 112px; } } .hidden-field-ruid { display: none; } .gap-1em { gap: 1em; } .gap-2em { gap: 2em; } /* SAMPLE AUDIT PAGES */ .sample-audit-centered-group { display: flex; justify-content: center; align-items: center; width: 100%; padding: 20px; } .sample-audit-block { margin: auto; max-width: 375px; min-height: 250px; margin-bottom: 32px; } .centered-container { display: flex; flex-direction: column; align-items: center; text-align: center; } .sonar-link { font-size: 1.5rem !important; } .sample-audit-button, .audit-button a { background-color: #FED448; color: #003d31; } .audit-images-container { display: grid; grid-template-columns: repeat(4, 1fr); /* padding-bottom: 50px; */ /* padding-right: 200px; */ /* padding-left: 200px; */ } .audit-images-card img { margin: auto !important; } .audit-accordion { max-width:1200px; margin: auto !important; } ``` -------------------------------- ### LazySizes JavaScript Configuration Source: https://www.wheelhousedmg.com/insights/podcast/ JavaScript configuration for the lazySizes library. It initializes the library and sets the load mode to 1, which typically means loading images as soon as they are in the viewport. ```JavaScript window.lazySizesConfig = window.lazySizesConfig || {}; window.lazySizesConfig.loadMode = 1; ``` -------------------------------- ### HCA Page Styling Source: https://www.wheelhousedmg.com/capabilities/our-technology/lighthouse/ Contains styles for the new HCA page, including padding for the hero section, adjustments for header text responsiveness, and styling for a primary 'Get in Touch' button. Also includes styles for image sections and specific column layouts. ```css /* Styles for new HCA page on 6.7.24 - move to privacy.scss when time allows */ .hca-hero { padding-bottom: 36px !important; } .hca-header-text { /* margin-top: 24px; */ } .hca-get-in-touch-btn-primary { background-color: #003d31; border: 2px solid #003d31; border-radius: 30px; color: white; padding: 12px 24px; width: 168px; margin-top: 24px; margin-bottom: 54px; } .hca-image-section, .webinar-banner-img img { margin-left: auto; margin-right: auto; } .solutions-card-columns { padding-bottom: 0 !important; } .hca-inthedark-columns { padding-bottom: 54px; } ``` -------------------------------- ### HCA Page Specific Styles Source: https://www.wheelhousedmg.com/capabilities/digital-strategy-seo/ Contains styles for the new HCA page, including padding for hero sections, button styling for 'Get in Touch', and centering for images and banners. Also includes styles for thank you pages with arrow links. ```css /* Styles for HCA page elements */ .hca-hero { padding-bottom: 36px !important; } .hca-get-in-touch-btn-primary { background-color: #003d31; border: 2px solid #003d31; border-radius: 30px; color: white; padding: 12px 24px; width: 168px; margin-top: 24px; margin-bottom: 54px; } .hca-image-section, .webinar-banner-img img { margin-left: auto; margin-right: auto; } .hca-inthedark-columns { padding-bottom: 54px; } /* Styles for HCA thank you page */ .arrow-link { display: flex; align-items: center; justify-content: center; } .back-arrow { font-size: 2rem; line-height: 1; margin-right: 8px; } @media screen and (max-width: 499px) { .hca-header-text { max-width: 94%; } .thank-you-message { max-width: 350px; margin: auto; } .arrow-link { flex-direction: column; } .back-arrow { margin-right: 0; } } @media screen and (min-width: 500px) and (max-width: 1023px) { .hca-header-text { max-width: 80%; } } /* Responsive adjustments for client logos */ @media screen and (max-width: 781px) { .client-logo img { height: 80px !important; } } ``` -------------------------------- ### Web Prefetch Configuration Source: https://www.wheelhousedmg.com/insights/podcast/all-about-ai-mike-king/ Defines prefetching strategies for web resources to improve performance. It specifies conditions for prefetching based on URL patterns and excludes specific elements. ```json { "prefetch": [ { "source": "document", "where": { "and": [ { "href_matches": "\/*" }, { "not": { "href_matches": [ "\/wp-*.php", "\/wp-admin\/*", "\/wp-content\/uploads\/*", "\/wp-content\/*", "\/wp-content\/plugins\/*", "\/wp-content\/themes\/save-ferris\/*", "\/*\\?(.+)" ] } }, { "not": { "selector_matches": "a[rel~=\"nofollow\"]" } }, { "not": { "selector_matches": ".no-prefetch, .no-prefetch a" } } ] }, "eagerness": "conservative" } ] } ``` -------------------------------- ### HCA Page Specific Styles Source: https://www.wheelhousedmg.com/insights/podcast/all-about-ai-mike-king/ Styles tailored for the Health Care Act (HCA) related pages, including hero section padding, header text adjustments, and styling for the primary 'Get in Touch' button. ```css .hca-hero { padding-bottom: 36px !important; } .hca-header-text { } .hca-get-in-touch-btn-primary { background-color: #003d31; border: 2px solid #003d31; border-radius: 30px; color: white; padding: 12px 24px; width: 168px; margin-top: 24px; margin-bottom: 54px; } ``` -------------------------------- ### Prefetch Configuration JSON Source: https://www.wheelhousedmg.com/case-studies/insulet-digital-advertising-guided-by-first-party-data/ This JSON object defines a prefetching strategy for web resources. It specifies conditions under which resources should be prefetched, excluding specific paths and elements like nofollow links. ```json { "prefetch": [ { "source": "document", "where": { "and": [ { "href_matches": "/\*" }, { "not": { "href_matches": [ "/wp-*.php", "/wp-admin/*", "/wp-content/uploads/*", "/wp-content/*", "/wp-content/plugins/*", "/wp-content/themes/save-ferris/*", "/*\?(.+)" ] } }, { "not": { "selector_matches": "a[rel~=\"nofollow\"]" } }, { "not": { "selector_matches": ".no-prefetch, .no-prefetch a" } } ] }, "eagerness": "conservative" } ] } ``` -------------------------------- ### WPForms General Contact Form Styles Source: https://www.wheelhousedmg.com/capabilities/technical-services/hipaa-compliant-data-solutions/ Applies specific styling to general contact forms created with WPForms, including input fields, text areas, submit buttons, and confirmation messages. It also includes styles for a 'get in touch' button. ```css /*WP Forms General Contact Styles (To replace FF)*/ .wpf-gen-contact-form { width: 95%; background-color: #003d31 !important; padding-top: 24px !important; padding-bottom: 24px !important; margin: 0 auto !important; } .wpf-gen-contact-form input, .wpf-hca-contact-form input { /* width: 90% !important; */ border-radius: 30px !important; color: #003d31 !important; /* height: 36px; */ } .wpf-gen-contact-form textarea, .wpf-hca-contact-form textarea { /* width: 90% !important; */ border-radius: 30px !important; color: #003d31 !important; } .wpf-gen-contact-form .wpforms-submit-container { text-align: center !important; } .wpf-gen-contact-btn { width: 125px; background-color: #FED448 !important; border-radius: 30px !important; color: #003d31 !important; padding: 12px 24px !important; } .wpforms-form input[type=submit]:hover, .wpforms-form input[type=submit]:active { background-color: #fffff; } #wpforms-confirmation-17570, #wpforms-confirmation-17829 { background-color: #003d31 !important; border: none !important; } .wpf-gen-contact-success, .wpf-hca-contact-success { text-align: center !important; color: #f9f9f9 !important; font-size: 1.25rem !important; } .hca-get-in-touch-btn { background-color: #FED448; border: 2px solid #FED448; border-radius: 30px; color: #003d31; padding: 12px 24px; width: 168px; margin-top: 24px; margin-bottom: 54px; } .wpf-hca-contact-btn { background-color: #f9f9f9 !important; border: 2px solid #003d31 !important; border-radius: 30px !important; color: #003d31 !important; padding: 12px 20px 30px 20px !important; text-decoration: none; } ``` -------------------------------- ### Case Study Responsive Layouts (Two Cards) Source: https://www.wheelhousedmg.com/capabilities/our-technology/lighthouse/ Manages the layout of case study cards on smaller screens, ensuring two cards are centered and stacked appropriately. Adjusts image heights and card margins for optimal display on mobile and tablet. ```css @media (max-width: 781px){ .right-column-two-cards { display:flex; justify-content: center; margin-top: 94px !important; } .case-study-large-image img { height: auto !important; } .case-study-second-card-block { margin-top: 56px !important; } .left-column-two-cards { display: flex; justify-content: center; margin-top: 24px !important; } .left-column-two-cards figure { float: none !important; margin-inline-start: 0 !important; margin-inline-end: 0 !important; } .bottom-card { margin-top: 24px; } } ``` -------------------------------- ### JSON Prefetch Configuration Source: https://www.wheelhousedmg.com/capabilities/our-technology/lighthouse/ Configuration object for prefetching resources. It specifies criteria for matching URLs to prefetch, excluding specific patterns and elements, and sets a conservative eagerness level. ```json { "prefetch": [ { "source": "document", "where": { "and": [ { "href_matches": "\\/*" }, { "not": { "href_matches": [ "\\/wp-*.php", "\\/wp-admin\\/\\*", "\\/wp-content\\/uploads\\/\\*", "\\/wp-content\\/\\*", "\\/wp-content\\/plugins\\/\\*", "\\/wp-content\\/themes\\/save-ferris\\/\\*", "\\/*\\?(.+)" ] } }, { "not": { "selector_matches": "a[rel~=\"nofollow\"]" } }, { "not": { "selector_matches": ".no-prefetch, .no-prefetch a" } } ] }, "eagerness": "conservative" } ] } ``` -------------------------------- ### Case Study Card Layout and Responsiveness Source: https://www.wheelhousedmg.com/insights/podcast/ Styles for case study cards, including responsive adjustments for column layouts and image heights. Ensures content is well-presented on various devices. ```css @media (max-width: 781px){ .right-column-two-cards { display:flex; justify-content: center; margin-top: 94px !important; } .case-study-large-image img { height: auto !important; } .case-study-second-card-block { margin-top: 56px !important; } .left-column-two-cards { display: flex; justify-content: center; margin-top: 24px !important; } .left-column-two-cards figure { float: none !important; margin-inline-start: 0 !important; margin-inline-end: 0 !important; } .bottom-card { margin-top: 24px; } } ``` -------------------------------- ### WordPress Block and Theme Styling Source: https://www.wheelhousedmg.com/capabilities/our-technology/lighthouse/ This snippet includes CSS rules for common WordPress block styling, such as font size presets, layout adjustments for flex and grid containers, and specific styling for pullquotes. It also defines variables for WPForms styling, covering fields, labels, buttons, and containers. ```css .has-x-large-font-size { font-size: var(--wp--preset--font-size--x-large) !important; } .has-xs-font-size { font-size: var(--wp--preset--font-size--xs) !important; } .has-sm-font-size { font-size: var(--wp--preset--font-size--sm) !important; } .has-base-font-size { font-size: var(--wp--preset--font-size--base) !important; } .has-lg-font-size { font-size: var(--wp--preset--font-size--lg) !important; } .has-xl-font-size { font-size: var(--wp--preset--font-size--xl) !important; } .has-2-xl-font-size { font-size: var(--wp--preset--font-size--2-xl) !important; } .has-3-xl-font-size { font-size: var(--wp--preset--font-size--3-xl) !important; } .has-4-xl-font-size { font-size: var(--wp--preset--font-size--4-xl) !important; } .has-5-xl-font-size { font-size: var(--wp--preset--font-size--5-xl) !important; } .has-6-xl-font-size { font-size: var(--wp--preset--font-size--6-xl) !important; } .has-7-xl-font-size { font-size: var(--wp--preset--font-size--7-xl) !important; } .has-8-xl-font-size { font-size: var(--wp--preset--font-size--8-xl) !important; } .has-9-xl-font-size { font-size: var(--wp--preset--font-size--9-xl) !important; } .has-sans-font-family { font-family: var(--wp--preset--font-family--sans) !important; } :where(.wp-block-post-template.is-layout-flex) { gap: 1.25em; } :where(.wp-block-post-template.is-layout-grid) { gap: 1.25em; } :where(.wp-block-columns.is-layout-flex) { gap: 2em; } :where(.wp-block-columns.is-layout-grid) { gap: 2em; } :root :where(.wp-block-pullquote) { font-size: 1.5em; line-height: 1.6; } :root { --wpforms-field-border-radius: 3px; --wpforms-field-border-style: solid; --wpforms-field-border-size: 1px; --wpforms-field-background-color: #ffffff; --wpforms-field-border-color: rgba( 0, 0, 0, 0.25 ); --wpforms-field-border-color-spare: rgba( 0, 0, 0, 0.25 ); --wpforms-field-text-color: rgba( 0, 0, 0, 0.7 ); --wpforms-field-menu-color: #ffffff; --wpforms-label-color: rgba( 0, 0, 0, 0.85 ); --wpforms-label-sublabel-color: rgba( 0, 0, 0, 0.55 ); --wpforms-label-error-color: #d63637; --wpforms-button-border-radius: 3px; --wpforms-button-border-style: none; --wpforms-button-border-size: 1px; --wpforms-button-background-color: #066aab; --wpforms-button-border-color: #066aab; --wpforms-button-text-color: #ffffff; --wpforms-page-break-color: #066aab; --wpforms-background-image: none; --wpforms-background-position: center center; --wpforms-background-repeat: no-repeat; --wpforms-background-size: cover; --wpforms-background-width: 100px; --wpforms-background-height: 100px; --wpforms-background-color: rgba( 0, 0, 0, 0 ); --wpforms-background-url: none; --wpforms-container-padding: 0px; --wpforms-container-border-style: none; --wpforms-container-border-width: 1px; --wpforms-container-border-color: #000000; --wpforms-container-border-radius: 3px; --wpforms-field-size-input-height: 43px; --wpforms-field-size-input-spacing: 15px; --wpforms-field-size-font-size: 16px; --wpforms-field-size-line-height: 19px; --wpforms-field-size-padding-h: 14px; --wpforms-field-size-checkbox-size: 16px; --wpforms-field-size-sublabel-spacing: 5px; --wpforms-field-size-icon-size: 1; --wpforms-label-size-font-size: 16px; --wpforms-label-size-line-height: 19px; --wpforms-label-size-sublabel-font-size: 14px; --wpforms-label-size-sublabel-line-height: 17px; --wpforms-button-size-font-size: 17px; --wpforms-button-size-height: 41px; --wpforms-button-size-padding-h: 15px; --wpforms-button-size-margin-top: 10px; --wpforms-container-shadow-size-box-shadow: none; } ``` -------------------------------- ### WordPress Color, Border, and Gradient Utility Classes Source: https://www.wheelhousedmg.com/insights/podcast/all-about-ai-mike-king/ This CSS snippet provides a comprehensive set of utility classes for applying predefined colors, border colors, and gradient backgrounds within a WordPress environment. It leverages CSS variables for theme customization and ensures consistent styling across various elements. ```css --wp--preset--color--vivid-purple) !important;}.has-primary-background-color{background-color: var(--wp--preset--color--primary) !important;}.has-secondary-background-color{background-color: var(--wp--preset--color--secondary) !important;}.has-tertiary-background-color{background-color: var(--wp--preset--color--tertiary) !important;}.has-dark-background-color{background-color: var(--wp--preset--color--dark) !important;}.has-brand-white-background-color{background-color: var(--wp--preset--color--brand-white) !important;}.has-success-background-color{background-color: var(--wp--preset--color--success) !important;}.has-slate-background-color{background-color: var(--wp--preset--color--slate) !important;}.has-light-slate-background-color{background-color: var(--wp--preset--color--light-slate) !important;}.has-accent-background-color{background-color: var(--wp--preset--color--accent) !important;}.has-outlines-background-color{background-color: var(--wp--preset--color--outlines) !important;}.has-transparent-background-color{background-color: var(--wp--preset--color--transparent) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-primary-border-color{border-color: var(--wp--preset--color--primary) !important;}.has-secondary-border-color{border-color: var(--wp--preset--color--secondary) !important;}.has-tertiary-border-color{border-color: var(--wp--preset--color--tertiary) !important;}.has-dark-border-color{border-color: var(--wp--preset--color--dark) !important;}.has-brand-white-border-color{border-color: var(--wp--preset--color--brand-white) !important;}.has-success-border-color{border-color: var(--wp--preset--color--success) !important;}.has-slate-border-color{border-color: var(--wp--preset--color--slate) !important;}.has-light-slate-border-color{border-color: var(--wp--preset--color--light-slate) !important;}.has-accent-border-color{border-color: var(--wp--preset--color--accent) !important;}.has-outlines-border-color{border-color: var(--wp--preset--color--outlines) !important;}.has-transparent-border-color{border-color: var(--wp--preset--color--transparent) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;} ``` -------------------------------- ### CSS Styling for Responsive Images and Layouts Source: https://www.wheelhousedmg.com/case-studies/providence-appointment-bookings-soar-with-one-wheelhouse-approach/ This CSS snippet defines styles for responsive image handling, including intrinsic sizing, and general layout utilities for containers and call-to-action elements. It ensures elements adapt correctly across different screen sizes and contexts. ```css img:is([sizes="auto" i], [sizes^="auto," i]) { contain-intrinsic-size: 3000px 1500px } .safe-svg-cover{text-align:center} .safe-svg-cover .safe-svg-inside{display:inline-block;max-width:100%} .safe-svg-cover svg{fill:currentColor;height:100%;max-height:100%;max-width:100%;width:100%} .cta-container { margin: 2.5rem 1rem; } .column-slider-block__content { text-align: center; } .column-slider-block__cta { margin-top: 1.5rem; } .column-slider-block__cta h2 a { font-size: 2.5rem; line-height: 45px; font-weight: 500; text-decoration: none; } .column-slider-block__cta h2 a span { font-size: 1rem; line-height: 22px; font-weight: 400; text-decoration: none; } .column-slider-block__cta svg { display: inline-block; } /* Assign slider-left-column class to the column container that houses the texts opposite the slider */ .slider-left-column { justify-content: space-between; padding-top: 56px; padding-bottom: 64px; padding-left: 16px; padding-right: 16px; margin-bottom: 0; } .case-study-slider { width: 100%; max-width: 1200px; margin: 0 auto; } .case-study-slider__slides .image-container { width: 100%; aspect-ratio: 5 / 4; } .case-study-slider__slides .image-container img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .case-study-slider__slides ul.slick-dots { background-color: #003D31; } .case-study-slider__slides .slick-dots li.slick-active bu ``` -------------------------------- ### Schema.org JSON-LD for Case Studies Page Source: https://www.wheelhousedmg.com/case-studies/ This JSON-LD script provides structured data for the case studies page, detailing its type, URL, name, associated images, and organizational information for search engines. ```json { "@context": "https://schema.org", "@graph": [ { "@type": "CollectionPage", "@id": "https://www.wheelhousedmg.com/case-studies/", "url": "https://www.wheelhousedmg.com/case-studies/", "name": "Privacy-First Digital Marketing Case Studies | Wheelhouse DMG", "isPartOf": { "@id": "https://www.wheelhousedmg.com/#website" }, "primaryImageOfPage": { "@id": "https://www.wheelhousedmg.com/case-studies/#primaryimage" }, "image": { "@id": "https://www.wheelhousedmg.com/case-studies/#primaryimage" }, "thumbnailUrl": "https://www.wheelhousedmg.com/wp-content/uploads/2024/08/Insulet-AML-Featured-Image.jpg", "description": "Discover Wheelhouse DMG's digital marketing case studies and see how our first-party data strategies drive growth and success for healthcare brands.", "inLanguage": "en-US" }, { "@type": "ImageObject", "inLanguage": "en-US", "@id": "https://www.wheelhousedmg.com/case-studies/#primaryimage", "url": "https://www.wheelhousedmg.com/wp-content/uploads/2024/08/Insulet-AML-Featured-Image.jpg", "contentUrl": "https://www.wheelhousedmg.com/wp-content/uploads/2024/08/Insulet-AML-Featured-Image.jpg", "width": 1920, "height": 841 }, { "@type": "WebSite", "@id": "https://www.wheelhousedmg.com/#website", "url": "https://www.wheelhousedmg.com/", "name": "Wheelhouse DMG", "description": "", "publisher": { "@id": "https://www.wheelhousedmg.com/#organization" }, "potentialAction": [ { "@type": "SearchAction", "target": { "@type": "EntryPoint", "urlTemplate": "https://www.wheelhousedmg.com/?s={search_term_string}" }, "query-input": { "@type": "PropertyValueSpecification", "valueRequired": true, "valueName": "search_term_string" } } ], "inLanguage": "en-US" }, { "@type": "Organization", "@id": "https://www.wheelhousedmg.com/#organization", "name": "Wheelhouse DMG", "url": "https://www.wheelhousedmg.com/", "logo": { "@type": "ImageObject", "inLanguage": "en-US", "@id": "https://www.wheelhousedmg.com/#/schema/logo/image/", "url": "https://www.wheelhousedmg.com/wp-content/uploads/2024/03/cropped-WH-Icon-mark-Green-512x512-1.png", "contentUrl": "https://www.wheelhousedmg.com/wp-content/uploads/2024/03/cropped-WH-Icon-mark-Green-512x512-1.png", "width": 512, "height": 512, "caption": "Wheelhouse DMG" }, "image": { "@id": "https://www.wheelhousedmg.com/#/schema/logo/image/" } } ] } ```