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