I wanted to prototype a site similar to an online tv and movie streaming service that isn't Netflix. I wanted to find a versital carousel that worked well with responsive (Flexslider2). I wanted the heading to become more of a solid background color after you scrolled down past the main carousel.

The carousels are fluid when the window is resized.

screenwidth: 1280px

screenwidth: 1024px

 

screenwidth: 480px

 

(after scroll past the main carousel the banner becomes a transparent color instead of gradient background image)

 

I loaded the additional js file for the carousel when detected

In the Main Carousel.vm velocity template I tweaked some of the js.

• After the first slide is loaded I remove the loading class on the body tag.
• I detect if there is a banner and toggle the banner from absolute position to fixed if the dockbar was still on the screen.
• Detect the height of the carousel - #banner height then if vertical scroll is larger than that number then I add a class of changed, which replaces the background image with a background color.

Download and Test

Download big-media-theme.war for 6.1.1+

Git Branch

Update: Sorry for the technical difficulties, I hope to share my information at another time

I wanted to let you know that I plan on talking about the resources importer and some new features added.

Join me at 6:00pm PST

Here is a simple form that I'm trying to get some feedback from the community what theme features are important to you.

Click the Image below to fill out the form
 

 

Liferay blogs can use embeded gists again! So in celebration here is a one that can be helpful for the resources importer. This is a list of all the portlet preferences for portlets located in liferay-plugins and internal ones in liferay-portal.

OBJECTIVE: Allow the user to control auxiliary navigations (footer, header, side,..) through manage pages.

 

Option 1: In the theme have a root level page called "footer", then any child page gets thrown into the footer of the theme. 

Option 2: Add Expando Custom Field to the Page Type 

Option 3: Create a Navigation Position Hook. 

Option 1

---

 

manage pages

 

navigation.vm

