Showing posts with label Liferay. Show all posts
Showing posts with label Liferay. Show all posts

Thursday, June 16, 2011

Liferay Theme Conversion - 5.2.3 - 6.0.6

TEMPLATES

PORTAL_NORMAL

-Under the body tag, put the following code in to display the Admin bar after sign-in:

#if($is_signed_in)
#dockbar()
#end

-Remove the following line under the body tag:

#$theme.include($top_messages_include)

-There is no dock any more. Remove

#parse ("$full_templates_path/dock.vm")


CSS

-Modify main.css to include the following:

@import url(dockbar.css);

@import url(extras.css);

-Copy those css files to your css directory.

-REPLACE the application.css file (to get the dock working)

 

Tuesday, October 20, 2009

Liferay 5.2.3 - Change Navigation to an Accordian

1. Change the navigation.vm file in your theme to the following (Note, change the options for different effects):

<script type="text/javascript">
jQuery().ready(function(){
jQuery('#accordian-nav').accordion({
active: false,
header: '.head',
event: 'mouseover',
fillSpace: true,
active: '.selected',
animated: 'easeslide'
});

});

</script>

<div id="navi" class="sort-pages modify-pages">
<ul id="accordian-nav">
#foreach ($nav_item in $nav_items)
#if ($nav_item.isSelected())
#set ($nav_item_class = "selected")
#else
#set ($nav_item_class = "")
#end

<li class="$nav_item_class">
<a class="head" href="$nav_item.getURL()" $nav_item.getTarget()><span>$nav_item.getName()</span></a>

#if ($nav_item.hasChildren())
<ul class="">
#foreach ($nav_child in $nav_item.getChildren())
#if ($nav_child.isSelected())
#set ($nav_child_class = "selected")
#else
#set ($nav_child_class = "")
#end

<li class="$nav_child_class">
<a href="$nav_child.getURL()" $nav_child.getTarget()>$nav_child.getName()</a>
</li>
#end
</ul>
#end
</li>
#end
</ul>
</div>

2. Add the CSS to your custom.css file (You'll definitely want to modify the colors):

/* Accordian Navigation */
#navi {
border:1px solid #5263AB;
margin:0px;
padding:0px;
text-indent:0px;
width:200px;
}
#navi a.head {
cursor:pointer;
border:1px solid #43AEE4;
color:#336699;
display:block;
font-weight:bold;
margin:0px;
padding:0px;
text-indent:14px;
text-decoration: none;
background-color: green;
}
#navi a.head:hover {
color:#000;
}
#navi a.selected {


}
#navi a.current {
background-color:#FFFF99;
}
#navi ul {
border-width:0px;
margin:0px;
padding:0px;
text-indent:0px;
height: auto!important
}
#navi li {
list-style:none outside none; display:inline;
}
#navi li li a {
color:#000000;
display:block;
text-indent:10px;
text-decoration: none;
}
#navi li li a:hover {
background-color: #E3F1FA;
color:#FF0000;
}

Example:



The only thing I don't particularly care for at this stage is that it moves all content items down. Solvable, but good enough for now. ;)

Only tested in IE7 and FF3

Monday, October 19, 2009

Installing Liferay 5.2.3 Using Postgres 8

1. Install and create lportal database (Note: for this example I used lportal523)

- Open pgAdmin III (Start Menu on Win Systems)
- Enter the name you want to use for the database (ex. lportal523)




















2. Download the appropriate driver version and place in lib/ext

Version 3:
Use this if you're running JVM 1.5
http://jdbc.postgresql.org/download/postgresql-8.4-701.jdbc3.jar

Version 4:

Use this if you're running JVM 1.6

http://jdbc.postgresql.org/download/postgresql-8.4-701.jdbc4.jar

Keep in mind that if you're using the Liferay bundle defaults, you're using JVM 1.5.

3. Set the properties in the portal-ext.properties file

