Liferay 6.1: Changing Portal Themes

Liferay controls the look of the portal via the use of Portal Theme. Portal Administrators can switch Portal Themes in the Look and Feel Section of Site Pages settings.

1) Start Liferay Server.

2) Open Liferay Portal Home.


3) Log into the portal using test@liferay.com credential.



4) Browse Liferay Portal Front page. (http://localhost:8080/web/guest/home)


5) Go to Control Panel.


6) Go to Liferay/Site Pages.

7) Notice that towards the bottom of the Look and Feel Section, there is a sub-section Available Themes.

7.1) By default, 7Cogs Theme have been included in the Liferay bundle.

8) Switch to 7Cogs Theme.

8.1) Click 7Cogs radio button.

8.2) Click Save

8.3) Get a success message.

9) Browse Liferay Portal front page.

Notice that the Welcome button is aligned to the right of the page.

Liferay 6.1: Portal Themes and Color Schemes

Liferay allows a Portal Theme to contain different color schemes. Portal Administrators can change the color schemes of the portal while maintaining the same theme.

1) Start Liferay Server.

2) Open Liferay Portal Home.


3) Log into the portal using test@liferay.com credential.



4) The Liferay Portal Front page is displayed. (http://localhost:8080/web/guest/home)
Liferay Portal is using Classic Theme and Blue Color Scheme.


5) Go to Control Panel.



6) Go to Liferay/Site Pages.


7) Notice that in the main window, in the Look and Section, there is a sub-section Color Schemes.
There are three color schemes; Blue,Green and Orange.


8) Change Color Scheme to Orange.
8.1) Click Orange radio button.


8.2) In the Look and Feel Control Box, Click Save.

8.3) Get a success message.

8.4)  Reload The Liferay Portal Front page. (http://localhost:8080/web/guest/home)
Liferay Portal now looks orangish.


8.5) If you compare it (the above screenshot) against step 4 (the below screenshot), you might notice the original looks bluish.


8.6) Changing Color Scheme to Green Color will produce a greenish output.

Liferay 6.1: Portal Themes

All themes in Liferay are based on one "master" theme that provides a simple but elegant design. By simple modifications in a few CSS files, developers can produce a multitude of themes.

Liferay themes provide control over:
a) All the images used outside of the portlets,
b) Images used inside Liferay portlets (including icons),
c) HTML code of the page (outside of the portlets),
d) HTML code of the portlet box,
e) The position and behavior of the top navigation elements.


1) Start Liferay 6.1 Server.

2) Open Liferay Portal Home.


3) Browse portal url
e.g localhost:8080/web/guest/home.
Click Sign In.


4) Enter login credentials.
By default, Liferay comes with username/password test@liferay.com/test.

You may be required to change the password. ( hint: change password to 'password').

If this is your first time logging in, you may be required to set pass question. ( hint: set pass question 'what is portal name?' and answer 'liferay'.)



5) You are now logged to the portal using 'Test' credential (refer top right of the screenshot).


6) Click Go to/Control Panel.



7) A Control Panel page is displayed.


8) Click Site Pages.
Notice the Look And Feel section. This is the section that assigns a theme to a specific Liferay Portal.


9) Components of Look and Feel section
Look And Feel Control Box.
Display Category Tab, i.e Regular Browsers or Mobile Devices.
Curren Theme selector.
Color Scheme selector.
Settings (bullet style).
Theme chooser and Install More option.
Custom CSS.



10) Click Install More.



Alternatively, you can access the above page by using the Side Panel link.
Go to Server Panel, click Plugins Installation.

Xcode 4.6: Embedding Webpage in iOS App

This tutorial guides the reader to embed a webpage in an iOS App. The steps is adapted from http://www.appcoda.com/storyboard-tutorial-create-tab-bar-controller-and-web-view/

PRE-REQUISITE:
1) Xcode 4.6
2) Sample Webpage (Download Sample)

STEPS:

1) Create a new oroject. Choose Single View Application.

2) Give a name WebView1.

3) Click Create.

4) After project files have been created, click on the NIB file. Go to Object Panel. Find WebView object, drag to the main view.

5) Bind the WebView component to ViewController.h as an outlet. give the name webView.

6) Import Sample Html files to the project.

7) Edit viewcontroller.m as follows:

//

//  BIDViewController.m

//  WebView1

//

//  Created by NOTARAZIMAC on 3/20/13.

//  Copyright (c) 2013 Apress. All rights reserved.

//

#import "BIDViewController.h"

@interface BIDViewController ()

@end

@implementation BIDViewController

@synthesize webView;

- (void)viewDidLoad

{

    [super viewDidLoad];

// Do any additional setup after loading the view, typically from a nib.

    

    [super viewDidLoad];

    // Add code to load web content in UIWebView

    NSURL *url = [NSURL fileURLWithPath:[[NSBundle mainBundle]pathForResource:@"about.html" ofType:nil]];

    NSURLRequest *request = [NSURLRequest requestWithURL:url];

    [webView loadRequest:request];

}

- (void)didReceiveMemoryWarning

{

    [super didReceiveMemoryWarning];

    // Dispose of any resources that can be recreated.

}

@end

8) run.

Dreamweaver CS5.5: Build Mobile Apps based on jQuery Mobile

This tutorial guides the reader to build Mobile Apps using Dreamweaver CSS5.5 based on jQuery Mobile.

PRE-REQUISITE
1) Pre-installed Dreamweaver CS5.5 (It must be CS5.5 because this version supports Mobile Development) (download Dreamweaver CS5.5)
2) Pre-installed usbwebserver (to test web server environment) (download usbwebserver)
3) Chrome with Ripple extension (to emulate mobile look) (install Ripper)

STEPS
1) Identify a storage location in your PC for localhost web files.
e.g., C:\DevPackDWMobile\usbw\root


2) Test that web server environment is ok by double-clicking usbwebserver icon. Bypass Firewall blocks for Apache and MySQL if you are prompted. Green light indicates that the Apache and MySQL is running well.


3) Run Dreamweaver CS5.5
If this is your first time running of Dreamweaver CS5.5, go to menu Site\New Site... to define your Website location.



4) Set Site Name and Local Site Folder.
Point your Local Site Folder to your usbwebserver root folder (in Step 1).
Click Save.


5) Select Create New\More...


6) In the new document dialog window, choose Page from Sample\ Mobile Starters\ jQuery Mobile (Local)
Make sure Doc Type is HTML5.
Click Create.



7) A new page is created.
Using the Split Window display, the codes and design page are displayed side by side.
Notice the Live Code and Multiscreen button.


8) Click Live Code button.
Ignore Flash Plugin warning. We are not using Flash element here. No need to worry about that.


9) Click on Multiscreen\ 320 x 480 (Smart Phone).


9.1) The page adjusts itself into the selected dimension.


10) Save the page as index.html in the folder specified in Step 4 above.


10.1) Dreamweaver CS5.5 may prompt you to confirm copying dependent files to which you respond by clicking Copy.


11) Make sure that your usbwebserver is running.
Browse your project, i.e http://localhost:8081/mobileproject1


12) Click Ripple Button. Click Enable.


12.1) Ripple may ask you further to select test platform.
Choose Mobile Web (default)


12.2) Go to Device selection. Choose iPhone 4.


12.3) Ripple will emulate the display based on the device that you have selected.



13) Click on Page Two.
Notice that Back button gives you the feeling of mobile look.