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 workwith, I abstain as much as I can from removing markup from the templateor modifying the accompanying JavaScript. My reason for this is that iflater down the line I'm not working on the project and a newdeveloper/designer is, they have a more familiar starting point to workwith. For Liferay, I think this is especially important because it'snot as popular, as far as I can tell from the size of the supportcommunity, as other CMS such as Drupal or even Joomla. I anticipatethat if it is someone's first time working with the CMS, they'd behappier if the template they are using was at least somewhat close towhat 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}

Thisof course is useful for the dock where it is by default and would needto be altered depending on your placement of the dock. Might be betterto 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")

...fromportal_normal.vm and place it where it needs to be, probably in atemplate 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