Building Amazing Liferay

Themes
Patrick Yeo and Ryan Schuhler
 Getting Started

#LSNA18
 1
Build
2
Edit
3
Deploy

#LSNA18
 1
Build
2
Edit
3
Deploy

#LSNA18
#LSNA18
#LSNA18
#LSNA18
 1
Build
2
Edit
3
Deploy

#LSNA18
 CSS

Javascript

HTML

Configs

#LSNA18
 1
Build
2
Edit
3
Deploy

#LSNA18
#LSNA18
#LSNA18
 Building Amazing Themes

#LSNA18
 Extending Themes

#LSNA18
#LSNA18
 package.json
{
...
"liferayTheme": {
"baseTheme": "styled",
"screenshot": "",
"rubySass": false,
"templateLanguage": "ftl",
"version": "7.1"
},
...
}

#LSNA18
 Themelets

#LSNA18
#LSNA18
#LSNA18
 Theme Contributors

#LSNA18
#LSNA18
 bnd.bnd

Bundle-Name: Liferay Product Navigation Control Menu Theme Contributor

Bundle-SymbolicName:
com.liferay.product.navigation.control.menu.theme.contributor
Bundle-Version: 1.0.0
Liferay-Releng-Module-Group-Description:
Liferay-Releng-Module-Group-Title: Product Navigation
Liferay-Theme-Contributor-Type: product-navigation-control-menu
Web-ContextPath: /product-navigation-control-menu-theme-contributor
-include: ../../../../../marketplace/web-content-management/bnd.bnd

#LSNA18
 Theme settings

#LSNA18
#LSNA18
 liferay-look-and-feel.xml

<look-and-feel>
<theme id="your-theme-name" name="Your Theme Name">
<settings>
<setting configurable="true" key=“navigation-type"
options=“fixed-navigation,static-navigation” type="select"
value=“fixed-navigation” />
<setting configurable="true" key="theme-setting-key"
type="text" value="My placeholder text" />
</settings>
</theme>
</look-and-feel>

#LSNA18
 Portlet Decorators

#LSNA18
#LSNA18
 liferay-look-and-feel.xml

<look-and-feel>
<theme id="classic" name="Classic">
<portlet-decorator id="barebone" name="Barebone">
<portlet-decorator-css-class>
portlet-barebone
</portlet-decorator-css-class>
</portlet-decorator>
<portlet-decorator id="borderless" name="Borderless">
<portlet-decorator-css-class>
portlet-borderless
</portlet-decorator-css-class>
</portlet-decorator>
<portlet-decorator id="decorate" name="Decorate">
<default-portlet-decorator>true</default-portlet-decorator>
<portlet-decorator-css-class>portlet-decorate</portlet-decorator-css-class>
</portlet-decorator>
</theme>
</look-and-feel>

#LSNA18
 Color Schemes

#LSNA18
#LSNA18
 liferay-look-and-feel.xml

<theme id="my-theme-id" name="My Theme Name">

<color-scheme id="01" name="My Default Color Scheme Name">
<default-cs>true</default-cs>
<css-class>default</css-class>

<color-scheme-images-path>
${images-path}/my_color_schemes_folder_name/${css-class}
</color-scheme-images-path>
</color-scheme>
</theme>

#LSNA18
 Layouts

#LSNA18
#LSNA18
 custom_layout.tpl

<div class="portlet-layout row">

<div class="col-md-4 col-sm-6 portlet-column portlet-column-first"
id="column-1">
${processor.processColumn("column-1",
"portlet-column-content portlet-column-content-first")}
</div>
<div class="col-md-8 col-sm-6 portlet-column portlet-column-last"
id="column-2">
${processor.processColumn("column-2",
"portlet-column-content portlet-column-content-last")}
</div>
</div>

#LSNA18
 Context Contributors

#LSNA18
 TestTemplateContextContributor.java

