jolzem/starttree.sh
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Upload New File

Browse Source
This commit is contained in:
Johannes Olzem 2022-10-16 14:39:11 +00:00
parent 1b7cdfd2d2
commit 20db562c2b
1 changed files with 115 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

115
README.md Normal file
View File

@ -0,0 +1,115 @@
# ./Startpage.sh
A simple tree style startpage in HTML and CSS with interchangeable and customisable themes.
![Preview](preview.png)
## Installation
### Chrome / Chromium
1. Clone git Repo
2. Go to Extensions
3. Toggle Developer mode on
4. Click on Load Unpacked
5. Select the directory you cloned the git repo
### Firefox
1. Clone git Repo
2. Find instructions on how to install further [here](https://stpg.tk/guides/firefox-startpage/#the-normal-way).
### Safari
1. Clone git Repo
2. Find instructions on how to install further [here](https://support.apple.com/de-de/guide/safari/ibrw1020/mac).
## Configuration
### Themes
#### Choosing themes
1. Open the index.html file in your favorite text editor.
2. Find the line that starts with `<link href="themes/` in the `<head>` section.
3. Replace themes/*theme*.css with your desired theme. Themes can be found in the themes folder.
### Trees
#### Changing tree title
1. Open the index.html file in your favorite text editor.
2. Find your desired tree and look for the `<!--TREE TITLE-->` comment.
3. Replace the text between the `<span>` tags.
#### Changing branch content
1. Open the index.html file in your favorite text editor.
2. Find your desired branch
3. To change the text, replace the content of the `<a>` tags.
4. To change the link change the content of the `href=""` attribute above the text.
#### Adding Branches
1. Open the index.html file in your favorite text editor.
2. Add
```
<li>
<a href="/link/to/site">
text
</a>
</li>
```
before or after another branch.
#### Adding Trees
1. Open the index.html file in your favorite text editor.
2. 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
1. Open the index.html file in your favorite text editor.
2. Find and remove the line `<div id="clock"></div>`.
#### Adding Clock
1. Open the index.html file in your favorite text editor.
2. Add the line `<div id="clock"></div>` at the top of the `<body>` section.
#### Changing Clock to American style
1. Open the clock.js file in your favorite text editor.
2. Remove the comments (`/* */`).
3. Remove the comment (`//`) before your desired time format. You can find an explanation for each on the right side of the code.
4. Comment out old Clock style with `//`.
#### Changing Clock back to Normal style
1. Open the clock.js in your favorite text editor.
2. Put a multi-line-comment start (`/*`) before `let period = "AM"`.
3. Put a multi-line-comment end (`*/`) after `period = "PM" }`.
### Search Engine
#### Choosing Search Engine
1. Open the index.html file in your favorite text editor.
2. Find the `<form>` tags
3. Change the content of the `action=""` attribute to your search Engine
4. 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>
````
5. **Optional**: Find the `<span class="cmd-cmd">./search -e brave</span>` element and change `brave` to your search engine's name.