Custom Theming Components
Jump to navigation
Jump to search
From version 7.0+ of the onboarding package, you can create custom themes for the Onboarding components (incl. Sessions, User Documents, Job Board/Job Post). Follow the steps below to allow custom theming.
Guide
Firstly, make sure to apply the "custom" theme to the theme-type property on the component. In addition, hide the theme switch to ensure users don't switch between themes
<job-board
theme-type="custom"
hide-theme-switch="true"
...>
</job-board>
Then, create a custom VisualForce page to host your chosen component and add a style tag in the body of the visualforce page. You can use the styling hooks (available from the Chrome Developer Inspector tool to find the names of these hooks) and you can add overrides like so:
<apex:page showHeader="false" sidebar="false" standardStylesheets="false" controller="GlobalRemotingRouter"
docType="HTML-5.0" applyHtmlTag="false" applyBodyTag="false"
>
<html>
<head>
<title>Jobs</title>
<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" />
<script>
window.performanceStart = new Date();
window['globals'] = {
sessionId: '{!GETSESSIONID()}',
siteUrl: '{!$Site.baseUrl}',
orgUrl: '{!orgUrl}',
userTimezone: '{!userTimezone}',
clientTimezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
}
window['globals'] = globals;
</script>
<script src="/soap/ajax/60.0/connection.js" type="text/javascript"></script>
<script src="{!URLFOR($Resource.b3o__JobBoardResources, 'index.js')}" defer="true" type="module"></script>
<style>
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
div.container {
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div class="container">
<job-board
theme-type="custom"
hide-theme-switch="true"
hide-current-user="false"
...
>
</job-board>
</div>
<style>
/** Add your overrides here */
* {
--color-primary: red;
}
</style>
</body>
</html>
</apex:page>