./Startpage.sh
A simple tree style startpage in HTML and CSS with interchangeable and customisable themes.
Installation
Chrome / Chromium
- Clone git Repo
- Go to Extensions
- Toggle Developer mode on
- Click on Load Unpacked
- Select the directory you cloned the git repo
Firefox
- Clone git Repo
- Find instructions on how to install further here.
Safari
- Clone git Repo
- Find instructions on how to install further here.
Configuration
Themes
Choosing themes
- Open the index.html file in your favorite text editor.
- Find the line that starts with
<link href="themes/in the<head>section. - Replace themes/theme.css with your desired theme. Themes can be found in the themes folder.
Trees
Changing tree title
- Open the index.html file in your favorite text editor.
- Find your desired tree and look for the
<!--TREE TITLE-->comment. - Replace the text between the
<span>tags.
Changing branch content
- Open the index.html file in your favorite text editor.
- Find your desired branch
- To change the text, replace the content of the
<a>tags. - To change the link change the content of the
href=""attribute above the text.
Adding Branches
- Open the index.html file in your favorite text editor.
- Add
<li>
<a href="/link/to/site">
text
</a>
</li>
before or after another branch.
Adding Trees
- Open the index.html file in your favorite text editor.
- Add
<div class="title rX_REPLACE_ME">
<h4>
<!--TREE TITLE-->
<span class="cmd-cmd">Title:</span>
</h4>
</div>
<div class="tree rX_REPLACE_ME">
<ul>
<li>
<a href="/link/to/site">
text
</a>
</li>
</ul>
Where X_REPLACE_ME is the number of your Tree with a maximum of 4.
Clock
Removing Clock
- Open the index.html file in your favorite text editor.
- Find and remove the line
<div id="clock"></div>.
Adding Clock
- Open the index.html file in your favorite text editor.
- Add the line
<div id="clock"></div>at the top of the<body>section.
Changing Clock to American style
- Open the clock.js file in your favorite text editor.
- Remove the comments (
/* */). - Remove the comment (
//) before your desired time format. You can find an explanation for each on the right side of the code. - Comment out old Clock style with
//.
Changing Clock back to Normal style
- Open the clock.js in your favorite text editor.
- Put a multi-line-comment start (
/*) beforelet period = "AM". - Put a multi-line-comment end (
*/) afterperiod = "PM" }.
Search Engine
Choosing Search Engine
- Open the index.html file in your favorite text editor.
- Find the
<form>tags - Change the content of the
action=""attribute to your search Engine - Change the content of the
name=""attribute in the<input>
Example for startpage search engine:
<form action="https://startpage.com/sp/search" method="GET" class="search-form">
<h4 class="search-title">Search: </h4>
<input type="text" name="query" autofocus class="search-input" />
</form>
- Optional: Find the
<span class="cmd-cmd">./search -e brave</span>element and changebraveto your search engine's name.