Toolbar Dock without drop-down menu

http://www.liferay.com/web/guest/community/forums/-/message_boards/message/2059252?_19_redirect=%2Fweb%2Fguest%2Fcommunity%2Fforums%2F-%2Fmessage_boards%2Fsearch%3F_19_redirect%3D%252Fweb%252Fguest%252Fcommunity%252Fforums%26_19_breadcrumbsCategoryId%3D0%26_19_breadcrumbsMessageId%3D0%26_19_searchCategoryId%3D0%26_19_searchCategoryIds%3D0%26_19_threadId%3D0%26_19_tabs1TabsScroll%3D%26_19_keywords%3D%2Bsize

 

Hi there,

I have done this using solely CSS. In any CMS I work with, I abstain as much as I can from removing markup from the template or modifying the accompanying JavaScript. My reason for this is that if later down the line I'm not working on the project and a new developer/designer is, they have a more familiar starting point to work with. For Liferay, I think this is especially important because it's not as popular, as far as I can tell from the size of the support community, as other CMS such as Drupal or even Joomla. I anticipate that if it is someone's first time working with the CMS, they'd be happier if the template they are using was at least somewhat close to what is featured in tutorials and the documentation.

You need to strip down the default styles and then make floats your friend.

These classes may help you:

 1/* Top Right JS user actions dock */
 2
 3.js .interactive-mode, .js .interactive-mode h2, .js .interactive-mode h2 span{
 4    background: none;
 5    color: #000;
 6}
 7
 8.js .interactive-mode ul{
 9    display: block !important;
10    border: 0;
11}
12
13.js .interactive-mode .lfr-dock-list li{
14    float: left;
15    clear: none;
16    border-top: 0px;
17}
18
19.js .interactive-mode h2{
20    padding: 0;
21}
22
23.js .interactive-mode h2 span{
24    border: 0;
25    padding-right: 0;
26}
27
28h2.user-greeting{
29    padding; 0;
30    font-size: 1.2em;
31}

This of course is useful for the dock where it is by default and would need to be altered depending on your placement of the dock. Might be better to get it working where it usually is, then move it.

If you need to move dock, you want to pull:

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

...from portal_normal.vm and place it where it needs to be, probably in a template file for the specific portlet that you need it in.

Remember, editing the template is easy enough but CSS is really your power tool for UI development. (And JavaScript!)

Hope this helps,

- Angelina