Live Demo of Omega.

Omega is a startpage featuring three different themes.

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

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/Omega).
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/Omega/.
6. go to your browser setting and set https://username.github.io/Omega/ 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. KFhimaji
2. Roboto

Omega has two main features.

1. You can set 3 (or more) themes with different avatar and backgrounds. To switch between theme, you have to click one of the three circles in the header : the first theme corresponds to the first square on the left, the second the one in the middle, and the third the square on the right.
2. In the search bar, 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.

• if you want to edit the themes available, first of all open the background folder, go to one of the first three subfolders and replace the six backgrounds by the ones you want (be sure to rename them correctly, ie background01.png, ..., background06.png).
• open the avatar folder and replace the avatar of the theme you edit with the one you want : if you edited the second theme, you'll have to rename your avatar avatar_theme02.png.
• you'll notice that when you hover one of the background in this startpage, there'll be a transparent color div. You'll have to enter the color code for each background you used. To do that, open one of the theme.css file in a text editor and edit the value of background for every #picture[number between 1 and 6]:before. For example, if I want to have a black div when hovering the first background, I will have the following code :

#picture1:before {
	background: rgba(0,0,0,.5);
}

the first three numbers are the RGB values (you can find them on GIMP, PS, or you can use Google), and the last value correspond to the transparency value (0 means that the div will be completely transparent, on the contrary 1 means that the div won't be transparent).

• you can also change the value of border of the element .main which is simply the border's color of the box.
• if you want to add a fourth theme, you'll have to create a new folder called background_04 in the background one and fill it with six backgrounds. Plus, add a picture called avatar_theme04 in the avatar folder, otherwise there won't be an avatar and it'll be a bit ugly (in my opinion).
• after that, create a file called theme_04.css and open it in a text editor. Open one of the others .css file, for instance theme_01.css, and copy/paste its code in theme_04.css. You'll have to change the value of every elements :

.avatar {
	background-image: url("avatar/avatar_theme04.png") !important;
}

#picture1 {
	background-image: url("background/background_04/background01.png") !important;
}

same thing for the others #picture[number between 1 and 6]. And don't forget to change the value of background for the elements #picture[number between 1 and 6]:before and .main

• next, you'll have to open index.htm in a text editor and add the following code :

<button onclick="swapStyleSheet('theme_04.css')" id="fourth_btn"></button>

after

<button onclick="swapStyleSheet('theme_03.css')" id="third_btn"></button>

• finally, open style.css in a text editor and add the following code (the default background value is black, you can change it for another color) :

		#fourth_btn {
			background: #000000;
		}

• you can also change the color of the squares for each theme, you'll have to edit in style.css the value of background for the element #first_btn, #second_btn and #third_btn.

• 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;

Source of the illustrations used.

1. tokiti (ときち)
2. くらら
3. kotake96 (コタケ)

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