Building mobile browser and hybrid applications with eZ Publish

Creating a sample Hybrid Mobile Application (continued)

Images

We have already prepared images for our mobile website, which you can download here [https://github.com/ezsystems/ezmobile/tree/master/ezpublish/extension/mobile]. Copy the following files into the extension/mobile/design/mobile/images folder:

1. back.png
2. bg.png
3. food-review.png
4. footer-bg.png
5. header-bg.png
6. logo.png
7. menus.png
8. recipes.png
9. search.png

Stylesheets

In the previous steps, we have made the necessary template modifications and added images used in the mobile site design. Next, we are going to create two CSS files, one that is responsible for styling the pagelayout template and another that is responsible for styling actual content templates. Create these CSS files in extension/mobile/design/mobile/stylesheets/ as follows:

mobile
│
├── design
│   └── mobile
│       ├── images
│       ├── javascript
│       ├── override
│       │   └── templates
│       │       └── full
│       ├── stylesheets
│       │   ├── content.css
│       │   └── pagelayout-mobile.css
│       └── templates
│           ├── content
└── settings

pagelayout-mobile.css

In extension/mobile/design/mobile/stylesheets/pagelayout-mobile.css, paste the following:

body  {
    background-position: top center;
    background-image: url(../images/bg.png);
    background-repeat: repeat-y;
    color: #003F72;
}
 
div#page {
    width: 320px;
    background-image: url(../images/header-bg.png);
    background-repeat: no-repeat;
}
 
div#page-wrapper {
    background-image: url(../images/footer-bg.png);
    background-position: bottom left;
    background-repeat: no-repeat;
}
 
div#header {
    height: 122px;
    background-color: transparent;
    padding-bottom: 0;
    padding-top: 0;
}
 
div#logo {
    margin: 0;
    padding-left: 3%;
}
 
div#backbutton {
    padding-left: 17px;
    padding-top: 21px;
}
 
div#usermenu,
div#searchbox,
div#topmenu-position,
div#path {
    display: none;
}
 
div#footer {
    height: 80px;
    background-color: transparent;
    background-image: none;
    padding: 0;
    margin: 0;
}
 
div#footer address {
    padding: 5.25em 5em 0 5em;
    color: #FFF;
    font-size: 90%;
}
 
div#footer address a {
    color: #FFF;
}

content.css

In extension/mobile/design/mobile/stylesheets/content.css, paste the following:

div.grid {
    letter-spacing: -0.31em;
    *letter-spacing: normal;
    word-spacing: -0.43em;
}
 
div.unit-1-2,
div.unit-1-4,
div.unit-3-4 {
    display: inline-block;
    zoom: 1; *display: inline;
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top;
}
 
div.unit-1-2 {
    width: 50%;
}
 
div.unit-1-4 {
    width: 25%;
}
 
div.unit-3-4 {
    width: 75%;
}
 
div.category {
    text-align: center;
}
 
div.category h2 {
    font-weight: normal;
    color: #003F72;
}
 
div.content-view-full, div.content-search, div.content-edit {
    padding: 1em 1em 2.5em 1em;
}
 
div.attribute-header h1 {
    color: #003F72;
    font-size: 1.8em;
}
 
div.content-view-line div.class-article {
    border-bottom: 1px dotted #003F72;
    margin-bottom: 0.5em;
}
 
div.content-view-line div.class-article h2 a {
    color: #990000;
    font-weight: normal;
}
 
div.content-view-line div.attribute-image {
    float: left;
    margin: 0.25em 0.25em 0 0;
}
 
div.content-search div.feedback h2 {
    color: #003F72;
    font-weight: normal;
}
 
div.content-search div.feedback {
    padding-top: 0.5em;
    border-top: 1px dotted #003F72;
    margin-bottom: 2em;
    margin-top: 1em;
}
 
div.content-search input.halfbox {
    border: 1px solid #003F72;
    background-color: #98CDF1;
    width: 65%;
    height: 21px;
}
 
input.box {
    border: 1px solid #003F72;
    background-color: #98CDF1;
    height: 21px;
}
 
textarea.box {
    border: 1px solid #003F72;
    background-color: #98CDF1;
}
 
div.content-search input.button {
    font-size: 110%;
}
 
div.content-view-full div.content-view-children {
    border-top: 1px dotted #003F72;
    margin-top: 0.5em;
    padding-top: 0.5em;
}
 
div.content-view-line div.class-comment h2 {
    font-weight: normal;
    color: #990000;
}
 
div.attribute-star-rating {
    display: none;
}
 
div.attribute-byline p.date {
    float: left;
    font-size: 80%;
    color: #006DC6;
}
 
div.attribute-byline p.author {
    float: right;
    font-size: 80%;
    color: #006DC6;
}
 
input.button, input.defaultbutton {
    color: #FFDDDD;
    border: 1px solid #990000;
    background-color: #990000;
    background-image: url(../images/button-bg.png);
    background-repeat: repeat-x;
    font-size: 85%;
    padding: 0.15em 1em;
    font-weight: normal;
    cursor: pointer;
    margin: 0.5em 0;
}
 
div.content-edit label {
    color: #000000;
}
 
div.content-edit div.attribute-header h1 {
    color: #990000;
}

Content

All that’s left to complete the mobile siteaccess is to populate some content. Log in to the Administration Interface and create three objects of the Folder content class, placing them beneath the root of the site. They should have the following titles: “Recipes”, “Food reviews”, and “Menus”. If you access your mobile siteaccess’ URL in a mobile browser, you should see the following: