Connecting to LinkedIn...

Upgrade to Universal

Guide on "How to Upgrade a Theme to use the Universal Assets":

Here are the steps to follow when adding "Universal" to a theme on the platform:

1. Add - "global_head" snippet to the <head> tag of ALL of the theme's layouts:
NOTE: certain layouts may require additional includes adding to it, these can be added after the "global_head"

<head>
    {% include 'global_head' %}
</head>


In the case of the layouts used by Dashboards, these are required to carry additional Liquid tags + Scripts:

  • Consultant Dashboardconsultant.liquid
    • {% consultant_header_content %}
      <script src="//cdn.ckeditor.com/4.4.5/standard/ckeditor.js"></script>
  • Recruiter Dashboard - recruiter.liquid
    • {% header_content_for_dashboard %}
      <script src="//cdn.ckeditor.com/4.4.5/standard/ckeditor.js"></script>


This should be the final result:

<head>
    {% include 'global_head' %}
    {% header_content_for_dashboard %}
    <script src="//cdn.ckeditor.com/4.4.5/standard/ckeditor.js"></script>
</head>


2. Create the "_global_head.liquid" snippet file with all of the relevant tags that the theme currently uses in the order shown below:

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
<link href='//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700' rel='stylesheet' type='text/css'>
<script>
    !window.googleapis && document.write(
        unescape('%3Cscript src="//maps.googleapis.com/maps/api/js?key=AIzaSyCNnyuzlNllHd1zHHpDI9C6bf7DWFYymhA&v=3.exp&libraries=places"%3E%3C/script%3E')
    );
</script>
{{ 'stylesheets/application.css' | u_asset_url | u_stylesheet_tag }}
{{ 'stylesheets/application.css' | asset_url | stylesheet_tag }}
{{ 'javascripts/application.js' | u_asset_url | u_javascript_tag }}
{{ 'javascripts/application.js' | asset_url | javascript_tag }}
{% content_for_header %}
<link rel="Shortcut Icon" href="{{ 'images/favicons/favicon.png' | asset_url }}" type="image/x-icon">
{% ga_javascript_code %}

NOTE: All of the above should now be removed from the Layouts in order to avoid duplications

What's important here are the two "universal" tags which are responsible for loading the assets:

{{ 'stylesheets/application.css' | u_asset_url | u_stylesheet_tag }}
{{ 'javascripts/application.js' | u_asset_url | u_javascript_tag }}

3. Remove any unnecessary CSS/JS files from their respective "application" files, as the below stylesheets and scripts will now be loaded from the "Universal":

/theme/assets/stylesheets/application.css

/*
 *= require ./jquery-ui.min
 *= require ./autocomplete_location
 *= require ./universal
 *= require ./job-search
 *= require ./focus
 *= require ./candidate-dashboard
 *= require ./recruiter-dashboard
 *= require ./list_price_credits
 *= require ./select2
 *= require ./seo-lists
*/


/theme/assets/javascripts/application.js

//= require ./jquery-2.1.1.min
//= require ./jquery-migrate-1.2.1.min
//= require ./modernizr-2.6.2-respond-1.1.0.min
//= require ./jquery.pjax
//= require ./jquery_ujs
//= require ./jquery-ui.min
//= require ./placeholders.min
//= require ./hogan-2.0.0
//= require ./typeahead.min
//= require ./Chart.min
//= require ./Chart.HorizontalBar
//= require ./jquery.eventCalendar.min
//= require ./select2.full.min
//= require ./job-search
//= require ./autocomplete_location
//= require ./global_autocomplete
//= require ./seo-list
//= require ./universal

NOTE: Please pay special attention to the fact that the jQuery library gets loaded on "Universal", therefore it must not be part of the theme as this will cause a conflict and errors on the console

4. Once all of the above steps have been carried out, the Theme can start to benefit from the "Universal" assets.

In order to use any of the HAML fallback pages, simply remove the respective files from the Theme and ensure that any conflicting CSS styling that could affect the display and/or functionality of the page is deleted/commented.

5 . TESTING!!

Please make sure the site has been fully tested before deploying the upgrade to Staging/Production.