footer.vm (file which would be parsed in portal_normal.vm

 

 

Option 2

---

Control Panel >> Custom Fields 

Add a Custom Field to the Page Type with the following settings.

 

So now you will be able to select the navigation area that it should be placed.

 

navigation.vm

 

footer.vm

Option 3

---

Here is the navigation hook as an example. This war is made for Liferay 6.1.1 CE

this hook adds a field called navigation position. The convince is that the setting can be created directly from the page details section instead of clicking the tab of the custom fields.

navigation.vm

in the footer.vm

use this statement to filter just the footer nav items.

#if($nav_item.layout.getTypeSettingsProperty("navigation-position","") == "footer")

 

I made an update to Plugins SDK that will create the default folder structure for the resources importer when you create a theme. using ./create.sh (create.bat) from within the theme folder of the SDK

Here is the folder structure that this build will create.

 

Something to note is the liferay-plugin-package.properties file has the required-deployment-contexts commented out for the resources importer. If you plan to use the resources importer with your theme just uncomment that section of the file.

If the resources importer is deployed with your theme then the default site template that will be created will display your theme with a 2 column layout (30/70) with the sign-in portlet on the left and the "hello world" portlet on the right. This is described in the sitemap.json file located in WEB-INF/src/resources-importer/journal

 

Download the updated SDK on the http://liferay.com/downloads  (liferay-plugins-sdk-6.1.1-ce-ga2-20121004092655026.zip)

---

For over a year I have been tasked with developing new Liferay, Inc. themes for marketplace. We wanted to set the bar high for these marketplace themes. We wanted to start with a clean slate, so thats why we removed our older themes [on this commit]. These new themes push the envelope. Besides getting the theme, they also come with default web content. 

These new themes have a common pre-fix "Zoe" (pronounced like Zoë or Zoh-ee) which means life: Zoe Brochure, Zoe Healthcare, Zoe Resort, Zoe Tech.

Many of these themes have nested layouts, customizable theme settings, carousels, featured content, social links, and flexible footers. By flexiable footers, I mean Theme footers that have sections that can be easily replaced by inputting an article id, or a "0" to hide the current content.

To view the default web content that comes with these themes, CONTROL PANEL >> Sites >> Add >> "Zoe Tech Theme".

These new themes use the resources-importer which was developed by Ryan Park. This web plugin creates a site template of the default web content when the theme is first deployed.

Here is the link for the Resources Importer wiki: http://www.liferay.com/community/wiki/-/wiki/Main/Resources+Importer+Web

Here is an example of one of the new Marketplace Themes called "Zoe Tech":

---

Here are some of the features of the new themes:

Zoe Brochure

Features:

• 2-1-2 Columns Layout (Nested)
• Carousel
• Featured Content
• Featured Download Button 

---

 

Zoe Healthcare

Features:

• 1-2-3 Columns Layout (nested)
• 2-1-2-4 Columns Layout (nested)
• Configured Web Form Portlet
• Contact Us (Embeded Web Content)
• Featured Section
• Footer (Easily Replace 3 Sections via article id)
• Footer Blurb (Emded Web Content)
• Footer Site Navigation
• Styled Navigation Portlet

 

---

Zoe Resort

 

Features:

• 3-3-3 Columns Layout (nested)
• Carousel
• Breadcrumbs
• Footer Site Navigation
• Footer Social Links
• Two different header images

 

---

 

Zoe Tech 

 

Features:

• 1-3-1 Columns
• Carousel
• Featured Content
• Footer (Easily Replace 4 Sections via article id)
• Footer Links
• Footer Site Navigation
• Footer Social Links

The other day I was trying to figure out a good way to manage footer navigation in liferay through manage pages. 

I wanted the theme to create a custom field of boolean type that could be set on a page. The benifit of the theme creating the custom field is that then the theme will know the name of the field to look for inorder to filter the navigation.

Here is what the navigation looks like. Footer Group 1 and Footer Group 2 have the Custom Field of "Footer Navigation" set to true.

 

Here is what the theme looks like.

init_custom.vm

## ---------- Footer Custom Field ---------- ##

#set ($customFieldName = "footer-navigation")

#if ($layout.getExpandoBridge().hasAttribute($customFieldName) == false)
     #set($VOID = $layout.getExpandoBridge().addAttribute($customFieldName, 1, false))
#end

I create a variable called customFieldName so I can use that through my other vm files. I use the ExpandoBridge from the $layout class so the custom field will be added to the Page type in the custom fields. It checks to see if the custom field exsists, if not then it creates it.

---

navigation.vm

<nav class="$nav_css_class" id="navigation">

<h1>
	<span>#language("navigation")</span>
</h1>

<ul>
	#foreach ($nav_item in $nav_items)
                   #if($nav_item.getLayout().getExpandoBridge().getAttribute($customFieldName) == false)
			#if ($nav_item.isSelected())
				<li class="selected">
			#else
				<li>
			#end
				<a href="$nav_item.getURL()" $nav_item.getTarget()><span>$nav_item.icon() $nav_item.getName()</span></a>

				#if ($nav_item.hasChildren())
					<ul class="child-menu">
						#foreach ($nav_child in $nav_item.getChildren())
							#if ($nav_child.isSelected())
								<li class="selected">
							#else
								<li>
							#end
								<a href="$nav_child.getURL()" $nav_child.getTarget()>$nav_child.getName()</a>
							</li>
						#end
					</ul>
				#end
			</li>
                    #end
		#end
	</ul>
</nav>

In this file it only displays the navigation item if the custom field of “footer-navigation” is false

---

footer.vm

<ul class="footer-nav">

	<div class="aui-layout-content">
	#foreach ($nav_item in $nav_items)
		#if($nav_item.getLayout().getExpandoBridge().getAttribute($customFieldName))

			<div class="aui-column aui-w25">
			#if ($nav_item.isSelected())
				<li class="selected">
			#else
				<li>
			#end
				<h4><span>$nav_item.icon() $nav_item.getName()</span></h4>

				#if ($nav_item.hasChildren())
					<ul class="child-menu">
						#foreach ($nav_child in $nav_item.getChildren())
							#if ($nav_child.isSelected())
								<li class="selected">
							#else
								<li>
							#end
								<a href="$nav_child.getURL()" $nav_child.getTarget()>$nav_child.getName()</a>
							</li>
						#end
					</ul>
				#end
			</li>
			</div>
		#end
	#end
	<div id="subscribe" class="aui-column aui-w25">
	#webform()

	</div>
	<div id="social" class="aui-column aui-w25">
		<ul>
		<h4>Find us on:</h4>
		<li><a class="facebook" href="//$theme.getSetting("facebook")" target="_blank"><span>Facebook</span></a></li>
		<li><a class="twitter" href="//$theme.getSetting("twitter")" target="_blank"><span>Twitter</span></a></li>
		<li><a class="youtube" href="//$theme.getSetting("youtube")" target="_blank"><span>Youtube</span></a></li>
		</ul>
	</div>
</ul>

This code displays only the nav items that have the custom field “footer-navigation” set to true.

I would also like to thank Minhchau Dang for showing me an easier way of setting the Expando bridge

 

 

I wanted the user to be able to edit the html block of contact section of the footer. But in my theme I wanted to set the default value as html. So in the liferay-look-and-feel.xml that is located in the WEB-INF folder of the theme.

 

I had to encode the html so that it wouldn't break the xml. I used http://htmlentities.net/ to quickly convert the raw html into html entities.

Inorder to display the web content I added the following snippet into portal_normal.vm of the theme.

<div id="contact" class="aui-column aui-w25 aui-column-last">

     <h3>${theme_settings.contact-title}</h3>

     ${theme_settings.contact-content}
</div>

the brackets are optional, I just like to do that with variables I use inorder to make it clear what is the variable and where the variable name ends.

Here is what the theme setting when editing it looks like:

To access this go to: Dockbar: Manage > Site Pages > Look and Feel Tab

* Please note that inorder to get contact-content key to show up as Contact Content (HTML) I had to add my own language hook into the theme.

Here is what that content looks like in the footer:

 

I hope this was helpful, let me know if you have any questions below.

Have you ever wanted to give a signed in user the ability to select a color scheme and to have that setting saved to their user session. Here is what the final product looks like when the user is logged in. I did this for Liferay 6.0 it should work in 6.1, plus if you use 6.1 then you can take advantage of nesting the css using SaSS.

Theme Skin Selector:

portal_normal.vm: file I placed the links that will be used to change the skin.

init_custom.vm: retrieve the value that is stored in the database from a "session click" and add the css class name to $css_class which will get added to the body class of the html.

main.js: Attaches a click event to the children of #skin-selector, then it will replace any css class on the body that has "skin-" in it with the value of the clicked link (skin-none, skin-red, skin-blue, skin-green). Then that value is saved in a session_click. which will save it in the database for each "non-guest" user. 

custom.css: Added some basic styling for the skin buttons. To define the red skin just add .skin-red in front of any css change you want to make. ".skin-none" is used to get the theme back to normal.

 

 

Special Thanks: 
to Nathan Cavanaugh for the Alloy Javascript Code and help.

 

Contact me if you have any questions or comment below:

 

Bradley Wood
@randombrad
bradley.wood@liferay.com
 

The Problem:

When you add a new portlet, it by default drops it into the first available column (fig 2). I ran into a use case where it would be nice to change the default column that it drops the new portlets in.

The Solution:

With Javascript it determines if this "LAYOUT_CLASS_NAME" ('.columns-1-2-nav') is the current one being used. Once the this particular layout is in use then I override placeHolder to use "TARGETED-COLUMN-ID" ('#column-3') as the column to drop in the new portlets. 

main.js (in the theme)

If you want this change to effect the entire theme your code could look like this:

main.js (in the theme)

---

 

Example Files:

This includes the Layout War File and then the main.js file I used in the theme

Download Files

- A Special Thanks to Nathan Cavanaugh who supplied the javascript code. -

---

*Update (2-11-11)

Thanks to Sampsa Sohlman I was able to use the below code to display webcontent on each page in the theme.

 

#set ($header-content-id = "17302")
#set ($header-template-id = "NAV-RIGHT")
#set ($footer-content-id = "17403")

#set($header-content=$journalContentUtil.getContent($group_id, $header-content-id,$header-template-id,"$locale",$theme_display));
#set($footer-content=$journalContentUtil.getContent($group_id, $footer-content-id,null,"$locale",$theme_display));

 

    <div class="navigation-right">
        $header-content
    </div>

    <div id="footer">       
        $footer-content
    </div>

 

 

 

 

How to Embed Web Content within a Theme

The Client needed to be able to edit webcontent that would appear on multiple pages, in places that don't fit the regular layout template. The benifit of doing this, is that the user can update the web content, instead of the developer changing in the velocity templates each time and have to redeploy the theme.

 

Header Give Now Web Content

Footer Web Content

Step 1 - Create Web Content and make note of the Web Content ID.

Step 2 - Set the below code in your theme's init_custom.vm file.

The Web Content ID's don't match in my LOCAL, DEV, and PROD environments. So I set all of the Web Content ID's for each environment and then just uncomment the one that I am deploying. Also make sure to define "YOUR_COMMUNITY_NAME" and set the webcontent ID for each Environment.

If you plan on doing this for several themes make sure to set the 56_INSTANCE_HEAD to be unique such as 56_INSTANCE_HEAD2 or otherwise the content from the other theme might display on the theme you don't want it to.

 

 
## Configure Web Content
#set ($footer-instance = "56_INSTANCE_F00T")
#set ($header-instance = "56_INSTANCE_HEAD")

## Local Host
##set ($header-content = "17302")
##set ($footer-content = "17403")

## Dev
##set ($header-content = "13620")
##set ($footer-content = "13590")

## Prod
#set ($footer-content = "13503")
#set ($header-content = "13737")

## #* Service Rational *# ##
#set ($layoutLocalService = $serviceLocator.findService("com.liferay.portal.service.LayoutLocalService"))
#set ($groupLocalService = $serviceLocator.findService("com.liferay.portal.service.GroupLocalService"))
#set ($userLocalService = $serviceLocator.findService("com.liferay.portal.service.UserLocalService"))
#set ($roleLocalService = $serviceLocator.findService("com.liferay.portal.service.RoleLocalService"))
#set ($usrgrproleLocalService = $serviceLocator.findService("com.liferay.portal.service.UserGroupRoleLocalService"))
#set ($grp = $groupLocalService.getGroup($theme_display.getPortletGroupId()))
#set ($user2 = $userLocalService.getUserById($grp.getClassPK())) 
#set ($guestGroup = $groupLocalService.getGroup($company_id, "YOUR_COMMUNITY_NAME"))
#set ($journalArticleLocalService = $serviceLocator.findService("com.liferay.portlet.journal.service.JournalArticleLocalService"))
#set ($portalgroup_id = $group_id)
#set ($portalguest_id = $guestGroup.getGroupId())

Step 3 - Place the corresponding code within your theme template file.

I added these web content items in my portal_normal.vm but you can place them in what ever theme template file you want the content to show up in. I left the div and class name to wrap the webcontent so that it gives more information what that peice of web content is, instead of just the variable of $header-content
 

        <div class="navigation-right">
            #if ($journalArticleLocalService.hasArticle($guestGroup.getGroupId(), $header-content))
                $velocityPortletPreferences.setValue("portlet-setup-show-borders", "false")
                $velocityPortletPreferences.setValue("group-id", "$guestGroup.getGroupId()")
                $velocityPortletPreferences.setValue("article-id", $header-content)
                $theme.runtime("$header-instance", "", $velocityPortletPreferences.toString())
                $velocityPortletPreferences.reset()
            #end
        </div>
        <div id="footer">       
            #if ($journalArticleLocalService.hasArticle($guestGroup.getGroupId(), $footer-content))
                $velocityPortletPreferences.setValue("portlet-setup-show-borders", "false")
                $velocityPortletPreferences.setValue("group-id", "$guestGroup.getGroupId()")
                $velocityPortletPreferences.setValue("article-id", $footer-content)
                $theme.runtime("$footer-instance", "", $velocityPortletPreferences.toString())
                $velocityPortletPreferences.reset()
           #end
        </div>

 

*Disclaimer I'm a front-end prgrammer so I don't know what each line of the velocity code does, but I mainly just worked with changing the bolded and underlined items