Utilize the layouts part of the career site builder to define the layouts look. This is more advanced than using the normal built-in functions of the builder.
General
-
A layout is the "design" of a career site/page. A site can have several layouts, but only one default layout can be chosen.
-
Layouts are used to define the non-dynamic elements of the site, such as the header, footer, function pages, and the HTML, CSS and JavaScript for the site using the layout.
Styling Elements
The Styling tab is used to add parameters that can be easily called in the code. The Styling tab consists of colors, fonts, images and files.
Note
This is only used to create the parameters and changes here may not be effective, unless the parameter is used in the code.
-
Colors: Color parameters let you pick the desired by clicking the HEX code box (#xxx) to bring up a gradient color picker. This also includes RGBA colors.
-
Fonts: Font parameters are used to define specific fonts that can be called in the code. The options are Arial, Proxima Nova, and Verdana. It is possible to create and upload your own font to the career site.
-
Images and Files: These sections work the same way by allowing you to upload a file or an image.
-
Sections: Sections lets you add side-wide sections that will appear on any page that uses this layout. New sections consist of the standard sections type.
-
Content: Content cannot be removed or edited and is used to show the sections set up on the pages part of the editor.
Pages
The Pages section allows you to define the setup of all the functionality pages. This includes job ads, application pages, application error/applied pages, event pages, form pages, candidate profiles, and feedback pages.
-
You can choose the setup of the page under and click .
-
This will bring up a section setup box. Add new sections here, create hard coded sections, and many other types of functions.
Note
Each sub page has different options available for the Content to change dynamic setup.
Note
Job Agents includes the fact box data, map, and social sharing activators.
Other features
-
Styling: Lets you define Section height, Background Image/Video, Color overlay of the page, and create Custom styling when enabled.
-
Layout: Layout has two options- default and custom code. Default keeps overall layout structure and custom codes allows for a customized job ad. Custom code consists of HTML, JavaScript, and CSS.
-
HTML: These sections are used to edit the hard coded HTML on the page. Not everything can be edited as some hidden code in the HTML <head> needs to remain intact to preserve functionality.
-
The <HTML> head section: Allows you to add HTML code to the layouts <head>. Using a <script> tag is also possible if a script that runs from the <head> tag is needed.
-
The <HTML> body section: This section will let you change the code of the site wide HTML <body>, if customized HTML is needed across all pages. Keep in mind that class names does in some cases have functionality, so preserve those if possible.
Warning
This code utilizes JavaScript handlebars to print dynamic data ( {{xxx}} ). Do not remove these unless you have knowledge of handlebars functionality.
-
HTML </body>: Lets you define the last HTML before closing the <body> tag.
-
-
CSS: Where color parameters can be utilized and define the CSS of the layout. Keep in mind custom code sections can be added to the specific pages and the CSS in the layouts is to be used for site-wide CSS.
-
JavaScript: Used to write JavaScript code and the written code will be executed in the bottom of the HTML <head>.
Note
JavaScript handlebars and parameters can be utilized in this code.
-
E-mail: The E-mail section is used to change the HTML setup of the e-mail design attached to the layout. The layout's name matches a design name when sending a mail through Emply.
Warning
Parameters cannot be used for e-mails, since parameters are read when the career site is loaded and an e-mail is read outside of the career site.
Warning
Ensure the
<insertMacro item='ContentPlaceHolder' />code is present at all times as this writes the content of the mail.
Parameters
Parameters are read on loading the career site and can make it very easy to change colors and appearance of a page.
Parameters only work if written into the HTML or CSS of the page, for example a headline using a color parameter:
.css_headline {
color: @color_2;
}
Headlines make use of the @color_2 declared styling element by default.
Titles of styling parameters have no effect, so a parameter named "button" might not change the color of a button, if the CSS is not set up to read that parameter.
There are 4 types of parameters:
-
Color: Used to define a hex/Rgba color to be called with a @color_x declation.
-
Font: Used to define a built in font to be called with a @font_x declation.
-
Images: Used to define an uploaded image to be called with a @image_x declation.
-
Files: Used to define an uploaded file to be called with a @image_x declation.
The @type_x code is unique and cannot be reused, if @image_1 is deleted the next parameter created will be @image_2.
It may happen that specific fonts need to be used on the career sites. Below is a guide on how to do this if you have a font file that needs to be added to the site.
-
Start on the main menu page of Emply and then click on .
-
Click on the cogwheel icon for settings at the top of the editing window.
-
Click on Layout and then the pencil icon to edit the desired layout.
Note
If the site has multiple layouts, all steps below must be performed for each layout where the font is used.
-
On the layout page, unfold , find the section Files, click on , and upload the desired font file.
-
After the desired file has been added to the tab, the following code snippet must be entered in the HTML <head> section.
Important
It is crucial to do this in <HTML> head section so that the font is loaded first when a user accesses the page.
<style>
@font-face {
font-family:xx;
src: url(xx);
}
</style>
-
Font family: Here you replace "xx" with the desired name that will be used to call the font in the CSS code. What you write here is completely optional, but it is important that you remember what is written here.
-
src: url(xx): Here you insert the "@file_x" id that can be copied in the Files section, each file uploaded here will get a unique "@file_x", so if you have multiple fonts on the page you must be aware that you use the correct @ for each font.
-
-
After the above is done, we can call the font in the CSS code.
Note
The name called in the Font-family code must be the same name that was written in the previous step.
Caution
Pay attention to upper and lower case letters.
Note
Fonts are often stored in the cache of your browser. You can preferably do this in an incognito tab, but if you do not see the font change after the above steps it may be necessary to clear your browser's cache.