How to create a custom mobile theme

Create a mobile theme 

  1. Navigate to the OpenCart theme directory, i.e.
    catalog/view/theme
    and create a new directory here. Name it anything you like — thememobile, for example. It will contain the files for your mobile theme. 
  2. Choose a default theme you want to customize.
    • To use the blue theme, go to catalog/view/theme/omf2 (If you don't have an omf2 directory, go to catalog/view/theme/omf instead)
    • To use the flat (white) theme (OMF 2 only), go to catalog/view/theme/omf2-min
  3. Copy these files and directories:
    • the stylesheet directory
    • the images directory
    • the file s.php
    • the file scss.inc.php
  4. Paste the copied files and directories in catalog/view/theme/thememobile (your mobile theme directory)
  5. Apply your theme. Go to the OpenCart Admin panel>Extensions>Modules. Locate the  OpenCart Mobile Framework Administration and click Edit.  You will see this screen:
  6. From the Mobile Theme dropdown choose the name of your custom mobile theme(e.g. thememobile). 
  7. You can change the mobile theme colours on the Advanced customization tab*.
    *Please note: The Advanced customization tab is only available in OMF v2.0+ on OpenCart 1.5.2+.
  8. Click Save.
Change theme colours (OMF v1.x) 
 
Please note: in previous versions of OMF(e.g. OMF v1.x) you have to change the colours manually. Here's how:
  1. Open the file: catalog/view/theme/your_theme/stylesheet/colors.scss 
     in any text editor (e.g. Notepad).
  2. A line in colors.scss  looks like this: 
    $button-bgcolor: #003366;
    Do not change anything before the hash sign(#) or your theme will become unusable. After the hash you can see a colour specified in hex. Change this number to display the colour of your choice. You can see the hex colour codes in most picture manipulation tools (like Photoshop) or use an online colour picker
Refresh your mobile site and you should see the changes.

Further customization

You can override every rule found in catalog/view/theme/your_theme/stylesheet/mobile2.scss (or catalog/view/theme/your_theme/stylesheet/mobile.scss in older versions) using catalog/view/theme/your_theme/stylesheet/custom_mobile.scss

Change the border colours and shadows

This is valid only for custom themes based on the blue theme. To change border colours and shadows edit the file
catalog/view/theme/your_theme/stylesheet/colors_formulas.scss
Most of the names are self-explanatory. You can play with the lightness and saturation settings until you achieve the desired effect. 

Note! Be sure to change only the percentage values.

Developer notes

We have switched from standard CSS to preprocessed CSS through SCSS. This allows variables, mixins (functions in CSS), nesting, inheritance and more. We're currently using the Compass SCSS library.

 

Have more questions? Submit a request

0 Comments

Article is closed for comments.
Powered by Zendesk