The portal defines some settings that allow the theme to determine certain behaviors. As of this writing, predefined settings are only available for portlet borders, bullet styles, and the site name, but more settings may be added in the future. Modify these settings from the liferay-look-and-feel.xml file.

Let’s get on with learning about predefining settings using themes. First, let’s take a look at settings for portlet borders.

Portlet Borders

The theme turns on portlet borders, by default. But you can turn them off by setting portlet-setup-show-borders-default to false in your theme’s liferay-look-and-feel.xml file. For example, the following setting, makes border display configurable for the portal administrator, and disables showing the borders as the default:

<settings>
    ...
    <setting
        configurable="true"
        key="portlet-setup-show-borders-default"
        type="checkbox"
        value="false"
    />
    ...
</settings>

Now that you’ve configured portlet borders, let’s configure bullet styles used in your sites.

Bullet Styles

Liferay’s Navigation portlet can be configured to use any bullet styles inherited by your theme or implemented in your theme. For example, if your theme uses Liferay’s classic theme as its base parent, you can leverage its arrows bullet style. Here is the arrow bullet style’s class from the classic theme’s _diffs/css/custom.css file:

.nav-menu-style-arrows ul {
list-style-image: url(@theme_image_path@/navigation/bullet_selected.png);
}

You can make this bullet style, along with any bullet styles you implement, available for site administrators to use in their site’s Navigation portlet. Just follow the naming convention as demonstrated below, substituting [bullet style name], with your bullet style’s name:

.nav-menu-style-[bullet style name] ul {
    ... CSS selectors ...
}

Then, make the bullet-style setting configurable in your liferay-look-and-feel.xml file. From this setting, list optional bullet styles you want available to site administrators, and set a default bullet style as well:

<settings>
    ...
    <setting
        configurable="true"
        key="bullet-style"
        options="arrows,dots,classic,modern
        value="dots"
    />
    ...
</settings>

Your site administrators can now choose the bullet style to apply to the Navigation portlet. They select it from the site’s Look and Feel control page.

Using CSS, and maybe some unobtrusive JavaScript, you can create a navigation menu that looks just the way you want it. Next, let’s take a look at how to configure display your site’s name.

Site Names

The site name settings let site administrators decide whether to display a site’s name (i.e., title). But, if you are using using logo, that mentions your company or site, on each site page, you may find the default site name display distracting.

theme-site-name.png

Since the themes you create in the Plugins SDK use Liferay’s _unstyled theme as a base theme, you have the following settings available for configuring site name display:

  • show-site-name-default configures site name display and lets you turn it on/off by default.
  • show-site-name-supported configures support for site name display and lets you turn it on/off by default.

Here is how you might specify them in your liferay-look-and-feel.xml file:

<settings>
    ...
    <setting
        configurable="true"
        key="show-site-name-default"
        type="checkbox"
        value="true"
    />
    <setting
        configurable="true"
        key="show-site-name-supported"
        type="checkbox"
        value="true"
    />
    ...
</settings>

With these settings configurable, site administrators can control site name display from the each site’s Look and Feel control page.

Next we’ll see how Liferay lets your theme inherit styling from a parent theme.

0 (0 Votes)
Color Schemes Previous