Here are some tips to customize Jolla browser. You need root privileges (devel-su) and text editor such as vim, nano, tinyedit etc.

Sailfish browser main page layout:

/usr/share/sailfish-browser/pages/BrowserPage.qml

Look for Browser.IconButton items:

Browser.IconButton {
...button details here...
}

Increase the amount of icons on toolbar in portrait mode

Default values (5 icons):

// 5 icons, 4 spaces between
spacing: isPortrait ? (width - (backIcon.width * 5)) / 4 : Theme.paddingSmall

To add the sixth button into portrait view change values to:

spacing: isPortrait ? (width - (backIcon.width * 6)) / 5 : Theme.paddingSmall

Visibility in Landscape versus Portrait

Some of the buttons are visible only in landscape by default. Under Browser.IconButton add or remove (or comment/uncomment line):

visible: isLandscape

For instance you can add 'Close tab' button to portrait mode by uncommenting the line under button entry:

Browser.IconButton {
//                  visible: isLandscape
                    enabled: webView.tabModel.count > 0
                    icon.source: "image://theme/icon-m-close"
                    onClicked: {
                                webView.tabModel.closeActiveTab()
                                webView.activatePage(webView.tabId, true)
                               }
                   }

If you do this, remember to increase max button amount to six, or all buttons won't fit on the screen.

How to re-arrange toolbar icons

Example: How to switch the locations of 'Favorites' and 'Back' buttons with each other:

Original:

Browser.IconButton {
                    id:backIcon
                    icon.source: "image://theme/icon-m-back"
                    enabled: webView.canGoBack
                    onClicked: webView.goBack()
                }

Browser.IconButton {
                    property bool favorited: favorites.count > 0 && favorites.contains(webView.url)
                    enabled: webView.visible
                    icon.source: favorited ? "image://theme/icon-m-favorite-selected" : "image://theme/icon-m-favorite"
                    onClicked: {
                        if (favorited) {
                            favorites.removeBookmark(webView.url)
                        } else {
                            favorites.addBookmark(webView.url, webView.title, webView.favicon)
                        }
                    }
                }

Switch the buttons around:

Browser.IconButton {
                    property bool favorited: favorites.count > 0 && favorites.contains(webView.url)
                    enabled: webView.visible
                    icon.source: favorited ? "image://theme/icon-m-favorite-selected" : "image://theme/icon-m-favorite"
                    onClicked: {
                        if (favorited) {
                            favorites.removeBookmark(webView.url)
                        } else {
                            favorites.addBookmark(webView.url, webView.title, webView.favicon)
                        }
                    }
                }

Browser.IconButton {
                    id:backIcon
                    icon.source: "image://theme/icon-m-back"
                    enabled: webView.canGoBack
                    onClicked: webView.goBack()
                }

Here are some tips to customize Jolla browser. You For GUI layout changes you need root privileges (devel-su) and text editor such as vim, nano, tinyedit etc.

Browser.IconButton {
...button details here...
}

// 5 icons, 4 spaces between
spacing: isPortrait ? (width - (backIcon.width * 5)) / 4 : Theme.paddingSmall

spacing: isPortrait ? (width - (backIcon.width * 6)) / 5 : Theme.paddingSmall

visible: isLandscape

Browser.IconButton {
//                  visible: isLandscape
                    enabled: webView.tabModel.count > 0
                    icon.source: "image://theme/icon-m-close"
                    onClicked: {
                                webView.tabModel.closeActiveTab()
                                webView.activatePage(webView.tabId, true)
                               }
                   }

Browser.IconButton {
                    id:backIcon
                    icon.source: "image://theme/icon-m-back"
                    enabled: webView.canGoBack
                    onClicked: webView.goBack()
                }

Browser.IconButton {
                    property bool favorited: favorites.count > 0 && favorites.contains(webView.url)
                    enabled: webView.visible
                    icon.source: favorited ? "image://theme/icon-m-favorite-selected" : "image://theme/icon-m-favorite"
                    onClicked: {
                        if (favorited) {
                            favorites.removeBookmark(webView.url)
                        } else {
                            favorites.addBookmark(webView.url, webView.title, webView.favicon)
                        }
                    }
                }

Browser.IconButton {
                    property bool favorited: favorites.count > 0 && favorites.contains(webView.url)
                    enabled: webView.visible
                    icon.source: favorited ? "image://theme/icon-m-favorite-selected" : "image://theme/icon-m-favorite"
                    onClicked: {
                        if (favorited) {
                            favorites.removeBookmark(webView.url)
                        } else {
                            favorites.addBookmark(webView.url, webView.title, webView.favicon)
                        }
                    }
                }

Browser.IconButton {
                    id:backIcon
                    icon.source: "image://theme/icon-m-back"
                    enabled: webView.canGoBack
                    onClicked: webView.goBack()
                }

Here are some tips to customize Jolla browser. For GUI layout changes you need root privileges (devel-su) and text editor such as vim, nano, tinyedit etc.

