Exp Cloud CSS & Head Markup

About

This GIST contains CSS and Head Markup for Experience Cloud sites (included Site Starter).

Head_Markup.html

<!-- Favicon 
     To show a customers favicon, get the icon (use can use the Chrome extension Get Favicon, upload to the Files/Asset Library, 
     with public access, uncomment the line, and replace FILENAME) -->
<!-- <link rel="icon" type="image/x-icon" href="/sfsites/c/resource/FILENAME"> -->

<!-- Font Awesome v6 icon library (free kit with limit page views, do not reuse)
     Add 	https://ka-f.fontawesome.com and https://kit.fontawesome.com to Setup / CSP Trusted Sites and Allow site for connect-src, font-src, and style-src.
     For details on use, see https://fontawesome.com/search?m=free -->
     <script src="https://kit.fontawesome.com/7868a80ab9.js" crossorigin="anonymous"></script>

Site.css

/*  Experience Cloud Site CSS - Latest Update: 4/24/23 
    See https://gist.github.com/gregejankowski/9244de7330ebcb2dca7062bbcda60ef4 for the latest version */

/* Make all section with backgrounds (images or color) extend right and left */
.forceCommunitySection .cb-section_background, .forceCommunitySection .cb-section_backgroundOverlay {background-size: cover !important; left: -114px !important; width: 1664px !important;}

/* ------------------------------------------------------------------------------------------------------------------------------- */
/* --- Font, buttons, and Breadcrumbs --- */
/* BASE FONT SIZE */
html {font-size: 100%;}
/* Tablet */
@media only screen and (max-width: 820px) {html {font-size: 90%;}}
/* Mobile */
@media only screen and (max-width: 480px) {html {font-size: 80%;}}

/* FONTS - Standard font tags with SLDS equivalents. Using rem to insure site-wide consistancy */
H1, .slds-text-heading_large, .profileName
{font-size:3.0rem !important; font-weight: 400 !important;}

H2, .slds-text-heading_medium, .slds-card__header-title.slds-truncate 
{font-size: 1.7rem !important; font-weight: 400 !important;}

H3, .slds-text-heading_small, .slds-text-heading--small, .baseCard__header-title-container, .selfServiceArticleListItem .article-head
{font-size: 1.3rem !important; font-weight: 400 !important;}

p, .slds-text-body_regular, .siteforceThemeLayoutStarter, .slds-text-heading_x-small, .forceCommunityTopArticleItem .article-title,
.forceCommunityCreateRecordButton .triggerLabel, .forceCommunityCreateRecordForm .button 
{font-size: 1.1rem !important; font-weight: 400 !important;}

/* FONTS - Other common SLDS fonts used on the site */
.slds-text-body_small {font-size: .9rem !important;}
.slds-text-title {font-size: .9rem !important;}
.slds-text-title_caps {font-size: .9rem !important;}
.slds-text-title_bold {font-size: .9rem !important;}

/* FONTS/LINKS - Remove all underlines from links */
a:link, a:visited, a:hover, a:active 
{text-decoration: none !important;}

/* Tabs */
.tabHeader {font-size: 1.4rem !important;}
/* Tabs for mobile */
@media only screen and (max-width: 480px)
{.tabHeader {font-size: 1.1rem !important;}}

/* Branding tokens */
.brand-color {color: var(--dxp-g-brand) !important;}
.brand-color-1 {color: var(--dxp-g-brand-1) !important;}

/* --- Buttons ---  */
.askCommunityBtn,           /* Ask a Question  */ 
.selfServiceContactSupport, /* Contact Support */ 
.contactSupportButton,      /* Contact Support */ 
.contactRequestButton {font-size: 1rem !important; height:46px; margin: auto !important; width:230px !important;} /* Contact Us Button */ 

/* Ask & Contact Us */   
.cta_header {font-size: 1.3rem !important; font-weight: 400 !important; margin-bottom: -6px;} 
/* @media only screen and (min-width: 48em) {.siteforceNapiliFooter .cta-btn {margin: auto !important;}} */

/* Follow Button */
.forceCommunityFollow .button {font-size: 1rem !important; width:230px !important;}    
.forceCommunityFollow.group {justify-content:center; width:230px !important;}
.forceCommunityFollow.group.twoButton {width: 230px !important;}