@Component(

immediate = true,

property = "type=" + TemplateContextContributor.TYPE_THEME,

service = TemplateContextContributor.class

public class BladeTemplateContextContributor

implements TemplateContextContributor {

@Override

public void prepare(

Map<String, Object> contextObjects, HttpServletRequest request) {

contextObjects.put("sample_text", "This is some sample text");

#LSNA18
 Icons

#LSNA18
#LSNA18
#LSNA18
 <clay:icon symbol="folder" />

#LSNA18
 More Resources

#LSNA18
dev.liferay.com
#LSNA18 university.liferay.com
#LSNA18 community.liferay.com
 What's Changed in 7.1?

#LSNA18
 Bootstrap 3 ▷▷▷ Bootstrap 4

#LSNA18
 Lots of class name changes, you can find more
details at https://getbootstrap.com/docs/4.0/
migration/.

#LSNA18
 Replaced selector pattern:
`.nav > li` => `.nav-item`
`.nav > li > a` => `.nav-link`

#LSNA18
 Consolidated `.open` and `.in` to `.show`

#LSNA18
 `.show` renamed to `.d-block`
`.hidden` renamed to `.d-none`

#LSNA18
 Bootstrap 4 Utilities
https://getbootstrap.com/docs/4.0/utilities

#LSNA18
 .align-baseline .rounded .flex-row .align-content-start
.align-top .rounded-top .flex-column .align-content-end
.flex-row-reverse .align-content-center
.align-middle .rounded-right
.flex-column-reverse .align-content-between
.align-bottom .rounded-bottom
.align-content-around
.align-text-bottom .rounded-left .flex-wrap
.align-content-stretch
.flex-nowrap
.align-text-top .rounded-circle .align-self-auto
.flex-wrap-reverse
.border .rounded-0 .align-self-start
.justify-content-start
.border-top .clearfix .align-self-end
.justify-content-end
.border-right .d-none .align-self-center
.justify-content-center .align-self-baseline
.border-bottom .d-inline
.justify-content-between .align-self-stretch
.border-left .d-inline-block .justify-content-around .m-1
.border-0 .d-block .align-items-start .m-2
.border-top-0 .d-table-row .align-items-end .m-3
.border-right-0 .d-table-cell .align-items-center .m-4
.border-bottom-0 .d-flex .align-items-baseline .m-5
.border-left-0 .d-iline-flex .align-items-stretch .p-1

#LSNA18
 Liferay 7.1 Themes

#LSNA18
 Changing Your Site Theme

#LSNA18
#LSNA18
 Site Navigation in 7.1

#LSNA18
 “With Liferay Portal CE 7.1, pages are now decoupled from
menus. Navigation Menus let you arrange your page
taxonomy any way you want. Marketers can leave one-off
marketing landing pages out of the navigation, and you can
create multiple navigation menus: a main menu, secondary
menus, footer menus, and custom menus for anything that
you can dream up.”

https://dev.liferay.com/en/discover/portal/-/knowledge_base/7-1/creating-and-
managing-site-navigation-menus

#LSNA18
 Pages

#LSNA18
#LSNA18
 portal_normal.ftl

...
<body class="${css_class}">
<header class="container-fluid">
<div id="heading">
<#list nav_items as nav_item>
<#-- loop through navigation -->
</#list>
</div>
</header>
</body>
...

#LSNA18
 portal_normal.ftl

<header class="container-fluid">
<div id="heading">
<@liferay.navigation_menu
default_preferences=freeMarkerPortletPreferences.getPreferences({
"displayStyle": "ddmTemplate_NAVBAR-BLANK-JUSTIFIED-FTL",
"portletSetupPortletDecoratorId": "barebone"
})
instance_id='my_primary_nav_unique_instance_id'
/>
</div>
</header>

#LSNA18
 Clay

#LSNA18
 https://clayui.com
#LSNA18
 How It's Structured

Clay Atlas
+
Bootstrap 4.0.0
+
Clay Base

#LSNA18
#LSNA18
https://v2-claypaver.wedeploy.io
 How to Use Clay Paver

https://v2-claypaver.wedeploy.io
#LSNA18
#LSNA18 https://v2-claypaver.wedeploy.io
#LSNA18 https://v2-claypaver.wedeploy.io
 Clay Paver
_clay_variables.scss

$input-border-width: 0.125rem;
$input-border-color: #dbdfe4;
$input-bg: #fff;
$input-focus-border-color: #c2c6cc;
$input-focus-bg: !default;

#LSNA18
#LSNA18 https://v2-claypaver.wedeploy.io
#LSNA18 https://developer.microsoft.com/en-us/fabric#/components/button
#LSNA18
 Try It Yourself

https://pat270.github.io/clay-paver/

#LSNA18
#LSNA18