For general preferences you root privileges are not required.

Sailfish browser layout

Main page layout file:

/usr/share/sailfish-browser/pages/BrowserPage.qml

To edit buttons layout, look for items called Browser.IconButton

Browser.IconButton {
...button details here...
}

Increase the amount of icons on toolbar in portrait mode

Default values (5 icons):

// 5 icons, 4 spaces between
spacing: isPortrait ? (width - (backIcon.width * 5)) / 4 : Theme.paddingSmall

To add space for the sixth button into portrait view change values to:

spacing: isPortrait ? (width - (backIcon.width * 6)) / 5 : Theme.paddingSmall

Visibility in Landscape versus Portrait

Some of the buttons are visible only in landscape by default. Under default but you can add them in portrait too.

If exists, under Browser.IconButton add or remove (or comment/uncomment line):

visible: isLandscape

For instance you can add 'Close tab' button to portrait mode by uncommenting the line under button entry:

Browser.IconButton {
//                  visible: isLandscape
                    enabled: webView.tabModel.count > 0
                    icon.source: "image://theme/icon-m-close"
                    onClicked: {
                                webView.tabModel.closeActiveTab()
                                webView.activatePage(webView.tabId, true)
                               }
                   }

If you do this, remember to increase max button amount to six, or all buttons won't fit on the screen.

How to re-arrange toolbar icons

Example: How to switch the locations of 'Favorites' and 'Back' buttons with each other:

Original:

Browser.IconButton {
                    id:backIcon
                    icon.source: "image://theme/icon-m-back"
                    enabled: webView.canGoBack
                    onClicked: webView.goBack()
                }

Browser.IconButton {
                    property bool favorited: favorites.count > 0 && favorites.contains(webView.url)
                    enabled: webView.visible
                    icon.source: favorited ? "image://theme/icon-m-favorite-selected" : "image://theme/icon-m-favorite"
                    onClicked: {
                        if (favorited) {
                            favorites.removeBookmark(webView.url)
                        } else {
                            favorites.addBookmark(webView.url, webView.title, webView.favicon)
                        }
                    }
                }

Switch the buttons around:

Browser.IconButton {
                    property bool favorited: favorites.count > 0 && favorites.contains(webView.url)
                    enabled: webView.visible
                    icon.source: favorited ? "image://theme/icon-m-favorite-selected" : "image://theme/icon-m-favorite"
                    onClicked: {
                        if (favorited) {
                            favorites.removeBookmark(webView.url)
                        } else {
                            favorites.addBookmark(webView.url, webView.title, webView.favicon)
                        }
                    }
                }

Browser.IconButton {
                    id:backIcon
                    icon.source: "image://theme/icon-m-back"
                    enabled: webView.canGoBack
                    onClicked: webView.goBack()
                }

Here are some tips to customize Jolla browser. For GUI layout changes you need root privileges (devel-su) and text editor such as vim, nano, tinyedit etc.

For general preferences you root privileges are not required.

Sailfish browser layout

Main page layout file:

/usr/share/sailfish-browser/pages/BrowserPage.qml

To edit buttons layout, look for items called Browser.IconButton

Browser.IconButton {
...button details here...
}

Increase the amount of icons on toolbar in portrait mode

Default values (5 icons):

// 5 icons, 4 spaces between
spacing: isPortrait ? (width - (backIcon.width * 5)) / 4 : Theme.paddingSmall

To add space for the sixth button into portrait view change values to:

spacing: isPortrait ? (width - (backIcon.width * 6)) / 5 : Theme.paddingSmall

Visibility in Landscape versus Portrait

Some of the buttons are visible only in landscape by default but you can add them in portrait too.

If exists, under Browser.IconButton add or remove (or comment/uncomment line):

visible: isLandscape

For instance you can add 'Close tab' button to portrait mode by uncommenting the line under button entry:

Browser.IconButton {
//                  visible: isLandscape
                    enabled: webView.tabModel.count > 0
                    icon.source: "image://theme/icon-m-close"
                    onClicked: {
                                webView.tabModel.closeActiveTab()
                                webView.activatePage(webView.tabId, true)
                               }
                   }

If you do this, remember to increase max button amount to six, or all buttons won't fit on the screen.

How to re-arrange toolbar icons

Example: How to switch the locations of 'Favorites' and 'Back' buttons with each other:

Original:

Browser.IconButton {
                    id:backIcon
                    icon.source: "image://theme/icon-m-back"
                    enabled: webView.canGoBack
                    onClicked: webView.goBack()
                }

Browser.IconButton {
                    property bool favorited: favorites.count > 0 && favorites.contains(webView.url)
                    enabled: webView.visible
                    icon.source: favorited ? "image://theme/icon-m-favorite-selected" : "image://theme/icon-m-favorite"
                    onClicked: {
                        if (favorited) {
                            favorites.removeBookmark(webView.url)
                        } else {
                            favorites.addBookmark(webView.url, webView.title, webView.favicon)
                        }
                    }
                }

Switch the buttons around:

Browser.IconButton {
                    property bool favorited: favorites.count > 0 && favorites.contains(webView.url)
                    enabled: webView.visible
                    icon.source: favorited ? "image://theme/icon-m-favorite-selected" : "image://theme/icon-m-favorite"
                    onClicked: {
                        if (favorited) {
                            favorites.removeBookmark(webView.url)
                        } else {
                            favorites.addBookmark(webView.url, webView.title, webView.favicon)
                        }
                    }
                }

Browser.IconButton {
                    id:backIcon
                    icon.source: "image://theme/icon-m-back"
                    enabled: webView.canGoBack
                    onClicked: webView.goBack()
                }

Here are some tips to customize Jolla browser. For GUI layout changes you need root privileges (devel-su) and text editor such as vim, nano, tinyedit etc.

For general preferences root privileges are not required.

Sailfish browser layout

Main page layout file:

/usr/share/sailfish-browser/pages/BrowserPage.qml

To edit buttons layout, look for items called Browser.IconButton

Browser.IconButton {
...button details here...
}

Increase the amount of icons on toolbar in portrait mode

Default values (5 icons):

// 5 icons, 4 spaces between
spacing: isPortrait ? (width - (backIcon.width * 5)) / 4 : Theme.paddingSmall

To add space for the sixth button into portrait view change values to:

spacing: isPortrait ? (width - (backIcon.width * 6)) / 5 : Theme.paddingSmall

Visibility in Landscape versus Portrait

Some of the buttons are visible only in landscape by default but you can add them in portrait too.

If exists, under Browser.IconButton add or remove (or comment/uncomment line):

visible: isLandscape

For instance you can add 'Close tab' button to portrait mode by uncommenting the line under button entry:

Browser.IconButton {
//                  visible: isLandscape
                    enabled: webView.tabModel.count > 0
                    icon.source: "image://theme/icon-m-close"
                    onClicked: {
                                webView.tabModel.closeActiveTab()
                                webView.activatePage(webView.tabId, true)
                               }
                   }

If you do this, remember to increase max button amount to six, or all buttons won't fit on the screen.

How to re-arrange toolbar icons

Example: How to switch the locations of 'Favorites' and 'Back' buttons with each other:

Original:

Browser.IconButton {
                    id:backIcon
                    icon.source: "image://theme/icon-m-back"
                    enabled: webView.canGoBack
                    onClicked: webView.goBack()
                }

Browser.IconButton {
                    property bool favorited: favorites.count > 0 && favorites.contains(webView.url)
                    enabled: webView.visible
                    icon.source: favorited ? "image://theme/icon-m-favorite-selected" : "image://theme/icon-m-favorite"
                    onClicked: {
                        if (favorited) {
                            favorites.removeBookmark(webView.url)
                        } else {
                            favorites.addBookmark(webView.url, webView.title, webView.favicon)
                        }
                    }
                }

Switch the buttons around:

Browser.IconButton {
                    property bool favorited: favorites.count > 0 && favorites.contains(webView.url)
                    enabled: webView.visible
                    icon.source: favorited ? "image://theme/icon-m-favorite-selected" : "image://theme/icon-m-favorite"
                    onClicked: {
                        if (favorited) {
                            favorites.removeBookmark(webView.url)
                        } else {
                            favorites.addBookmark(webView.url, webView.title, webView.favicon)
                        }
                    }
                }

Browser.IconButton {
                    id:backIcon
                    icon.source: "image://theme/icon-m-back"
                    enabled: webView.canGoBack
                    onClicked: webView.goBack()
                }

user_pref("font.minimum-size.x-western", 16);

Here are some tips to customize Jolla browser. For GUI layout changes you need root privileges (devel-su) and text editor such as vim, nano, tinyedit etc.

For general preferences root privileges are not required.

Browser.IconButton {
...button details here...
}

// 5 icons, 4 spaces between
spacing: isPortrait ? (width - (backIcon.width * 5)) / 4 : Theme.paddingSmall

spacing: isPortrait ? (width - (backIcon.width * 6)) / 5 : Theme.paddingSmall

visible: isLandscape

Browser.IconButton {
//                  visible: isLandscape
                    enabled: webView.tabModel.count > 0
                    icon.source: "image://theme/icon-m-close"
                    onClicked: {
                                webView.tabModel.closeActiveTab()
                                webView.activatePage(webView.tabId, true)
                               }
                   }

Browser.IconButton {
                    id:backIcon
                    icon.source: "image://theme/icon-m-back"
                    enabled: webView.canGoBack
                    onClicked: webView.goBack()
                }

Browser.IconButton {
                    property bool favorited: favorites.count > 0 && favorites.contains(webView.url)
                    enabled: webView.visible
                    icon.source: favorited ? "image://theme/icon-m-favorite-selected" : "image://theme/icon-m-favorite"
                    onClicked: {
                        if (favorited) {
                            favorites.removeBookmark(webView.url)
                        } else {
                            favorites.addBookmark(webView.url, webView.title, webView.favicon)
                        }
                    }
                }

Browser.IconButton {
                    property bool favorited: favorites.count > 0 && favorites.contains(webView.url)
                    enabled: webView.visible
                    icon.source: favorited ? "image://theme/icon-m-favorite-selected" : "image://theme/icon-m-favorite"
                    onClicked: {
                        if (favorited) {
                            favorites.removeBookmark(webView.url)
                        } else {
                            favorites.addBookmark(webView.url, webView.title, webView.favicon)
                        }
                    }
                }

Browser.IconButton {
                    id:backIcon
                    icon.source: "image://theme/icon-m-back"
                    enabled: webView.canGoBack
                    onClicked: webView.goBack()
                }

user_pref("font.minimum-size.x-western", 16);

Here are some tips to customize Jolla browser. For GUI layout changes you need root privileges (devel-su) and text editor such as vim, nano, tinyedit etc.

For general preferences root privileges are not required.

Sailfish browser layout

Main page layout file:

/usr/share/sailfish-browser/pages/BrowserPage.qml

To edit buttons layout, look for items called Browser.IconButton

Browser.IconButton {
...button details here...
}

Increase the amount of icons on toolbar in portrait mode

Default values (5 icons):

// 5 icons, 4 spaces between
spacing: isPortrait ? (width - (backIcon.width * 5)) / 4 : Theme.paddingSmall

To add space for the sixth button into portrait view change values to:

spacing: isPortrait ? (width - (backIcon.width * 6)) / 5 : Theme.paddingSmall

Visibility in Landscape versus Portrait

Some of the buttons are visible only in landscape by default but you can add them in portrait too.

If exists, under Browser.IconButton add or remove (or comment/uncomment line):

visible: isLandscape

For instance you can add 'Close tab' button to portrait mode by uncommenting the line under button entry:

Browser.IconButton {
//                  visible: isLandscape
                    enabled: webView.tabModel.count > 0
                    icon.source: "image://theme/icon-m-close"
                    onClicked: {
                                webView.tabModel.closeActiveTab()
                                webView.activatePage(webView.tabId, true)
                               }
                   }

If you do this, remember to increase max button amount to six, or all buttons won't fit on the screen.

How to re-arrange toolbar icons

Example: How to switch the locations of 'Favorites' and 'Back' buttons with each other:

Original:

Browser.IconButton {
                    id:backIcon
                    icon.source: "image://theme/icon-m-back"
                    enabled: webView.canGoBack
                    onClicked: webView.goBack()
                }

Browser.IconButton {
                    property bool favorited: favorites.count > 0 && favorites.contains(webView.url)
                    enabled: webView.visible
                    icon.source: favorited ? "image://theme/icon-m-favorite-selected" : "image://theme/icon-m-favorite"
                    onClicked: {
                        if (favorited) {
                            favorites.removeBookmark(webView.url)
                        } else {
                            favorites.addBookmark(webView.url, webView.title, webView.favicon)
                        }
                    }
                }

Switch the buttons around:

Browser.IconButton {
                    property bool favorited: favorites.count > 0 && favorites.contains(webView.url)
                    enabled: webView.visible
                    icon.source: favorited ? "image://theme/icon-m-favorite-selected" : "image://theme/icon-m-favorite"
                    onClicked: {
                        if (favorited) {
                            favorites.removeBookmark(webView.url)
                        } else {
                            favorites.addBookmark(webView.url, webView.title, webView.favicon)
                        }
                    }
                }

Browser.IconButton {
                    id:backIcon
                    icon.source: "image://theme/icon-m-back"
                    enabled: webView.canGoBack
                    onClicked: webView.goBack()
                }

General settings

Jolla browser uses Mozilla style settings file:

/home/nemo/.mozilla/mozembed/prefs.js

Change minimum font size

By default some sites font is extremely small. Example: talk.maemo.org

Add line:

user_pref("font.minimum-size.x-western", 16);

Notes:

• If set too high, page layouts on some sites will break.

Here are some tips to customize Jolla browser. For GUI layout changes you need root privileges (devel-su) and text editor such as vim, nano, tinyedit etc.

For general preferences root privileges are not required.

Always do backups of original files first. If you don't like the end result, the reversal of changes will be much easier by copying over the edited file with the backup.

Sailfish browser layout

Main page layout file:

/usr/share/sailfish-browser/pages/BrowserPage.qml

To edit buttons layout, look for items called Browser.IconButton

Browser.IconButton {
...button details here...
}

Increase the amount of space for icons on in toolbar in portrait mode

Default values (5 icons):

// 5 icons, 4 spaces between
spacing: isPortrait ? (width - (backIcon.width * 5)) / 4 : Theme.paddingSmall

To add space for the sixth button into portrait view change values to:

spacing: isPortrait ? (width - (backIcon.width * 6)) / 5 : Theme.paddingSmall

Visibility in Landscape versus Portrait

Some of the buttons are visible only in landscape by default but you can add them in portrait too.

If exists, under Browser.IconButton add or remove (or comment/uncomment line):

visible: isLandscape

For instance you can add 'Close tab' button to portrait mode by uncommenting the line under button entry:

Browser.IconButton {
//                  visible: isLandscape
                    enabled: webView.tabModel.count > 0
                    icon.source: "image://theme/icon-m-close"
                    onClicked: {
                                webView.tabModel.closeActiveTab()
                                webView.activatePage(webView.tabId, true)
                               }
                   }

If you do this, remember to increase max button amount to six, or all buttons won't fit on the screen.

How to re-arrange toolbar icons

Example: How to switch the locations of 'Favorites' and 'Back' buttons with each other:

Original:

Browser.IconButton {
                    id:backIcon
                    icon.source: "image://theme/icon-m-back"
                    enabled: webView.canGoBack
                    onClicked: webView.goBack()
                }

Browser.IconButton {
                    property bool favorited: favorites.count > 0 && favorites.contains(webView.url)
                    enabled: webView.visible
                    icon.source: favorited ? "image://theme/icon-m-favorite-selected" : "image://theme/icon-m-favorite"
                    onClicked: {
                        if (favorited) {
                            favorites.removeBookmark(webView.url)
                        } else {
                            favorites.addBookmark(webView.url, webView.title, webView.favicon)
                        }
                    }
                }

Switch the buttons around:

Browser.IconButton {
                    property bool favorited: favorites.count > 0 && favorites.contains(webView.url)
                    enabled: webView.visible
                    icon.source: favorited ? "image://theme/icon-m-favorite-selected" : "image://theme/icon-m-favorite"
                    onClicked: {
                        if (favorited) {
                            favorites.removeBookmark(webView.url)
                        } else {
                            favorites.addBookmark(webView.url, webView.title, webView.favicon)
                        }
                    }
                }

Browser.IconButton {
                    id:backIcon
                    icon.source: "image://theme/icon-m-back"
                    enabled: webView.canGoBack
                    onClicked: webView.goBack()
                }

General settings

Jolla browser uses Mozilla style settings file:

/home/nemo/.mozilla/mozembed/prefs.js

Change minimum font size

By default some sites font is extremely small. Example: talk.maemo.org

Add line:

user_pref("font.minimum-size.x-western", 16);

Notes:

• If set too high, page layouts on some sites will break.

Here are some tips to customize Jolla browser. For GUI layout changes you need root privileges (devel-su) and text editor such as vim, nano, tinyedit etc.

For general preferences root privileges are not required.

Always do backups of original files first. If you don't like the end result, the reversal of changes will be much easier by copying over the edited file with the backup.

Sailfish browser layout

Main page layout file:

/usr/share/sailfish-browser/pages/BrowserPage.qml

To edit buttons layout, look for items called Browser.IconButton

Browser.IconButton {
...button details here...
}

Increase the toolbar space for icons in toolbar in portrait mode

Default values (5 icons):

// 5 icons, 4 spaces between
spacing: isPortrait ? (width - (backIcon.width * 5)) / 4 : Theme.paddingSmall

To add space for the sixth button into portrait view change values to:

spacing: isPortrait ? (width - (backIcon.width * 6)) / 5 : Theme.paddingSmall

Visibility in Landscape versus Portrait

Some of the buttons are visible only in landscape by default but you can add them in portrait too.

If exists, under Browser.IconButton add or remove (or comment/uncomment line):

visible: isLandscape

For instance you can add 'Close tab' button to portrait mode by uncommenting the line under button entry:

Browser.IconButton {
//                  visible: isLandscape
                    enabled: webView.tabModel.count > 0
                    icon.source: "image://theme/icon-m-close"
                    onClicked: {
                                webView.tabModel.closeActiveTab()
                                webView.activatePage(webView.tabId, true)
                               }
                   }

If you do this, remember to increase max button amount to six, or all buttons won't fit on the screen.

How to re-arrange toolbar icons

Example: How to switch the locations of 'Favorites' and 'Back' buttons with each other:

Original:

Browser.IconButton {
                    id:backIcon
                    icon.source: "image://theme/icon-m-back"
                    enabled: webView.canGoBack
                    onClicked: webView.goBack()
                }

Browser.IconButton {
                    property bool favorited: favorites.count > 0 && favorites.contains(webView.url)
                    enabled: webView.visible
                    icon.source: favorited ? "image://theme/icon-m-favorite-selected" : "image://theme/icon-m-favorite"
                    onClicked: {
                        if (favorited) {
                            favorites.removeBookmark(webView.url)
                        } else {
                            favorites.addBookmark(webView.url, webView.title, webView.favicon)
                        }
                    }
                }

Switch the buttons around:

