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
- create a github account and fork this repository.
- download Github Desktop, go to File/Options and Sign in with your current account.
- go to File/Clone repository and select the one you forked (it'll be named Username/Omega).
- 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).
- finally, click the button Push origin. After 10 minutes or less, you'll be able to go to https://username.github.io/Omega/.
- go to your browser setting and set https://username.github.io/Omega/ as your default homepage.
- 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.
Omega has two main features.
- 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.
- 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, iebackground01.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 avataravatar_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 ofbackground
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 thebackground
one and fill it with six backgrounds. Plus, add a picture calledavatar_theme04
in theavatar
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 instancetheme_01.css
, and copy/paste its code intheme_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 ofbackground
for the element#first_btn
,#second_btn
and#third_btn
.
- open the
js
folder and editsearch.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 behttp://bato.to/search?name=Hinamatsuri&name_cond=c
, you'll have to copy the link before 'Hinamatsuri', namelyhttp://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.
If you find some issues or bug while using this startpage, don't hesitate to report it in the comments.