Bloggers recientes

Eric Kirby

Staff
4 Mensajes
27 de agosto de 2015

Meera Prince

22 Mensajes
27 de agosto de 2015

Olaf Kock

Staff
101 Mensajes
27 de agosto de 2015

Jorge Ferrer

Staff
63 Mensajes
20 de agosto de 2015

Janne Hietala

6 Mensajes
19 de agosto de 2015

Roguen Keller

Staff
1 Mensajes
12 de agosto de 2015

Neil Griffin

Staff
47 Mensajes
12 de agosto de 2015

Sana Razvi

Staff
1 Mensajes
10 de agosto de 2015

Iliyan Peychev

Staff
7 Mensajes
7 de agosto de 2015

Sampsa Sohlman

Staff
3 Mensajes
5 de agosto de 2015
« Atrás

Random theme related tips

Company Blogs 11 de febrero de 2008 Por Nate Cavanaugh Staff

People seemed to like the "hey buddy, want to hear a secret?" nature of my last post, and in that tradition, I will try to drop some tips about some of the lesser known ways of playing around with the Liferay themes.

Browser Selectors
In Liferay since 4.3, we've used a method of browser detection called Browser Selectors. What this does is allows you to style your theme for different browsers, different operating systems, and whether or not the users have javascript on or not.

This allows you to style for not only a certain browser, but also a certain browser version.
 

The selector class always exists on the html tag, which means that the browser metadata used in the class name will always be first in the selector chain.
For example:

.js #navigation{}
This styles the navigation element only if the user has javascript turned on.

.ie #navigation{}
This would style the navigation element only if the user is using (any version of) Internet Explorer.

Also:

.win.firefox2 #navigation{}
This would style the navigation element only if the user is using windows, and Firefox version 2.

This is much cleaner than using hacks in your css to target a browser.
Mind you, these will only work if the user has Javascript turned on.

Turning off portlet title editing
Sometimes you don't want your theme to have editable titles (you know when you click on a title and the admin user can edit the name?)

The way to do this is to open up your portlet.vm in your theme's templates/ directory, and add this class name "not-editable"

So the HTML would look something like this:
<span class="portlet-title not-editable">

Turning off dragging and dropping of navigation, and turning off the Add Pages functionality
Sometimes you don't want this added functionality. It's great sometimes, but sometimes, it can be a pain. There are two classes that exist on the navigation div that control this functionality.
These classes are sort-pages and modify-pages.

"sort-pages" adds the ability to drag and drop your navigation elements, and if you remove this class, you'll be able to add new pages on the fly, but you won't be able to sort them.
"modify-pages" adds the ability to edit the page's title, and adds the "Add Page" button to the navigation as well.

Turning off the Drop Down dock
Sometimes, you don't want the interactive dock that drops down with a list of actions. In the Classic theme, for instance, you can have it display as a friendly horizontal list of icons and text. To do this, just open up dock.vm and remove the class of "interactive-mode" from the dock div.

I think that's about it for now. I'll try to blog a few more as they come to me, but overall, this might/should/maybe help out some people who have been curious :)

Respuestas anidadas Autor Fecha
Great post Nate, I'll probably be referring... JR Houn 12 de febrero de 2008 9:32

Great post Nate, I'll probably be referring people to this blog for some of these tips. Thanks!
Publicado el día 12/02/08 9:32.