- Go to OpenCart Admin>Extensions > Modules.
- Find the OpenCart Mobile Framework Admin panel.
- Choose Install if it isn't already installed and then choose Edit.
- Go to the Advanced customization tab. On the left you can see a list of page elements and their colours. On the right, there is a screenshot of your desktop site (Click the "Generate new image" button, if you can't see the screenshot).
- Choose a page element to recolour. Here's what their names mean:
- Body—Use this to change the background colour and text colour of the entire mobile site.
- Link—Links on a webpage can have four states for which they can become a different colour. The first two—unvisited and visited are self-explanatory. Hover is the colour that the link becomes when you pass over it with the mouse pointer. Selected is the colour of the link when you click on it.
- Header—This is a setting for the background and text of the “colour strip” on top of the mobile site (the header).
- Primary navigation—Use this to change the colour of the menu on the bottom of the mobile site, e.g. “Home”, “Account”, etc.
- Secondary navigation—These colourpickers set the colours of the category list on the front page and all subcategories, as well.
- Button—Use this setting to change the colour of the buttons, such as “Search” and “Add to cart”, throughout the mobile site.
For example, let's change the background colour of buttons
- Click on the small square that shows the current colour. For example:
You have 2 options to change the colour:
- Use the colourpicker that pops up
- Click on the screenshot of your desktop site (on the right) to pick a colour from there
If you don't see the screenshot of your desktop site, click the Generate New Image button at the bottom of the page. !Please note! When generating a new screenshot do not close or scroll the newly opened browser tab. Just wait until generation is finished and the tab will close automatically.
- Create a custom mobile theme, if you don't have one
- Open the file
catalog/view/theme/your_theme/stylesheet/colors.scssin any text editor (e.g. Notepad)
- A line in
colors.scsslooks like this:
Before the hash sign(#) is the name of a page element. After the hash sign you can see the colour of that element (the colour code). (Do not change anything before the hash or your theme will become unusable.)
Here's what the names of some of the page elements mean:
$body-bgcolor = Mobile page background colour
$body-text-color = Text colour of the entire mobile site
$header-bgcolor = The colour strip at the top of the mobile site (the header), where your logo is
$primary-nav-bgcolor = The background colour of the bottom menu ( Where the "Home" button is)
$primary-nav-link-color = The text colour of the bottom menu
$secondary-nav-item-bgcolor = The background colour of the category list
$secondary-nav-link-color = The text colour of the category list
$button-bgcolor = The background colour of buttons
$button-text-color = The text colour on buttons
$input-bgcolor = The background colour of text boxes
Now pick one page element, whose colour you want to change. For example
- Use an online colour picker to pick a new colour and copy the colour code.
- Replace the current colour code of the page, like so:
- Save the file.
Refresh your mobile site and you should see the changes.