Previously, you built the framework for the theme and imported the content for the Lunar Resort. The end result may have seemed a little underwhelming. All your work left you with what appeared to be an un-styled theme. Rest assured, your hard work was not for nothing. In this section of the Learning Path you’ll create the CSS that styles the theme elements you created in the previous sections.

Go ahead and get started!

Setting Up custom.css

Before you add the CSS for your theme, you’ll need to complete some preliminary steps. Open custom.css in your _diffs/css/ directory. You’ll add the CSS piece by piece, just as you saw in the HTML...

Read More

Styling the Wrapper

The Wrapper is the container that holds the theme’s elements. It is used for positioning and styling the theme as a whole. You’ll use the Wrapper to create the dimensions and background for the...

Read More

Styling the Banner

The Banner holds all the elements in the theme’s header. This section is is the first thing users see when they visit your site. Add the following code to custom.css below the Banner placeholder:...

Read More

Styling the Content Div

The Content

is used to position and set the dimensions for the theme’s content. Currently the Content
is pressed right up against the edge of the Wrapper, giving the theme a...

Read More

Styling the Footer

As you create a theme, you want to keep the whole picture in view. The footer can be seen as the bow that nicely wraps the finished package. With that in mind, it’s good to find a way to unify the...

Read More

Styling Custom Portlets

If you click the Make Your Reservation link, the site presents you with a reservation form, along with the Guestbook portlet from the MVC Learning Path. The Guestbook portlet is looking pretty...

Read More

Using Bootstrap Styles

Since Liferay Portal 6.2, themes are based on Bootstrap 2.3.2. When writing common markup such as buttons, forms, and layouts, it is recommended that you let Bootstrap handle the styling for you....

Read More
0 (0 Votes)
Defining Previous