/* Button (HTML) Styling */
.button-style {font-size:1rem; height:46px; border-radius:5px; width:230px;}
/* Mobile */ @media only screen and (max-width: 480px) {html .button-style {font-size:1rem; height:36px; border-radius:5px; width:230px;}}

/* Quick Create Button */
.forceCommunityCreateRecordButton button,
.forceCommunityCreateRecordButton .triggerLink,
.forceCommunityCreateRecordButton {font-size:1rem !important; border-radius:5px !important; font-weight:400 !important;}

/* --- Card Formatting --- */
/* Common CSS for background and border update to site components */
.component-border,
    .selfServiceArticleLayout .content							/* Article Detail */,  
	.forceCommunityCmsContentItemDetailLayout                	/* CMS Connect Detail */,
	.forceChatterCompactFeed									/* Feed Compact */,
	.forceCommunityRecordListDesktop.slds-card					/* Group List */,
	.forceChatterGroupDetailCard								/* Group Detail - About */,
	.forceChatterAddMemberCard									/* Group Detail - Add Member */,
	.forceCommunityLeadInbox									/* Lead Inbox */,
	.forceChatterMessageDetailView.container				    /* Messages */,
	.HealthCloudGAHcCommunityCareTeamList 						/* My Care Plans */,
	.HealthCloudGAHcCommunityTaskList						    /* My Tasks */,
	.forceCommunityUserProfileStats                          	/* My Profile */,
	.forceCommunityUserProfileHeaderDetail .cUserProfileCon,
	.forceCommunityUserRecognitions				  		        /* My Profile - Recognition Badges */,
	.slds-card.slds-card_boundary.forceCommunityUserRecognitions,
	.forceCommunityUserSettingsInternal                      	/* My Settings */,
	.forceCommunityUserRecognitions .userRecognitionsHeader 	/* Profile - My Badges */,
	.selfServiceSimilarArticles42 ul							/* Related Articles */,
	.forceCommunityLwcRecordDetail .slds-card                   /* Record Details */,
    .forceCommunityRecordListDesktop                         	/* Record List */,
	.forceRecordLayout.slds-page-header,
	.forceCommunityRecordListStandard.forceCommunityObjectHome,
	.forceCommunityRecordListCompact,
	.forceChatterFeedInner				                    	/* Record feed */,
	/* .uiTabset--default .tabs__content							 Tabs */
	.forceCommunityTopicCatalog                               	/* Topic Catelog */,
	.forceCommunityTopicDescription.slds-card-wrapper		   	/* Topic Description */,
	.forceCommunityTopicMetrics.slds-card-wrapper			   	/* Topic Metrics */,
	.forceChatterStyle--default.forceChatterFeedElementFullView .cuf-element /* Question detail */,
	.selfServiceTopicArticleList								/* Topic Details - Articles */, 
	.forceCommunitySearch .forceSearchResultsGridView .searchScroller        /* Search */
	{background-color:#ffffff !important; border-color:#d4d4d4 !important; border-radius:5px !important; border-style:solid !important; border-width:1px !important; padding:12px !important;}


/* -------------- Standard component CSS overrides -------------- */

/* Articles and Knowledge */
/* 	Article Content - Make the content full-width */  
.selfServiceArticleLayout.article-column {padding-left: 0px !important; padding-right: 0px !important; padding-bottom: 12px !important;}   
/* 	Article Content - Title */
.selfServiceArticleLayout .article-head, .selfServiceArticleLayout .breadcrumb {margin: 0px !important;}
/* 	Article Content - Summary */
.selfServiceArticleLayout .article-summary {margin-bottom: 18px !important; margin-top: 6px !important;}

/* Hide article sections */
/* 	Article Content - Hide the summary form the title section */
.selfServiceArticleHeaderDetail .article-summary {display: none;}
/* 	Article Content - Hide 2nd and 3rd sections of knowledge article page layout */
.article-column .test-id__section:nth-of-type(2), .article-column .test-id__section:nth-of-type(3), .article-column .test-id__section:nth-of-type(4), .forcePageBlockItemView .tooltipIcon 
	{display: none !important;}
/* 	Article Content - Section padding */
.forcePageBlockItemView.forcePageBlockItem.slds-col>.slds-form-element.slds-form-element_readonly {padding-bottom: 12px !important;}
/* 	Article Content - Section titles */
.selfServiceArticleLayout .forcePageBlockSectionView.full .test-id__field-label, .selfServiceArticleLayout .forcePageBlockSectionView.full .test-id__grouped-field-label-icon {
    font-size: .8rem !important; font-weight: 400 !important; margin-bottom: 12px !important;}
/* 	Article Content - Reset font size
   	NOTE: This is done to display a consistant font size without any unwatned overrides.*/
.slds-rich-text-editor__textarea, .slds-rich-text-editor__output, 
.selfServiceArticleLayout .forcePageBlockSectionView.full .test-id__field-value {font-size: initial !important;}
/* 	Article Content - Case Deflection & Trending Articles */
.selfServiceTopicTrendingArticles42 li>.comm-topic-trending-articles__item>a {
    background-color: white; border-color: #D4D4D4; border-style: solid; border-width: 1px; border-radius: 5px; margin-top:18px; padding: 12px;}
/* 	Article Content - Related Articles */
.selfServiceSimilarArticles42 li>.comm-related-articles__item>a {padding-bottom:12px !important; padding-top:12px !important; border-width: 0px;}
.comm-related-articles__item .slds-p-bottom_medium {word-break: normal !important;} /* Fix the word break issue */
.comm-related-articles__item {font-size: 1rem !important;}
/* 	Article Content - Top Articles by Topic
   	This is setup for 3 topics, change to 50% for two topics per row */
.forceCommunityTopArticleList .singleListContainer {padding-bottom: 0px !important; width: 33% !important}
/* 	Article Content Mobile - Top Articles by Topic */
@media only screen and (max-width: 480px) {.forceCommunityTopArticleList .singleListContainer {padding-bottom: 12px !important; width: 100% !important}}
/* Topic Details FAQs section */
.selfServiceBaseArticleList .article-list {margin-top:0px !important; margin-bottom:12px !important;}
.selfServiceTopicArticleList .selfServiceArticleListItem {padding-top: 0px; padding-bottom: 24px;}
/* --- End Articles and Knowledge --- */

/* B2B Commerce Footer */
.siteforceB2bBody {font-size: 1.3rem !important;}

/* CMS Banner */
.forceCommunityBannerLayout .flagContainer {border-radius: 5px !important;}    

/* CMS Connect description */
.forceCommunityCmsContentCardLayout .contentBox {height: 60px;}

/* Contact Support - Case deflection */
.slds-align_absolute-center.comm-deflection-tracking__buttons {padding-top:12px;}
.slds-align_absolute-center.comm-deflection-tracking {margin-top:64px;}
/* Contact Support - Support Form */
.forceSearchInputLookupDesktop.uiInput .uiInputTextForAutocomplete, .forceSearchInputLookupDesktop.uiInput .uiInputTextForAutocomplete:focus {background: white !important;}

/* Events Calendar background */
.fc.fc-ltr.fc-unthemed {background-color: white;}
.noHeaderBorder[cccalendar-cceventDetails_cceventDetails] {padding-bottom: 0px;}

/* Events Calendar Upcoming Events */
.cccalendar_modal__content[cccalendar-cceventDetails_cceventDetails] {padding-top: 0px;}

/* Featured Topics */
.forceTopicFeaturedTopics, .topicLabel {font-size:1.7rem !important; font-weight:600 !important}
.forceTopicFeaturedTopicItem.topicItem {padding:6px !important;}

/* Feed Compact */
.cuf-retryPanel.forceChatterCompactFeed {display:none;}

/* Feed Publisher */
.oneActionsComposer.uiTabset--task .tabs__item a span.title {font-size: 1.1rem !important;}

/* Group Banner */
.forceCommunityGroupHighlightStencilNapili.forceRecordLayout {background-color : #ffffff;}

/* Group Details */
.forceChatterOutputDescription .gxmorelink {display: none !important;}
.forceChatterOutputInformationBody.gxmorelink {display: none !important;}
.f orceDetailPanelDesktop.slds-card {padding:0px !important;}

/* Groups Tiles */
.forceChatterGroupTileTemplate {border-color:#e8e8e8;  border-radius:5px; border-style:solid; border-width:1px; margin:6px; width:32%}
/* Make the group list full width (non-mobile only) */
@media only screen and (min-width: 768px)
{.forceChatterObjectHomeTileView section {width:100% !important;}
}

/* Header */
/* Menu Item font size, except for mobile */
@media screen and (min-width: 490px) 
{.horizontalMenuItem {font-size: 1rem !important;}  
}

/* Header - User Profile Icon (desktop and mobile) */
.forceCommunityThemeProfileMenu .profile-icon {width: 40px !important; height: 40px !important;}
.comm-user-profile-menu .slds-avatar {width: 40px !important; height: 40px ;}

/* Headline - Reduce the padding at the top of the component */
.forceCommunityHeadline .headlineTitle {padding-top:6px !important;}

/* Hero */
.forceCommunityThemeHeroBase {padding-bottom:48px !important;}

/* Login - Form width to 100% */
.salesforceIdentityLoginForm2 .inputBox {width: 90% !important;}

/* Logo on mobile */
@media only screen and (max-width: 480px)
{	.forceCommunityThemeLogo .logoImage,
    .forceCommunityThemeHeaderCompact .themeLogo {
    /* Uncomment for left justified 
    background-position: left !important; */ 
        max-height: unset !important; height: 48px !important;}}

/* Messages - Top align the messages */
.forceChatterMessageDetailView .messageContent {display: block !important;}

/* My Setting hide top row */
.forceCommunityUserSettingsCustomizable .row:first-child {display:none;}

/* Nav pull-down border */
@media only screen and (min-width: 48em)
{.comm-drilldown-navigation__list[community_navigation-drilldownNavigationList_drilldownNavigationList] {outline: unset !important;}}

/* Omniscripts - My Appointments */
.omniscript-body[data-stepborder='right'][c-vPL234My_AppointmentsEnglish_vPL234My_AppointmentsEnglish] {margin: 0px;  padding: 0px;}

/* Omniscripts - IAM Form */
.slds-form-element__control[vlocity_ins-checkboxGroup_checkboxGroup_slds] span.slds-checkbox[vlocity_ins-checkboxGroup_checkboxGroup_slds] {
    padding-left: 0px !important; text-indent: 0px !important;}

/* Omniscripts - Remove the short underline from OS titles */
.vlc-separator[runtime_omnistudio_omniscript-omniscriptStep_omniscriptStep] {display: none;}

/* Omniscripts - Set font size for OS titles to H2 size */
.omni-stepchart-heading[runtime_omnistudio_omniscript-omniscriptStepChart_omniscriptStepChart],
.os-step-label[runtime_omnistudio_omniscript-omniscriptStep_omniscriptStep] {font-size: 1.6rem !important;}

/* Omniscripts - Title set to H3 and remove underline */
.os-step-label[vlocity_ins-omniscriptStep_omniscriptStep] {font-size: 1.3rem !important;}
.vlc-separator[vlocity_ins-omniscriptStep_omniscriptStep]  {display: none;}

/* Record Banner */
.forceHighlightsStencilDesktop .slds-page-header__detail-row {background-color:rgba(255,255,255,0) !important}

/* Record List component reset title */
.forceCommunityRecordListStandard .listTitle {text-transform: revert !important;}

/* Search Results */
/* Dicussion results background */
.forceCommunitySearch .compactFeed.forceChatterCompactFeed {background-color : #ffffff !important;} 
/* Search results text size above filters */    
.forceSearchScopesList.scrollerWrapper>.slds-nav-vertical__title {display:none;}

/* Suggested Actions */
.slds-m-horizontal_x-small, .slds-m-horizontal--x-small {border-width: 0px; margin-left: 12px; margin-right: 12px; padding: 6px 6px 12px 12px;}
.runtime_communities_nbaNbaCard {margin-bottom: 6px;}

/* Spacing below Search or Buttons */
.forceCommunityThemeHeroStarter .searchRegion {margin-bottom:-12px !important;}

/* Tabs */
.forceCommunityTabset {background-color: rgba(255,255,255,0) !important; min-height: 282px;}
.uiTabset--default .tabs__nav {border-bottom-width: 0px;}
.uiTabset—default .tabs__content 
    {background-color:#ffffff !important; border-color:#d4d4d4 !important; border-radius:5px !important; border-style:solid !important; border-width:1px !important; padding:12px !important;}

/* Tasks sub-tabs */
.runtime_sales_pipelineboardPipelineViewMultipleRecordTypeTabSet .tabs__item a {font-size:1rem !important;}
.forceCommunityRecordListDesktop.forceListViewManager .listDisplays {min-height: 660px;}

/* Tile Menu */
.comm-tile-menu__item-title.community_navigation-tileMenuItemBanner_tileMenuItemBanner {font-size:1.3rem !important; font-weight:600;}

/* Topic details - hide the article summary */
.selfServiceTopicArticleList .selfServiceArticleListItem .article-summary {display:none !important;}

/* Topic Catelog */
.forceCommunityTopicCatalog .topicHierarchy-topBox {border-width: 0px !important; margin-left:12px;}
.forceCommunityTopicCatalog .topicHierarchy-top {font-weight: 400 !important;}

/* User Profile */
.forceCommunityUserProfileBody .cUserProfileCon {margin-top:0px !important; padding-top:0px !important; padding-left:0px !important; padding-right:0px !important; padding-bottom:0px !important;}
.forceCommunityUserProfileBody .cUserProfileDetailCon.large.fullwidth {padding-bottom: 0px; padding-left: 0px; padding-right: 0px;}

/* User Profile Name */
.siteforcePrmBody .cHeader .selfServiceProfileMenuTrigger .profileName, .siteforcePrmBody .cHeader .selfServiceProfileMenu .uiMenuItem a {font-size: 1.2rem !important;}

/* User Profile Badges */
.communitySetupUserRecognitionBadgeItem {width: fit-content !important;}



/* ------------------------------------------------------------------------------------------------------------------------------- */
/* HTML Components CSS - Used for CSS styling of HTML components (e.g., footer, alerts, tooltips, etc.).
   The site CSS for fonts, site specific setting, and AURA components are referenced in the Head Markup.
*/

/* Alerts HTML */
.custom-alerts {background-color:#cccccc; border-color:#e7e9eb; border-radius:5px; border-style: solid; border-width:1px; padding:12px;}
.custom-builder-alerts {background-color:#fe9339; border-color:#e7e9eb; border-radius:5px; border-style: solid; border-width:1px; padding:12px;}

/* Breadcrumbs */ 
.breadcrumb-style {font-size:.9rem; margin-bottom:-22px; margin-top:12px;}

/* Footer  */
.fa {color: #696969; text-align: center; text-decoration: none;}
.fa:hover {opacity: 0.6;}
.fasocial {color:#143058 !important; font-size:24px !important; margin-bottom:24px; margin-top:24px; width: 36px;}
/* FOOTER - Top */ 
.footer-top {background-color: #7dd1c1; padding:6px; width: 100%;} 
/* FOOTER - Bottom
   Common background colors: Default #7E7E7E | Blue #3f4760 | #00589a | Covid #40829b | MedTech/Pharma #49b7de */
.footer-fullwidth {background-color: #7E7E7E; padding:6px; width: 100%;} 
.footer-maxwidth {margin: auto; max-width: 1300px; padding: 18px 0px 18px 0px;}
.footer-text {color: #f0f0f0 !important;}
.footer-text a:link {color: #f0f0f0; text-decoration: none;}
.footer-spacer {color: #A9A9A9 } 
/* FOOTER Desktop */
.footer-center {text-align: center;}
.footer-left {text-align:left;}
.footer-right {text-align: right;}
/* FOOTER Tablet and mobile */
@media only screen and (max-width: 768px)
{.footer-left {text-align: center;}
   .footer-right {text-align: center;}
}

/* HTML icon styling */
.icon-style {margin-left:4px; margin-right:8px; margin-top:2px;}

/* Profile Image title */
.profile-title {justify-content: center; margin-top:-24px;}

/* Section titles. To change the alignment, set justify-content */
.section-title {margin-bottom:-6px; text-align: left;}
.section-title-center {margin-bottom:-6px; text-align: center;}

/* Tooltips */
/* Tooltip container (Show on tablet/decktop and hide on smaller devices) */
@media only screen and (min-width: 768px)
{.custom-tooltip {display: inline-block; padding-left:2px; position: relative;}}
@media only screen and (max-width: 767px)
{.custom-tooltip {display: none;}}
/* Tooltip text */
.custom-tooltip .tooltiptext {bottom: 120%; left:-80%; min-width:320px; opacity: 0;  position:absolute; transition:opacity 0.3s; visibility:hidden;}
/* Show the tooltip text when you mouse over the tooltip container */
.custom-tooltip:hover .tooltiptext {opacity: 1; visibility: visible;}
/* Tooltip text (right justified) */
.custom-tooltip-right .tooltiptext {bottom: 120%; right:12%; max-width:320px; opacity: 0;  position:absolute; transition:opacity 0.3s; visibility:hidden;}
/* Show the tooltip text when you mouse over the tooltip container */
.custom-tooltip-right:hover .tooltiptext {opacity: 1; visibility: visible;}