## ---------- Step to Create Theme ---------- ## Download Theme(template) from http://www.freewebsitetemplates.com/ Create theme create myFirstTheme MyFirstTheme; or You can also use Liferay Developer Studio Deploy Theme ant clean deploy Note :- below all file create in _diff folder only. Step :- 1
create css,images and template folder in _diff folder
Step :- 2
Copy downloaded css files in css folder
create custom.css file in css folder and include all downloaded css files in this file(@import url(style.css);)
Correct image path in all css files(/themeName-theme/images/xys.jpg or ../images/xyz.jpg)
Step :- 3
Copy all images files in images folder
Step :- 4
Copy init_custom.vm,portal_normal.vm and navigation.vm files in template folder of _diff from docroot template folder
Step :- 5
remove body part from portal_normal.vm and copy body part from index.html to portal_normal.vm
Correct image path in portal_normal.vm($images_folder/lr-theme.png)
Step :- 6
Add docbar code imitatively after body tag(<body>)
#if($is_signed_in)
#dockbar()
#end
Step :- 7
Now identify four part in theme(template)
Static Part
When we are coping body from template to portal_normal.vm that time static Contents part will be covered.
Navigation Part
There is 1 level,2 level, 3 level are possible in theme
For Navigation part we have to changed navigation.vm
Create some pages in communities
And add below code in navigation.vm as per your pagination level
<ul id="main-nav">
#foreach ($nav_item in $nav_items) #if ($nav_item.isSelected()) <li class="current_page_item"> #else <li> #end <!-- Level 1 --> <span><a href="$nav_item.getURL()" $nav_item.getTarget()> $nav_item.getName()</a></span> #if ($nav_item.hasChildren()) <ul class="sub-menu"> #foreach ($nav_child in $nav_item.getChildren()) <!-- Level 2 --> <li><a href="$nav_child.getURL() $nav_child.getTarget()">$nav_child.getName()</a> #if ($nav_child.hasChildren()) <ul class="sub-menu"> #foreach ($nav_child_second in $nav_child.getChildren()) <!-- Level 3 --> <li><a href="$nav_child_second.getURL() $nav_child_second.getTarget()">$nav_child_second.getName()</a> </li> #end </ul> #end </li> #end </ul> #end </li> #end </ul>
Main Part(Portlet Part)
- Now identify your portlet part in theme and add below code for portlet landing.
#if ($selectable)
$theme.include($content_include)
#else
$portletDisplay.recycle()
$portletDisplay.setTitle($the_title)
$theme.wrapPortlet("portlet.vm", $content_include)
#end
Footer Part
There is two parts in footer
1. static
If footer is static then nothing to do it and its already done when we did copy body from template to portal_normal.vm
2. dynamic
If footer is dynamic and its shows some page then again we have do same procedure like navigation.
##===============================End============================## Some useful code for Theme
## ---------- Folder path in Theme ---------- ##
$javascript_folder/
$css_folder/
$images_folder/
## ---------- Util Class access in theme ---------- ##
#set ($themePropVar = $propsUtil.get("theme.business.variable.one"))
<h1>$themePropVar</h1>
## ---------- LocalService Class access in theme ---------- ##
#set ($userLocalService =$serviceLocator.findService("com.liferay.portal.service.UserLocalService"))
#set ($newUser = $userLocalService.getUserById(10169))
<h1>New user :- $newUser.getFirstName()</h1>
#set ($newUserId = $request.get("attributes").get("USER_ID"))
## ---------- Embedding a portlet in the theme ---------- ##
$velocityPortletPreferences.setValue("portlet-setup-show-borders", "false")
#set ($charitySearchPortletId = "charitysearchportlet_WAR_IDELearning3portlet")
#set ($locRenderedPortletContent = $theme.runtime($charitySearchPortletId, "", $velocityPortletPreferences.toString()))
$locRenderedPortletContent
$velocityPortletPreferences.reset()
## ---------- Common variables ---------- ## #set ($theme_display = $themeDisplay) #set ($portlet_display = $portletDisplay) #set ($theme_timestamp = $themeDisplay.getTheme().getTimestamp()) #set ($theme_settings = $themeDisplay.getTheme().getSettings()) #set ($css_class = $theme_display.getColorScheme().getCssClass()) #if ($layout) #if ($layout.getGroup().isStagingGroup()) #set ($css_class = $css_class + " staging") #end #end #set ($css_folder = "$theme_display.getPathThemeCss()") #set ($images_folder = "$theme_display.getPathThemeImages()") #set ($javascript_folder = "$theme_display.getPathThemeJavaScript()") #set ($templates_folder = "$theme_display.getPathThemeTemplates()") #set ($full_css_path = $fullCssPath) #set ($full_templates_path = $fullTemplatesPath) #if ($theme_display.isThemeCssFastLoad()) #set ($css_main_file = "$css_folder/everything_packed.css?companyId=$theme_display.getCompanyId()&languageId=$languageUtil.getLanguageId($locale)&themeId=$theme_display.getThemeId()&colorSchemeId=$theme_display.getColorSchemeId()&t=$theme_timestamp") #else #set ($css_main_file = "$css_folder/main.css?companyId=$theme_display.getCompanyId()&languageId=$languageUtil.getLanguageId($locale)&themeId=$theme_display.getThemeId()&colorSchemeId=$theme_display.getColorSchemeId()&t=$theme_timestamp") #end #set ($js_main_file = "$javascript_folder/javascript.js?t=$theme_timestamp") #set ($company_id = $company.getCompanyId()) #set ($company_name = $company.getName()) #set ($company_logo = $theme_display.getCompanyLogo()) #set ($company_logo_height = $theme_display.getCompanyLogoHeight()) #set ($company_logo_width = $theme_display.getCompanyLogoWidth()) #set ($company_url = $theme_display.getURLHome()) #set ($user_id = $user.getUserId()) #set ($is_default_user = $user.isDefaultUser()) #set ($user_first_name = $user.getFirstName()) #set ($user_middle_name = $user.getMiddleName()) #set ($user_last_name = $user.getLastName()) #set ($user_name = $user.getFullName()) #set ($is_male = $user.isMale()) #set ($is_female = $user.isFemale()) #set ($user_birthday = $user.getBirthday()) #set ($user_email_address = $user.getEmailAddress()) #set ($language_id = $user.getLanguageId()) #set ($time_zone = $user.getTimeZoneId()) #set ($user_greeting = $htmlUtil.escape($user.getGreeting())) #set ($user_comments = $user.getComments()) #set ($user_login_ip = $user.getLoginIP()) #set ($user_last_login_ip = $user.getLastLoginIP()) #set ($user_group = $user.getGroup()) #set ($user_organizations = $user.getOrganizations()) ## Deprecated #set ($user_organization = $user.getOrganization()) #set ($user_location = $user.getLocation()) #set ($is_signed_in = $theme_display.isSignedIn()) #set ($group_id = $theme_display.getPortletGroupId()) ## ---------- URLs ---------- ## #set ($show_add_content = $theme_display.isShowAddContentIcon()) #if ($show_add_content) #set ($add_content_text = $languageUtil.get($company_id, $locale, "add-application")) #set ($add_content_url = $theme_display.getURLAddContent()) #set ($layout_text = $languageUtil.get($company_id, $locale, "layout-template")) #set ($layout_url = $theme_display.getURLLayoutTemplates()) #end #set ($show_home = $theme_display.isShowHomeIcon()) #if ($show_home) #set ($home_text = $languageUtil.get($company_id, $locale, "home")) #set ($home_url = $theme_display.getURLHome()) #end #set ($show_my_account = $theme_display.isShowMyAccountIcon()) #if ($show_my_account) #set ($my_account_text = $languageUtil.get($company_id, $locale, "my-account")) #set ($my_account_url = $theme_display.getURLMyAccount()) #end #set ($show_page_settings = $theme_display.isShowPageSettingsIcon()) #if ($show_page_settings) #set ($page_settings_text = $languageUtil.get($company_id, $locale, "manage-pages")) #set ($page_settings_url = $theme_display.getURLPageSettings().toString()) #end #set ($show_sign_in = $theme_display.isShowSignInIcon()) #if ($show_sign_in) #set ($sign_in_text = $languageUtil.get($company_id, $locale, "sign-in")) #set ($sign_in_url = $theme_display.getURLSignIn()) #end #set ($show_sign_out = $theme_display.isShowSignOutIcon()) #if ($show_sign_out) #set ($sign_out_text = $languageUtil.get($company_id, $locale, "sign-out")) #set ($sign_out_url = $theme_display.getURLSignOut()) #end #if ($permissionChecker.isOmniadmin() && $portalUtil.isUpdateAvailable()) #set ($update_available_url = $theme_display.getURLUpdateManager()) #end ## ---------- Page ---------- ## #set ($the_title = "") #set ($selectable = $theme_display.isTilesSelectable()) #set ($is_maximized = $layoutTypePortlet.hasStateMax()) #set ($is_freeform = $themeDisplay.isFreeformLayout()) #set ($page_javascript_1 = "") #set ($page_javascript_2 = "") #set ($page_javascript_3 = "") #if ($layout) #set ($page = $layout) #set ($is_first_child = $page.isFirstChild()) #set ($is_first_parent = $page.isFirstParent()) #set ($the_title = $languageUtil.get($company_id, $locale, $the_title, $page.getName($locale))) #if ($page.getType().equals("portlet")) #set ($is_portlet_page = true) #end #if ($is_portlet_page && $theme_display.isWapTheme()) #set ($all_portlets = $layoutTypePortlet.getPortlets()) #set ($column_1_portlets = $layoutTypePortlet.getAllPortlets("column-1")) #set ($column_2_portlets = $layoutTypePortlet.getAllPortlets("column-2")) #set ($column_3_portlets = $layoutTypePortlet.getAllPortlets("column-3")) #set ($column_4_portlets = $layoutTypePortlet.getAllPortlets("column-4")) #set ($column_5_portlets = $layoutTypePortlet.getAllPortlets("column-5")) #if ($layoutTypePortlet.hasStateMax()) #set ($maximized_portlet_id = $layoutTypePortlet.getStateMaxPortletId()) #end #end #set ($typeSettingsProperties = $layout.getTypeSettingsProperties()) #set ($page_javascript_1 = $typeSettingsProperties.getProperty("javascript-1")) #set ($page_javascript_2 = $typeSettingsProperties.getProperty("javascript-2")) #set ($page_javascript_3 = $typeSettingsProperties.getProperty("javascript-3")) #set ($community_name = $page.getGroup().getDescriptiveName()) #set ($my_places_portlet_url = $portletURLFactory.create($request, "49", $page.getPlid(), "ACTION_PHASE")) $my_places_portlet_url.setWindowState("normal") $my_places_portlet_url.setPortletMode("view") $my_places_portlet_url.setParameter("struts_action", "/my_places/view") $my_places_portlet_url.setParameter("groupId", "$page.getGroupId()") $my_places_portlet_url.setParameter("privateLayout", "false") #set ($community_default_public_url = $my_places_portlet_url.toString()) $my_places_portlet_url.setParameter("privateLayout", "true") #set ($community_default_private_url = $my_places_portlet_url.toString()) #end #if ($layout.getHTMLTitle($locale)) #set ($the_title = $layout.getHTMLTitle($locale)) #end #if ($pageTitle) #set ($the_title = $pageTitle) #end #if ($pageSubtitle) #set ($the_title = $the_title + " - " + $pageSubtitle) #end #if ($tilesTitle != "") #set ($the_title = $languageUtil.get($company_id, $locale, $tilesTitle)) #end #if ($layouts) #set ($pages = $layouts) #end ## ---------- Navigation ---------- ## #if ($navItems) #set ($nav_items = $navItems) #set ($has_navigation = ($nav_items && $nav_items.size() > 0)) #end ## ---------- Staging ---------- ## #set ($show_staging = $theme_display.isShowStagingIcon()) #if ($show_staging) #set ($staging_text = $languageUtil.get($company_id, $locale, "staging")) #end ## ---------- My places ---------- ## #set ($show_my_places = $user.hasMyPlaces()) #if ($show_my_places) #set ($my_places_text = $languageUtil.get($company_id, $locale, "my-places")) #end ## ---------- Includes ---------- ## #if ($is_portlet_page && $theme_display.isWapTheme()) #set ($dir_include = "/wap") #else #set ($dir_include = "/html") #end #set ($bottom_ext_include = "$dir_include/common/themes/bottom.jsp") #set ($content_include = "$dir_include$tilesContent") #set ($session_timeout_include = "$dir_include/common/themes/session_timeout.jsp") #set ($sound_alerts_include = "$dir_include/common/themes/sound_alerts.jsp") #set ($top_head_include = "$dir_include/common/themes/top_head.jsp") #set ($top_messages_include = "$dir_include/common/themes/top_messages.jsp") ## ---------- Date ---------- ## #set ($date = $dateUtil) #set ($current_time = $date.getCurrentDate()) #set ($the_year = $date.getCurrentDate("yyyy", $locale)) ## ---------- Custom init ---------- ## #parse ("$full_templates_path/init_custom.vm")