Blogs
Marcos Castro
Welcome to my first post!
As a theme developer in Liferay I start this blog with the goal of sharing all type of useful content.
The first theme is based on _styled and tries to get the style of 'Classic responsive dockbar' adding the posibility of customice colours, for this we only need to add dockbar_classic.css in our _styled theme, into main.css:
main.css, last line:
@import url(dockbar_classic.css);
We are going to work with dockbar split because changes will be more visible, to add the class dockbar-split in our Body, like Nate told us time ago:
https://www.liferay.com/es/web/nathan.cavanaugh/blog/-/blogs/the-nitty-gritty-theme-improvements-and-bootstrap-in-liferay-6-6
Or adding a theme variable:
Adding on liferay-look-and-feel.xml:
<setting configurable="true" key="dockbar-split" type="checkbox" value="true" />
and init_custom.vm or portal_normal.vm:
#set ($dockbar = $theme.getSetting("dockbar-split"))
#if ($dockbar == true)
#set ($css_class = "${css_class} dockbar-split")
#end
If you want to modify the dockbar colours, you only need to open the dockbar_classic.css and modify the next lines:
Some examples:
Easy or not? ;)
dockbar-classic-theme Github:
https://github.com/marcoscv-work/experimental-liferay-themes/tree/master/dockbar-classic-theme
Now we are going to get our dockbar and give it a new aspect and funcionallity, it will look like this animation:
I called this theme “dockbar vertical”.
We will follow the same way that we've made at the previus example, adding the css file dockbar_vertical.css into a custom.css (_styled theme based):
@import url(dockbar_vertical.css);
And a little script into main.js, to create new icon to open dockbar and detect click over this icon:
if (portletDockbar) {
var BODY = A.getBody();
BODY.append('<div class="icon-toggle-dockbar vertical-dockbar-close"><i class="icon-cog"></i></div>');
BODY.append('<div class="layer-mobile visible-phone vertical-dockbar-close"></div>');
var toggleDockbar = A.one('.icon-toggle-dockbar');
var toggleDockbarClose = A.all('.vertical-dockbar-close');
var toggleDockbarIcon = A.one('.icon-toggle-dockbar .icon-cog');
if (toggleDockbar) {
toggleDockbarClose.on(
'click',
function() {
portletDockbar.toggleClass('over');
toggleDockbar.toggleClass('over');
toggleDockbarIcon.toggleClass('icon-remove');
toggleDockbarIcon.toggleClass('icon-cog');
BODY.toggleClass('lfr-has-dockbar-vertical');
}
);
}
};
Obviously we have two new images to create the user background animation:
To customice this animation you can changue the images directly or change the css animation opening the file dockbar_vertical.css at lines 678 to 685, you could delete or remplace for example by a static background:
&>a {
background: url(@theme_image_path@/dockbar_vertical/back-user.png) no-repeat left top
}
dockbar-vertical-theme Github:
https://github.com/marcoscv-work/experimental-liferay-themes/tree/master/dockbar-vertical-theme
We could customize the colours and icons sizes:
dockbar-bubbles-theme Github:
https://github.com/marcoscv-work/experimental-liferay-themes/tree/master/dockbar-bubbles-theme
https://github.com/marcoscv-work/experimental-liferay-themes/
Get more live info in my twitter account: @marcoscava
Please, let me know your feedback to keep improving! ;)
Related Assets...
More Blog Entries...
