Foros de discusión

Liferay 6.1 Custom theme

OgbaOghene Ozoro, modificado hace 11 años.

Liferay 6.1 Custom theme

New Member Mensajes: 18 Fecha de incorporación: 19/03/12 Mensajes recientes
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, modificado hace 11 años.

RE: Liferay 6.1 Custom theme

New Member Mensajes: 18 Fecha de incorporación: 19/03/12 Mensajes recientes
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, modificado hace 11 años.

RE: Liferay 6.1 Custom theme

New Member Mensajes: 18 Fecha de incorporación: 19/03/12 Mensajes recientes
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, modificado hace 11 años.

RE: Liferay 6.1 Custom theme

New Member Mensajes: 18 Fecha de incorporación: 19/03/12 Mensajes recientes
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>