Forums

Home » Liferay Portal » English » 3. Development

Combination View Flat View Tree View
Threads [ Previous | Next ]
toggle
OgbaOghene Ozoro
Liferay 6.1 Custom theme
October 13, 2012 8:06 AM
Answer

OgbaOghene Ozoro

Rank: New Member

Posts: 14

Join Date: March 19, 2012

Recent Posts

Hello All,

I am working on a custom theme for Liferay 6.1 and I would like to customize the breadcrumb. There are 2 things I want to achieve;
1. Write a conditional aui statement in the velocity template that hides the breadcrumb if the user is on the home page but displays it on every other page.
2. Disable the hud breadcrumbs- what shows up when the user scrolls down- without breaking the whole thing.
3. Add on-screen controls for text size (+A -A) to the theme.

Will greatly appreciate any help with this. Thanks a lot.
OgbaOghene Ozoro
RE: Liferay 6.1 Custom theme
October 15, 2012 1:04 AM
Answer

OgbaOghene Ozoro

Rank: New Member

Posts: 14

Join Date: March 19, 2012

Recent Posts

Hello,

This is what I have come up with for the breadcrumb. It doesn't work though, would appreciate it if someone could point out where i'm going wrong.

#if ($current_url.equals($site_default_url))
<nav class="site-breadcrumbs" id="breadcrumbs" style="display: none;">
<h1>
<span>#language("breadcrumbs")</span>
</h1>

#breadcrumbs()
</nav>
#else
<nav class="site-breadcrumbs" id="breadcrumbs">
<h1>
<span>#language("breadcrumbs")</span>
</h1>

#breadcrumbs()
</nav>
#end
OgbaOghene Ozoro
RE: Liferay 6.1 Custom theme
October 18, 2012 6:59 AM
Answer

OgbaOghene Ozoro

Rank: New Member

Posts: 14

Join Date: March 19, 2012

Recent Posts

Using javascript, I have created the onscreen controls for text size.

<script type="text/javascript" defer="defer">
var base = 100;
var increment = 6.2;
var max = 150;
var min = 50;

function increaseFontSize() {
var size = document.getElementById('body');
var s = parseInt(size.style.fontSize.replace("%",""));
var result
if(s >= max) {
result = s + 0;
} else
{
result = s + increment;
}

size.style.fontSize = result+"%";
}

function resetFontSize() {
var size = document.getElementById('body');
size.style.fontSize = base+"%";
}

function decreaseFontSize() {
var size = document.getElementById('body');
var s = parseInt(size.style.fontSize.replace("%",""));
var result = s - increment;
if(s <= min) {
result = s - 0;
} else
{
result = s - increment;
}

size.style.fontSize = result+"%";
}
</script>

<a href="javascript:void(null);" onClick="decreaseFontSize()" id="minustext" alt="Reduce text size" title="Click to reduce text size">-A</a>
<a href="javascript:void(null);" onClick="resetFontSize()" id="resettext" alt="Reset text size" title="Click to reset text size">A</a>
<a href="javascript:void(null);" onClick="increaseFontSize()" id="plustext" alt="Increase text size" title="Click to increase text size">+A</a>
OgbaOghene Ozoro
RE: Liferay 6.1 Custom theme
October 19, 2012 3:08 AM
Answer

OgbaOghene Ozoro

Rank: New Member

Posts: 14

Join Date: March 19, 2012

Recent Posts

Using this I succeeded in hiding the breadcrumbs on the home page. The only issue is that it doesn't cover situations like when a different language is selected and the current url changes to reflect that.

#if ($themeDisplay.getURLCurrent() == "/en_GB/web/guest/home")
#set ($css_class = "hidden site-breadcrumbs")
#else
#set ($css_class = "site-breadcrumbs")
#end
<nav class="$css_class" id="breadcrumbs">
<h1>
<span>#language("breadcrumbs")</span>
</h1>

#breadcrumbs()
</nav>