jdbc.default.driverClassName=org.postgresql.Driver
jdbc.default.url=jdbc:postgresql://localhost:5432/lportal523
jdbc.default.username=postgres
jdbc.default.password=whateveryourpasswordis

4. Startup Liferay. Your database will look like this:



Enjoy!

Thursday, October 15, 2009

Updated Jan 2010: Liferay - Cool Breadcrumb

I decided to update this after I found some problems with the original method I had posted. Liferay uses breadcrumb styles 1 and 2 for other things for which I did not want to use the apple style but in addition, I've made it into a self-contained cool crumb. This solution is designed to work from directly in the theme and has been tested in 5.2.3.

So you want a cool looking breadcrumb? Perhaps one that's kind of Applish? Well these instructions will get you what you want.





1. Create a file in webapps\ROOT\html. For this example we'll call it crumb.jsp and place the following in it:

<%@ include file="/html/taglib/ui/breadcrumb/init.jsp" %>

<%
StringBuilder sb = new StringBuilder();
sb.append("<ul class='breadcrumb2'>");
_buildBreadcrumb(selLayout, selLayoutParam, portletURL, themeDisplay, true, sb);
%>

<%= sb.toString() %>

<%!
private void _buildBreadcrumb(Layout selLayout, String selLayoutParam, PortletURL portletURL, ThemeDisplay themeDisplay, boolean selectedLayout, StringBuilder sb) throws Exception {

String layoutURL = _getBreadcrumbLayoutURL(selLayout, selLayoutParam, portletURL, themeDisplay);
String target = PortalUtil.getLayoutTarget(selLayout);

StringBuilder breadCrumbSB = new StringBuilder();

breadCrumbSB.append("<li><a href=\"");
breadCrumbSB.append(layoutURL);
breadCrumbSB.append("\" ");
breadCrumbSB.append(target);
breadCrumbSB.append(">");

breadCrumbSB.append(HtmlUtil.escape(selLayout.getName(themeDisplay.getLocale())));

breadCrumbSB.append("</a></li>");


Layout layoutParent = null;
long layoutParentId = selLayout.getParentLayoutId();
if (layoutParentId != LayoutConstants.DEFAULT_PARENT_LAYOUT_ID) {
layoutParent = LayoutLocalServiceUtil.getLayout(selLayout.getGroupId(), selLayout.isPrivateLayout(), layoutParentId);
_buildBreadcrumb(layoutParent, selLayoutParam, portletURL, themeDisplay, false, sb);


sb.append(breadCrumbSB.toString()+"");
}
else {
sb.append(breadCrumbSB.toString()+"");
}
}

private String _getBreadcrumbLayoutURL(Layout selLayout, String selLayoutParam, PortletURL portletURL, ThemeDisplay themeDisplay) throws Exception {
if (portletURL == null) {
return PortalUtil.getLayoutURL(selLayout, themeDisplay);
}
else {
portletURL.setParameter(selLayoutParam, String.valueOf(selLayout.getPlid()));

return portletURL.toString();
}
}
%>


2. In your custom.css file add the following (remember to change the urls to your server):

.breadcrumb2
{
font: 11px Arial, Helvetica, sans-serif;
background-image:url('../images/theme1/bc_bg.png');
background-repeat:repeat-x;
height:30px;
line-height:30px;
color:#9b9b9b;
border:solid 1px #cacaca;
width:100%;
overflow:hidden;
margin:0px;
padding:0px;
}


.breadcrumb2 li
{
list-style-type:none;
float:left;
padding-left:10px;
}

.breadcrumb2 a
{
height:30px;
display:block;
background-image:url('../images/theme1/bc_separator.png');
background-repeat:no-repeat;
background-position:right;
padding-right: 15px;
text-decoration: none;
color:#454545;
}
.breadcrumb2 a:hover
{
color:#35acc5;
}
.home
{
border: none;
margin: 8px 0px;
}

3. Last but not least, here are the images:





This last part will include your new breadcrumb on all pages. Open the portal_normal.vm and include:

$theme.include("/html/crumb.jsp")