Browser.IconButton {
                    property bool favorited: favorites.count > 0 && favorites.contains(webView.url)
                    enabled: webView.visible
                    icon.source: favorited ? "image://theme/icon-m-favorite-selected" : "image://theme/icon-m-favorite"
                    onClicked: {
                        if (favorited) {
                            favorites.removeBookmark(webView.url)
                        } else {
                            favorites.addBookmark(webView.url, webView.title, webView.favicon)
                        }
                    }
                }

Browser.IconButton {
                    id:backIcon
                    icon.source: "image://theme/icon-m-back"
                    enabled: webView.canGoBack
                    onClicked: webView.goBack()
                }

General settings

Jolla browser uses Mozilla style settings file:

/home/nemo/.mozilla/mozembed/prefs.js

Change minimum font size

By default some sites font is extremely small. Example: talk.maemo.org

Add line:

user_pref("font.minimum-size.x-western", 16);

Notes:

• If set too high, page layouts on some sites will break.

Here are some tips to customize Jolla browser. For GUI layout changes you need root privileges (devel-su) and text editor such as vim, nano, tinyedit etc.

For general preferences root privileges are not required.

Always do backups of original files first. If you don't like the end result, the reversal of changes will be much easier by copying over the edited file with the backup.

Sailfish browser layout

Main page layout file:

/usr/share/sailfish-browser/pages/BrowserPage.qml

To edit buttons layout, look for items called Browser.IconButton

Browser.IconButton {
...button details here...
}

Increase the toolbar space for icons in portrait mode

Default values (5 icons):

// 5 icons, 4 spaces between
spacing: isPortrait ? (width - (backIcon.width * 5)) / 4 : Theme.paddingSmall

To add space for the sixth button into portrait view change values to:

spacing: isPortrait ? (width - (backIcon.width * 6)) / 5 : Theme.paddingSmall

Visibility in Landscape versus Portrait

Some of the buttons are visible only in landscape by default but you can add them in portrait too.

If exists, under Under Browser.IconButton add or remove (or comment/uncomment line):

visible: isLandscape

For instance you can add 'Close tab' button to portrait mode by uncommenting commenting the line under button entry:

Browser.IconButton {
//                  visible: isLandscape
                    enabled: webView.tabModel.count > 0
                    icon.source: "image://theme/icon-m-close"
                    onClicked: {
                                webView.tabModel.closeActiveTab()
                                webView.activatePage(webView.tabId, true)
                               }
                   }

If you do this, remember to increase max button amount to six, or all buttons won't fit on the screen.

How to re-arrange toolbar icons

Example: How to switch the locations of 'Favorites' and 'Back' buttons with each other:

Original:

Browser.IconButton {
                    id:backIcon
                    icon.source: "image://theme/icon-m-back"
                    enabled: webView.canGoBack
                    onClicked: webView.goBack()
                }

Browser.IconButton {
                    property bool favorited: favorites.count > 0 && favorites.contains(webView.url)
                    enabled: webView.visible
                    icon.source: favorited ? "image://theme/icon-m-favorite-selected" : "image://theme/icon-m-favorite"
                    onClicked: {
                        if (favorited) {
                            favorites.removeBookmark(webView.url)
                        } else {
                            favorites.addBookmark(webView.url, webView.title, webView.favicon)
                        }
                    }
                }

Switch the buttons around:

Browser.IconButton {
                    property bool favorited: favorites.count > 0 && favorites.contains(webView.url)
                    enabled: webView.visible
                    icon.source: favorited ? "image://theme/icon-m-favorite-selected" : "image://theme/icon-m-favorite"
                    onClicked: {
                        if (favorited) {
                            favorites.removeBookmark(webView.url)
                        } else {
                            favorites.addBookmark(webView.url, webView.title, webView.favicon)
                        }
                    }
                }

Browser.IconButton {
                    id:backIcon
                    icon.source: "image://theme/icon-m-back"
                    enabled: webView.canGoBack
                    onClicked: webView.goBack()
                }

General settings

Jolla browser uses Mozilla style settings file:

/home/nemo/.mozilla/mozembed/prefs.js

Change minimum font size

By default some sites font is extremely small. Example: talk.maemo.org

Add line:

user_pref("font.minimum-size.x-western", 16);

Notes:

• If set too high, page layouts on some sites will break.

Here are some tips to customize Jolla browser. For GUI layout changes you need root privileges (devel-su) and text editor such as vim, nano, tinyedit etc.

For general preferences root privileges are not required.

Always do backups of original files first. If you don't like the end result, the reversal of changes will be much easier by copying over the edited file with the backup.

Sailfish browser layout

Main page layout file:

/usr/share/sailfish-browser/pages/BrowserPage.qml

To edit buttons layout, look for items called Browser.IconButton

Browser.IconButton {
...button details here...
}

Increase the toolbar space for icons in portrait mode

Default values (5 icons):

// 5 icons, 4 spaces between
spacing: isPortrait ? (width - (backIcon.width * 5)) / 4 : Theme.paddingSmall

