Flat

Live Demo of Flat.

About

Flat is a startpage featuring six different themes.

Startpages are locally hosted, usually, webpage that serves as a homepage for your browser.

Instruction

Step 1 : Right click on the .htm file and open it with a browser of your choice

Step 2 : Set the startpage as the homepage

1. create a github account and fork this repository.
2. download Github Desktop, go to File/Options and Sign in with your current account.
3. go to File/Clone repository and select the one you forked (it'll be named Username/Flat).
4. click the Current branch tab and select gh-pages. Then go to Repository/Show in Explorer to customize the startpage. After modifying what you want, return to Github Desktop window and click the button Commit to gh-pages (you'll have to write a title in Summary before).
5. finally, click the button Push origin. After 10 minutes or less, you'll be able to go to https://username.github.io/Flat/.
6. go to your browser setting and set https://username.github.io/Flat/ as your default homepage.
7. download the add-on New Tab Override (Google Chrome or Firefox Mozilla), go to options and select current home page

Step 3 : Install the font

I use several fonts for the startpage.

1. Bebas Neue
2. Droid Serif
3. Roboto

Features

Flat has three main features.

1. You can set 6 (or more) themes with different background and illustrations. To switch between theme, you have to click one of the six colors bar at the bottom.
2. A random quote generator : each time you refresh the page, a random quote will be displayed.
3. To activate the search bar, press the CTRL key. What's more, by entering some special keys, such as -y jazz music, you'll be able to search directly on youtube and not on Google. Another exemple with `-w moe`, it'll search 'moe' on wikipedia.

Customizing

Themes

• if you want to edit the themes available, first of all open the background folder and replace the backgrounds by the ones you want (be sure to rename them correctly, ie blue_background_01.png, ..., blue_background_06.png).
• you'll notice that in each theme the colors used are different. To personalize those colors, open one of the theme.css file in a text editor and edit the value of background and text-shadow.

Quotes

Open the js folder and edit quote.js in a text editor, you'll have to change the sentences in var quotes. For instance, for the first quote,

quote: "I hate mondays.",
name:"Garfield"

Search

• open the js folder and edit search.js in a text editor, you'll have to modify the following code

case "-u":
query = query.substr(3);
window.location = "https://userstyles.org/styles/browse?search_terms=" 
break;

• first, you have to decide of a website (I will take bato.to) and a special key for this said site : I will take -b, thus you'll have the following code

case "-b":
query = query.substr(3);
window.location = "https://userstyles.org/styles/browse?search_terms=" 
break;

• after that, you'll need to replace the value of window.location, in the example of batoto you'll have to go to the site and search for something, for example if I'm looking for Hinamatsuri (a pretty gud manga, you should read it asap), the link will be http://bato.to/search?name=Hinamatsuri&name_cond=c, you'll have to copy the link before 'Hinamatsuri', namely http://bato.to/search?name=, and you'll have the following code

case "-b":
query = query.substr(3);
window.location = "http://bato.to/search?name=" 
break;

Report

If you find some issues or bug while using this startpage, don't hesitate to report it in the comments.