Scaling Area Alignment Padding Gutter Page
Area Alignment Order Greeting Transitional words Clock Date Search Edit/Add Colour/Accent Settings menu Border Position when scrolling Background colour
Area Alignment Bookmarks Content Letter/Icon Name Style Colour Border Orientation Sort Accent override
Area Order Names Open all Border
Preset Saved Fonts Style Colour Accent Radius Shadow Shade
Colour Image
Restore Backup Clear

Scaling

Resize all elements on the page.

Take care as some elements could scale up to outside the page.

Area

Alignment

Effects may not be visible if the Layout Area is full width or if Bookmarks fill the page.


Horizontal alignment stack the Header and Bookmarks in a row side by side.

Vertical alignment stacks the Header and Bookmarks in a column one above the other.


Only available when Bookmarks are shown.

Padding

Gutter

Page



May not work in some browsers.

Area

Max width is defined by Layout Area Width.

Alignment

Effects may not be visible if the Header Area is full width.

Only available when Layout Alignment is Vertical.


Header items aligned to each others centres.

Header items aligned to the text baseline. Useful for when the Clock, Date and other text is sized large and need to sit on a line.


Effects may not be visible if the Search box size is set to Auto and grows to fill available space.

Some Header items may not be shown.

Order

Greeting




Force on to a new line and seperate from other Header items.

Transitional words

Only available when Date or Time is shown.



Force on to a new line and seperate from other Header items.

Clock







Force on to a new line and seperate from other Header items.

Date

Define what day "1" represents, either Monday or Sunday.


Display Date as 1st, 2nd, 3rd, 4th etc.


Display Month as 1st, 2nd, 3rd, 4th etc.






Force on to a new line and seperate from other Header items.

Search

Search box will grow to best fit available space.

Define how wide the Search box should be inside the Header Area.



May not work in some browsers.


Enter a web address with the search parameters, eg: "https://vimeo.com/search?q="

nightTab will add the search term entered into the Search input at the end of the above URL.



Only the Search box width control will change the Width of the Search box.



Force on to a new line and seperate from other Header items.

Edit/Add



Force on to a new line and seperate from other Header items.

Colour/Accent

Colour and Accent can also be found under Theme.




Force on to a new line and seperate from other Header items.

Settings menu



Force on to a new line and seperate from other Header items.

Border


Position when scrolling

Header sticks to the page when scrolling up or down.

Header moves inline with the content when scrolling up or down.

Only available when Layout Alignment is Vertical.

Background colour

Useful for when a Background Image is shown.

The page may not scroll if Bookmarks are not shown.

May not be visible if Layout Alignment is Horizontal as the Bookmarks won't pass under the header.


Use the Background colour defined by the Theme.

Use a custom Background colour.



May not be visible if Theme Radius is set to 0.

Area

Max width is defined by Layout Area Width.

Alignment

Effects may not be visible if the Bookmark Area is full width.

Only available when Layout Alignment is Vertical.


Flow Bookmarks either from the left or right of the Bookmark Area.

Bookmarks




Effects may not be visible if Theme Shadow is set to 0.



Content






Vertical alignment works well with Bookmark Block Style.

Horizontal alignment works well with Bookmark List Style.

Only available when Letter/Icon and Name are shown.


Only available when Letter/Icon and Name are shown.

Letter/Icon


Name

Style

Bookmark tiles more square shaped.

Bookmark tiles more short and wide.

Colour

Use the colour defined by the Theme.

Use a custom colour.

Take care as some colours may make the Letter/Icon and Name unreadable.


Border

Orientation

Display the URL and Controls either at the top or bottom of a Bookmark Tile.

Sort

Accent override


Adds a unique override colour to each Bookmark.

Area

Effects may not be visible if the Group Name is not shown.

Order

Names

Individual Group Names can be shown or hidden from their respective edit controls.


Open all

Individual Group Open all buttons can be shown or hidden from their respective edit controls.



Border

Border between groups may not be visible if there is only one group.

Preset

Applying a Preset will replace the current Colour, Accent, Font, Style, Radius, Shadow and Shade.

Saved

Saving a Theme will record the current Colour, Accent, Font, Style, Radius, Shadow and Shade.

Fonts

Use a Google Font to customise the Clock, Date, Group names and Bookmark Letters.

Add a font name as it appears on Google Fonts, including capital letters and spaces, eg: enter "Fredoka One" or "Kanit"

Clear the field to use the default font "Fjalla One".


Not all fonts support all weights. Refer to the Google Font page to see which are available.



Use a Google Font to customise the Bookmark name, URL and form elements.

Add a font name as it appears on Google Fonts, including capital letters and spaces, eg: enter "Roboto", "Source Sans Pro" or "Noto Sans"

Clear the field to use the default font "Open Sans".


Not all fonts support all weights. Refer to the Google Font page to see which are available.


Style

Flip the colour shades defined by the primary Colour.

Accent Colour and Background Image may need to be changed to best fit the Theme Style.

Colour

Shades

Backgrounds, Bookmarks and Modals use shades from the left.

Text and form elements use shades from the right.

For a light look switch to the Light Style and then select a Primary colour.


Light and dark shades from this colour are used across nightTabs.




Accent


Accent Colour can also be changed from the Header Area.





Take casre as a small delay in Accent hue change may cause performance issues.

Auto change Accent hue will not work when the Accent colour is a grey or black.

Radius

Shadow

Shade

The shade appears behind Modals and the Menu.

Colour

Use the Background colour defined by the Theme.

Use a custom Background colour.

Take care as some colours may make the Clock, Date and other text unreadable.

Image

Max image size 5MB, (due to browser local storage limits).

Take care with large files, they may impact performance.

If adding more than one URL separate them by spaces or on new lines. If more than one is entered a random background image will be used on load.


Unsplash can be used for random images, eg:

https://source.unsplash.com/random/1920x1080/?night,day,sky

Change parameters after .../random/ for more options. Loading times may vary.







Restore

Restore a previously exported nightTab backup.

Backup

Download a backup of your nightTab Bookmarks and Settings.

This file can later be imported on this or another deivce.

Clear

Wipe all data and restore nightTab to default state.

Coffee for fuel

nightTab is free, appreciation is welcome in the form of coffee!


Buy me a coffee

nightTab

Version


Project repository on GitHub.


For feedback and support, submit an Issue.