To add space for the sixth button into portrait view change values to:

spacing: isPortrait ? (width - (backIcon.width * 6)) / 5 : Theme.paddingSmall

Visibility in Landscape versus Portrait

Some of the buttons are visible only in landscape by default but you can add them in portrait too.

Under Browser.IconButton add or remove (or comment/uncomment line):

visible: isLandscape

For instance you can add 'Close tab' button to portrait mode by commenting the line under button entry:

Browser.IconButton {
//                  visible: isLandscape
                    enabled: webView.tabModel.count > 0
                    icon.source: "image://theme/icon-m-close"
                    onClicked: {
                                webView.tabModel.closeActiveTab()
                                webView.activatePage(webView.tabId, true)
                               }
                   }

If you do this, remember to increase max button amount to six, or all buttons won't fit on the screen.

How to re-arrange toolbar icons

Example: How to switch the locations of 'Favorites' and 'Back' buttons with each other:

Original:

Browser.IconButton {
                    id:backIcon
                    icon.source: "image://theme/icon-m-back"
                    enabled: webView.canGoBack
                    onClicked: webView.goBack()
                }

Browser.IconButton {
                    property bool favorited: favorites.count > 0 && favorites.contains(webView.url)
                    enabled: webView.visible
                    icon.source: favorited ? "image://theme/icon-m-favorite-selected" : "image://theme/icon-m-favorite"
                    onClicked: {
                        if (favorited) {
                            favorites.removeBookmark(webView.url)
                        } else {
                            favorites.addBookmark(webView.url, webView.title, webView.favicon)
                        }
                    }
                }

Switch the buttons around:

Browser.IconButton {
                    property bool favorited: favorites.count > 0 && favorites.contains(webView.url)
                    enabled: webView.visible
                    icon.source: favorited ? "image://theme/icon-m-favorite-selected" : "image://theme/icon-m-favorite"
                    onClicked: {
                        if (favorited) {
                            favorites.removeBookmark(webView.url)
                        } else {
                            favorites.addBookmark(webView.url, webView.title, webView.favicon)
                        }
                    }
                }

Browser.IconButton {
                    id:backIcon
                    icon.source: "image://theme/icon-m-back"
                    enabled: webView.canGoBack
                    onClicked: webView.goBack()
                }

General settings

Jolla browser uses Mozilla style settings file:

/home/nemo/.mozilla/mozembed/prefs.js

Change minimum font size

By default some sites font is extremely small. Example: talk.maemo.org

Add line:

user_pref("font.minimum-size.x-western", 16);

Notes:

• If set too high, page layouts on some sites will break.

Here are some tips to customize Jolla browser. For GUI layout changes you need root privileges (devel-su) and text editor such as vim, nano, tinyedit etc.

For general preferences root privileges are not required.

Always do backups of original files first. If you don't like the end result, the reversal of changes will be much easier by copying over the edited file with the backup.

Sailfish browser layout

Main page layout file:

/usr/share/sailfish-browser/pages/BrowserPage.qml

To edit buttons layout, look for items called Browser.IconButton

Browser.IconButton {
...button details here...
}

Increase the toolbar space for icons in portrait mode

Default values (5 icons):

// 5 icons, 4 spaces between
spacing: isPortrait ? (width - (backIcon.width * 5)) / 4 : Theme.paddingSmall

To add space for the sixth button into portrait view change values to:

spacing: isPortrait ? (width - (backIcon.width * 6)) / 5 : Theme.paddingSmall

Visibility in Landscape versus Portrait

Some of the buttons are visible only in landscape by default but you can add them in portrait too.

Under Browser.IconButton add or remove (or comment/uncomment line):

visible: isLandscape

For instance you can add 'Close tab' button to portrait mode by commenting the line under button entry:

Browser.IconButton {
//                  visible: isLandscape
                    enabled: webView.tabModel.count > 0
                    icon.source: "image://theme/icon-m-close"
                    onClicked: {
                                webView.tabModel.closeActiveTab()
                                webView.activatePage(webView.tabId, true)
                               }
                   }

If you do this, remember to increase max button amount to six, or all buttons won't fit on the screen.

How to re-arrange toolbar icons

Example: How to switch the locations of 'Favorites' and 'Back' buttons with each other:

Original:

Browser.IconButton {
                    id:backIcon
                    icon.source: "image://theme/icon-m-back"
                    enabled: webView.canGoBack
                    onClicked: webView.goBack()
                }

Browser.IconButton {
                    property bool favorited: favorites.count > 0 && favorites.contains(webView.url)
                    enabled: webView.visible
                    icon.source: favorited ? "image://theme/icon-m-favorite-selected" : "image://theme/icon-m-favorite"
                    onClicked: {
                        if (favorited) {
                            favorites.removeBookmark(webView.url)
                        } else {
                            favorites.addBookmark(webView.url, webView.title, webView.favicon)
                        }
                    }
                }

Switch the buttons around:

