Skip to content

Customizing Mobile Web Plus

Petar edited this page Jan 11, 2019 · 16 revisions

Introduction

These guidelines demonstrate how to adjust styling of your custom Mobile Web Plus app.

How does it work?

Every Mobile Web Plus app is provided with default Cascading Styles (CSS) styles which can be adjusted according to the customer's liking. These styles can be overridden using standard CSS every web-developer is familiar with.

Affected platforms

CSS styling, as described here, influences look-and-feel of your Mobile Web Plus app exclusively. Native apps are not affected.

In-CMS styling

The xamoom location-based CMS enables to adjust basic styles on the System - Style page which you can access after you log in.

At the moment there are 4 aspects that can be manipulated directly:

  • Background color,
  • Text color,
  • Link color and
  • Chrome-header color. These styles are applied on the fly by us, if you need to change them, the CMS is the best place to do it. The advantage of this functionality is that the changes are applied platform-wide, including native apps, too.

More information about system-wide styling can be found in our Manual.

Where to put my CSS styles?

If your Mobile Web Plus app is hosted in the xamoom infrastructure, you will find a tab called web style in the CMS. This tab features a CSS editor, which allows you to easily customize your Mobile Web Plus app.

If you decide to host yourself, the app we build for you is configured to check for a presence of an additional file called custom.css on the fly.

All your custom rules should be written in the web style editor or in this file, so that they are picked up by the app and interpreted by browser.

Placement of the custom.css

The custom.css should be located in the assets/ directory of the app. Let's assume your app is served from /public_html/ directory. The absolute path to the custom.css would be as follows: /public_html/assets/custom.css.

Backup

Please make sure you keep a backup of the custom.css file once you upload it or send it to us. In a case it is us who does the app shipment on your behalf, our deployment scripts do not override the custom.css. However, the devil never sleeps ;-)

Applying CSS rules

In this section we will demonstrate adjustments of the most common elements one might want to change.

Overall styling

Font

Import the external font file and apply its respective font-family attribute to the <body> element if you want to influence all texts of the system.

@import url('http://fonts.googleapis.com/css?family=Kalam');

body {
    font-family: 'Kalam', serif;
}

Header

Logo

Margins do not suit you? Would you like to quickly create a thin black border around your logo?

.brand-image {
    margin-top: 10px;        /* default */
    height: 30px;            /* default */
    float: left;             /* default */
    margin-right: 15px;      /* default */
    border: 1px solid black; /* new, for example black border */
}

System name

Not recommended, but system name might be hidden using this line of code:

.brand .brand-name {
    display: none; /* hide the system name! */
}

The menu (burger) icon

The header menu icon is a SVG image, thus CSS for SVG elements apply:

.mobile-menu-icon svg {
    fill: red; /* red coloring, whohooo */
}

Content-blocks

General Content-block styling

There are three CSS selectors which you can use to style every link-block, download-block and the audio-player. These are very useful if you want to set a general style for your app.

Background

To set the background you can use button-background.

.button-background {
    background-color: limegreen !important; /* new background color of all content blocks */
}

Text

To set the text (header included) you can use button-text.

.button-text {
    color: navy !important; /* text color  */
    font-size: 18px !important; /* text size */
}

If you only want to set the headers, you can use h4.button-text.

h4.button-text {
    color: white !important; /* changes text color only for headers */
}

If you only want to set the text, you can use p.button-text.

p.button-text {
    color: black !important; /* changes text color only for headers */
}

Icons

To set the icons you can use button-icon.

.button-icon {
    background-color: crimson !important; /* new background color of all content block icons */
}

These selectors exists so you can quickly associate the app with your corporate identity.

Audio player (audio block)

A very common demand from our customers is adjusting background color of the audio player to fit their corporate identity.

.audio-block {
    background-color: #aabbcc; /* new background color of the audio player, the default: #fe0; */
}

Keep in mind that the section showing actual position of the track has a background, too:

.audio-block .track-position-container {
    background-color: black; /* position tracker has now black background */
}

As well as the tracker itself has a dedicated color:

.audio-block .track-position-container .hatched {
    background-color: white; /* and white progress indicator */
}

Link blocks

All link blocks can be targeted using the link-block class. We distinguish 17 link-block types that are determined by their additional CSS class that follows the link-block class. This can be used in the custom.css file as follows:

.link-block.amazon { background-color: red }
.link-block.mail { background-color: red }
.link-block.facebook { background-color: red }
.link-block.flickr { background-color: red }
.link-block.google-plus { background-color: red }
.link-block.google-maps { background-color: red }
.link-block.itunes { background-color: red }
.link-block.itunes-app { background-color: red }
.link-block.linkedin { background-color: red }
.link-block.soundcloud { background-color: red }
.link-block.spotify { background-color: red }
.link-block.phone { background-color: red }
.link-block.twitter { background-color: red }
.link-block.web { background-color: red }
.link-block.wikipedia { background-color: red }
.link-block.youtube { background-color: red }
.link-block.instagram { background-color: red }

Download block

There are 2 download-blocks that an enduser can take advantage of when saving a new contact or an event entry to his calendar - vcard or ical:

.download-block.vcard { background-color: red }
.download-block.ical { background-color: red }

E-book block

Regardless of the file type, E-book blocks can be targeted using the combination of download-block & ebook class:

.download-block.ebook { background-color: red }

Conclusion

If you feel that it would be nicer to provide more granular structure in order to target further elements/sections of the page, feel free to contact us at support [at] xamoom.com. Our product undergoes modifications on a regular basis, hence we would like to kindly ask you for understanding if the documentation is out-of-date and letting us know about any inconsistencies you may find. Thank you a lot!

Developed in Austria with <3

You can’t perform that action at this time.