Browser.IconButton {
                    property bool favorited: favorites.count > 0 && favorites.contains(webView.url)
                    enabled: webView.visible
                    icon.source: favorited ? "image://theme/icon-m-favorite-selected" : "image://theme/icon-m-favorite"
                    onClicked: {
                        if (favorited) {
                            favorites.removeBookmark(webView.url)
                        } else {
                            favorites.addBookmark(webView.url, webView.title, webView.favicon)
                        }
                    }
                }

Browser.IconButton {
                    id:backIcon
                    icon.source: "image://theme/icon-m-back"
                    enabled: webView.canGoBack
                    onClicked: webView.goBack()
                }

General settings

Jolla browser uses Mozilla style settings file:

/home/nemo/.mozilla/mozembed/prefs.js

Since Sailfish OS 1.1.2.7 you can also use browser builtin interface for these via at url about:config. for preferences.

Change minimum font size

By default some sites font is extremely small. Example: talk.maemo.org

Add line:

user_pref("font.minimum-size.x-western", 16);

Notes:

• If set too high, page layouts on some sites will break.

Here are some tips to customize Jolla browser. For GUI layout changes you need root privileges (devel-su) and text editor such as vim, nano, tinyedit etc.

For general preferences root privileges are not required.

Always do backups of original files first. If you don't like the end result, the reversal of changes will be much easier by copying over the edited file with the backup.

Sailfish browser layout

Main page layout file:

/usr/share/sailfish-browser/pages/BrowserPage.qml

To edit buttons layout, look for items called Browser.IconButton

Browser.IconButton {
...button details here...
}

Increase the toolbar space for icons in portrait mode

Default values (5 icons):

// 5 icons, 4 spaces between
spacing: isPortrait ? (width - (backIcon.width * 5)) / 4 : Theme.paddingSmall

To add space for the sixth button into portrait view change values to:

spacing: isPortrait ? (width - (backIcon.width * 6)) / 5 : Theme.paddingSmall

Visibility in Landscape versus Portrait

Some of the buttons are visible only in landscape by default but you can add them in portrait too.

Under Browser.IconButton add or remove (or comment/uncomment line):

visible: isLandscape

For instance you can add 'Close tab' button to portrait mode by commenting the line under button entry:

Browser.IconButton {
//                  visible: isLandscape
                    enabled: webView.tabModel.count > 0
                    icon.source: "image://theme/icon-m-close"
                    onClicked: {
                                webView.tabModel.closeActiveTab()
                                webView.activatePage(webView.tabId, true)
                               }
                   }

If you do this, remember to increase max button amount to six, or all buttons won't fit on the screen.

How to re-arrange toolbar icons

Example: How to switch the locations of 'Favorites' and 'Back' buttons with each other:

Original:

Browser.IconButton {
                    id:backIcon
                    icon.source: "image://theme/icon-m-back"
                    enabled: webView.canGoBack
                    onClicked: webView.goBack()
                }

Browser.IconButton {
                    property bool favorited: favorites.count > 0 && favorites.contains(webView.url)
                    enabled: webView.visible
                    icon.source: favorited ? "image://theme/icon-m-favorite-selected" : "image://theme/icon-m-favorite"
                    onClicked: {
                        if (favorited) {
                            favorites.removeBookmark(webView.url)
                        } else {
                            favorites.addBookmark(webView.url, webView.title, webView.favicon)
                        }
                    }
                }

Switch the buttons around:

Browser.IconButton {
                    property bool favorited: favorites.count > 0 && favorites.contains(webView.url)
                    enabled: webView.visible
                    icon.source: favorited ? "image://theme/icon-m-favorite-selected" : "image://theme/icon-m-favorite"
                    onClicked: {
                        if (favorited) {
                            favorites.removeBookmark(webView.url)
                        } else {
                            favorites.addBookmark(webView.url, webView.title, webView.favicon)
                        }
                    }
                }

Browser.IconButton {
                    id:backIcon
                    icon.source: "image://theme/icon-m-back"
                    enabled: webView.canGoBack
                    onClicked: webView.goBack()
                }

General settings

Jolla browser uses Mozilla style settings file:

/home/nemo/.mozilla/mozembed/prefs.js

Since Sailfish OS 1.1.2.7 you can also use browser builtin interface at url about:config for preferences.

Change minimum font size

By default some sites font is extremely small. Example: talk.maemo.org

Add line:

user_pref("font.minimum-size.x-western", 16);

Notes:

• If set too high, page layouts on some sites will break.

==NEEDS REVISIONING SINCE 1.1.2.25 Yliaavanlampi==

Here are some tips to customize Jolla browser. For GUI layout changes you need root privileges (devel-su) and text editor such as vim, nano, tinyedit etc.

For general preferences root privileges are not required.

Always do backups of original files first. If you don't like the end result, the reversal of changes will be much easier by copying over the edited file with the backup.

user_pref("font.minimum-size.x-western", 16);