Thread #8085519 | Image & Video Expansion | Click to Play
File: 1722832447149407.png (65.1 KB)
65.1 KB PNG
Nigga can't catch a break can he edition
>What are startpages?
Startpages (in the context of this thread) are locally hosted webpages (as in, the files are on your computer - not a server somewhere) that serve as the homepage or new tab page for a browser. They generally contain some number of links to frequently visited sites as the main element; search bars, clocks, calendars and other embedded items are usually added as secondary elements.
>What browser are you using?
If you can't tell what browser it is, it's probably Firefox, you can theme Firefox using Stylus and finding themes on the Firefox tag of Userstyles.
Otherwise if you won't upgrade there's always Chrome, you can ~slightly~ customize it using Chrome Theme Maker. Vivaldi has custom CSS settings too in a native way.
---FAQ---
>http://pastebin.com/PdPrW5aP (embed)
---Discord link---
>https://discord.gg/ExAGgVR
---Relevant Sites---
Birb's Ricing
>https://stpg-tk.netlify.app/
Collection of startpages for modification and use.
>http://startpages.github.io/
>https://www.ricing.chloechantelle.com/
>http://pastebin.com/ZJvDn0eN (embed)
--HTML, CSS & JS--
>http://www.w3schools.com/html/default.asp
>http://www.w3schools.com/css/default.asp
>http://www.w3schools.com/js/default.asp
>https://www.codecademy.com/learn/make-a-website
>https://www.codecademy.com/learn/javascript
---Colours Related Links---
>http://palettegenerator.com/
>https://webgradients.com/
>https://www.gradient-animator.com/
>https://codebeautify.org/hex-to-pantone-converter
---Colours Converter---
RGB to HEX
>http://www.javascripter.net/faq/rgbtohex.htm
HEX to RGB
>http://www.javascripter.net/faq/hextorgb.htm
---Typography Related Links---
>http://practicaltypography.com/
>https://www.typewolf.com/
---Old Thread---
>>8035159
142 RepliesView Thread
>>
File: 1723960354124304.webm (2.3 MB)
2.3 MB WEBM
Honored mention this anon >>8075165 since his page felt like it had a lot of work put in.
>>
>>
File: old-startpage.webm (1.4 MB)
1.4 MB WEBM
i made this back when i was a freshman cs student, it is pretty cheesy but it did ultimately pushed me to try linux out
>>
>>
>>
>>
>>
>>
File: 2024-11-28-183059_1906x807_scrot.png (40.5 KB)
40.5 KB PNG
That's my startpage. Made it look a lot cleaner now.
>>
>>
File: snacks.png (179.3 KB)
179.3 KB PNG
i know this is predominantly a startpage thread, but does anyone know of css to have the boards as a sidebar like picrel. Using something like 4chanx?
>>
>>8090057
goto
https://4chan.org/frames" target="_blank">https://4chan.org/frames
you may need to change browser settings to enable frame support though
>>
>>
File: Screen Shot 2024-12-14 at 10.43.37.png (265.8 KB)
265.8 KB PNG
>>8090057
mine does it, but it puts replying and watched threads there too
https://github.com/ricewind012/userstyles
>>
>>8090180
I would have to make it so that the startpage is "editable" with the links saved locally in a cookie (or localstorage) because I wouldn't want to put my links out there on github lol. I will look into that, though.
>>
File: 1715693476634425.jpg (73.7 KB)
73.7 KB JPG
+1 to image limit, no contribution
>>
File: startpage.png (2.1 MB)
2.1 MB PNG
This is the startpage I've been using for a few years now. I can't remember how much of it is my own modifications, but I'm sure I ripped the base template from another anon here at the time.
>>
>>
File: startpage.png (744.9 KB)
744.9 KB PNG
My first startpage.
Maybe it's what you get when you're good at code but shit at design.
>>
>>
>>
>>
>>
>>
File: v4-2.png (4.7 MB)
4.7 MB PNG
>>8092677
Srry. It's only for personal use at the moment. I've dreamed about making it online. But it won't be easy. Last version is made on django and it has some stuff like sharing Audio folder for remote music access and Gitea sync. It also has movie and video folder syncs. Also reminders with crontab sync and Notes, Lists, etc. Forgot about money stuff, income and buylist. Also there was an inventory like in RPG games, but I coudn't figure out a way to input all possible objects to make it searchable and selectible.
It's reverse engineerable if needed. Maybe I'll finally make it usable by other people in the next 6 months. Or maybe not. Because I'm lazy.
>>
btw it'll be awesome if someone will find a way to make something like this usable without spending time to upload an image. I thought about selector from web search but it makes server struggle while searching through something like SearxNG.
>>
File: v4-6.png (3.4 MB)
3.4 MB PNG
>>8092681
It'll be fun to use and share. Imagine having this on phone. And maybe there will be smart backpacks with section for each type of item and recognizer that counts how much of whatever you've got in there.
>>
>>
>>
>>
File: newtab.png (188.2 KB)
188.2 KB PNG
keep it simple, retard.
>>
>>
>>
>>
>>8095465
browsers are too scary these days it's better that it gets locked down desu. too many people willing to exploit others for the smallest gains.
and this is coming from someone that just had to struggle for hours trying to figure out how to get a personal firefox extension i made stay permanently installed.
>>
>>
>>
File: Screenshot_2.png (1.4 MB)
1.4 MB PNG
hello brous, i made a custom page with very basic knowledge i successfully put it as the startup page when opening chrome but for the page that pops when you click for a new tab i did some research finding out you can make a json file that commands so that your page opens everytime you click new tab, the problem is this page uses a little script i made so it cycles thru a little folder with images for the background of the page, but these images are not showing when i hit new tab
they are still showing when i open the browser
>>
File: Screenshot_4.png (20.3 KB)
20.3 KB PNG
>>8096091
this how it looks when i hit new tab
>>
>>
>>8095465
>https://www.reddit.com/r/firefox/comments/c8z0hx/help_set_new_tab_pag e_to_local_file/
i feel like you might be better off just running a python http server locally and pointing your browser to the loopback address
>>
>>8095465
There has been a guide for it on the OP links for god knows how long: https://stpg-tk.netlify.app/guides/firefox-startpage/
Which funnily enough is obsolete as of the last Firefox update (136). To fix it you have to change your .cfg to this:
// Any comment. You must start the file with a single-line comment!
let {classes:Cc,interfaces:Ci,utils:Cu}= Components;
/* set new tab page */
try {
ChromeUtils.defineESModuleGetters(this, {
AboutNewTab: "resource:///modules/AboutNewTab.sys.mjs",
HomePage: "resource:///modules/HomePage.jsm",
});
let newTabURL = "file:///C:/Users/Usuario/Documents/Startpages/u0/index.html";
// For new tabs.
AboutNewTab.newTabURL = newTabURL;
// For home and new windows.
HomePage.safeSet(newTabURL);
} catch(e){Cu.reportError(e);} // report errors in the Browser Console
>>
>>
>>
File: 1721208528672224.jpg (1.6 MB)
1.6 MB JPG
>>8097653
All of google failed me and it was this post that gave me the solution. Thanks.
>>
>>
File: spaceJam.jpg (116.9 KB)
116.9 KB JPG
Here's mine
>>
>>
>>
>>
File: Startpage_1.png (95.3 KB)
95.3 KB PNG
How is this for my first startpage? Learnt a little bit of javascript along with html and css. Was only familiar with the basics before.
Any advice on useful things to add or advice regarding the ui? I added the image slideshow because it felt lacking. I think I am going to add a search bar and tabbed navigation when I have some time.
>>
>>8100759
I like it. That red font is a little jarring but I understand you're trying to fit with the palette of the picture. The use of icons makes it easy to navigate and find what you're looking for. The only criticism/advice I can give you is that you should find a way to make all the boxes in the same row have the same height, it will look better.
>>
File: Startpage_2.png (108.2 KB)
108.2 KB PNG
>>8100796
I addressed what you said about the boxes by making them have the same height in their particular row
I added the tabbed navigation. Will populate it with suitable data, thinking of a piracy tab and maybe one dedicated to direct search on different websites. I also added a weather widget, gives minimum and maximum temperature of that day and gives the current temparature and current apparent or "feels like" temprature in the second line. The current values update every 15 minutes as per the api.
Is this a good direction for the UI? I wouldn't want it to be inconsistent.
P.S I couldn't find any info online on how to make the tabs look like file/folder actual tabs i.e not making them look like buttons. So I am writing how I did it here.
Inside the tab-switching function:
/* Removing the "active-tab" class from other buttons and giving the selected button the active class to trigger change as per style.css */
for (i = 0; i < tab.length; i++) {
tab[i].className = tab[i].className.replace(" active-tab", "");
}
this.className += " active-tab"
Inside the styles file, set the button's positioning to relative and move it down by one pixel (Or as per your set border width):
.active-tab {
position: relative;
top: 1px;
}
>>
>>8097653
Hi anon, the script somehow stopped working properly, I believe it was just another firefox update.
If you go to home, through clicking on the button or keyboard shortcut, the startpage is there.
If you try to use new tab, it won't.
Do you mind giving it another try, please?
>>
Is there any good tutorial you would recommend on css? I know some javascript and css/html but I'm always discouraged when I'm trying to do a project because I'm very bad at designing things. I've been trying to do a small to-do list manager and I have it mostly working but I just can't come up with a decent design.
>>
File: image.png (37.9 KB)
37.9 KB PNG
>>8101620
I don't know any good tutorials myself, but I learnt from just doing it.
I don't think I am any good at it, but getting a consistent design is just iterating on your layout again and again. (I am the dude one reply above you with the startpage titled "Works?")
You tell me if my UI is consistent.
I attached an image of one of my earlier iterations for reference.
>>
>>
>>8101620
if https://developer.mozilla.org/en-US/docs/MDN/Tutorials#introduction_to _css is shit I’ll eat my hat
this is my go-to site for “how does ____ work?” questions and the people who work on it really care
also
- be aware that flexbox exists and is good for laying out items in one dimension
- css grid exists and is good for laying out things in two dimensions
- internalize the difference between margins (outside the border) and padding (inside the border)
consider learning https://getbem.com and using it so you don’t have to fight specificity wars with yourself
>>
>>
>>
>>
>>
>>
Those Startpages are neat and I know this is more a design circlejerk, but this is all very basic.
>Any site that is searchable should come with a search bar e.g.
you click 'Google Images' the text is replaced by a search field with focus. Click again or hit enter to open site without searching.
Bonus points if it also works with reverse image search sites.
>Keystroke Page filter (You press G and only sites with G are displayed)
>Show History for pages (last visited subpages)
>Show Bookmarks for pages
>Show Downloads from that domain (probably needs manual work for pages)
The Keystroke Filter would need JS. For inline stuff like history you probably need to make an addon but you can make a link to the bookmark page with filter.
Maybe I make something like this when I'm stop being lazy.
>>
>>8105399
In the link I posted:
>How do I disable this protection for a website?
>If a site seems broken, try turning off Enhanced Tracking Protection. It disables the protection on that site only.
When will you learn to read and interpret instructions for yourself first before asking for help?
>>
>>
>>
>>
File: pic-full-250607-0041-21.png (1.6 MB)
1.6 MB PNG
>>8091996
thanks nigga
>>
File: Webshit.png (1.8 MB)
1.8 MB PNG
It's a work in progress
>>
>>
>>
>>
>>
>>
>>
>>
>>8101090
>>8097653
Well, finally fixed the script, I don't know if it was just me or whatever, but just in case I'm posting my version.
This one has added the shortcut of Alt+Home to go to your startpage too.
// Any comment. You must start the file with a single-line comment!
let {classes:Cc,interfaces:Ci,utils:Cu}= Components;
/* set new tab page */
try {
ChromeUtils.defineESModuleGetters(this, {
AboutNewTab: "resource:///modules/AboutNewTab.sys.mjs",
HomePage: "resource:///modules/HomePage.mjs",
});
let newTabURL = "file:///Your/File/Here";
// For new tabs.
AboutNewTab.newTabURL = newTabURL;
HomePage.set(newTabURL);
// For home and new windows.
HomePage.safeSet(newTabURL);
} catch(e){Cu.reportError(e);} // report errors in the Browser Console.
>>
>>
>>
>>
>>
File: 1737552344791.jpg (1.2 MB)
1.2 MB JPG
>>8106747
Wallpaper, please?
>>
Got into bash scripting recently and have found it really useful. Have gotten a bit addicted to writing scripts for anything I might do more than once. For example, before I just had a text file detailing the steps of how to setup my startpage whenever I did a fresh OS install, but now I have created a script that does it for me automatically.
For anyone wanting to try it or just have a look, I uploaded it to pastebin: https://pastebin.com/eTAM4xPa
I think it should work on most distros (no idea about winblows), altough you might have to change firefox_dir to where your firefox is installed, for me it's at /usr/lib/firefox-esr on debian 13.
Recently my startpage setup broke and I came back here and thankfully >>8110849 had a fix. Although for me I had to change resource:///modules/HomePage.mjs to resource:///modules/HomePage.sys.mjs to get it to work for the homepage.
Also stripped away some stuff I found wasn't necessary for it to work (atleast on my machines) like:
// Any comment. You must start the file with a single-line comment!
Anyway, hope you all have a wonderful day/night whenever you are in the world.
:^)
>>
>>8085519
I've looked into these threads on and off for years now and always thought you guys made some cool shit but I don't know how to code so never bothered. But fuck it, I'm trying to be more proactive in life so I'm finally gonna try.
Wish me luck Anons.
>>
>>
File: shitpage.png (4.7 MB)
4.7 MB PNG
here is mine, made it with ChatGPT before i discovered this thread. Would fill it out some more but need some help.
How do i force Firefox to use it when opening a new tab? i saw you guys using a local web server, is that the work around?
thanks :3
>>
>>8119328
HTML and CSS are easy tools to pick up and mess around with, if you can't even muster the will to learn a new skill for a personal project then what the fuck are you doing here? You've got all the learning material for it -plus the answer to what you're asking- in the literal first post of the thread.
Either kill yourself or lurk more, preferably the former.
>>
>>
>>8119328
If you don't mind others seeing your work, and theres no sensitive info, you can host it on github. Also in firefox there's an option for new tab, select open home page on new tab, then address the home page to your index.html file. Here's one I forked from another project in the thread, its still WIP.
>>
File: Screenshot_20251019_220151.png (1.2 MB)
1.2 MB PNG
>>8120672
oops file didn't paste
>>
>>
>>
>>
>>
>>
File: reaction.png (1.4 MB)
1.4 MB PNG
>>8121374
am i bugging? do I have to host it?
>>
>>
>>
Why do you fags need chatGPT to write the simplest HTML and CSS for you?
Goddamn.
Am I the only person in the world who has memorized HTML and CSS?
It's not that hard and twice as much fun when you do it in Notepad
https://4chan.org/pol">My" target="_blank">https://4chan.org/pol">My favorite siteAbove is the only site I use
>>
>>
Like this anon said >>8121587 you don't need chatGPTard to write this shit for you.
Start basic, a single link, maybe an h1 header, change colours, etc, then expand.
As you dig dipper it's gonna take you through several side quests, but that's how it works, you explore and discover what you like and then you keep adding stuff.
Later you will realize, half of it is adding a script that will do stuff for you, but that's only the easy way when you learnt the proper way.
Otherwise you're just copypasting and when it breaks you won't be able to fix it.
>>
>>
Mine : https://lbegey.fr/startpage.html
If you need source i can provide.
>>
>>
>>
>>
>>
>>
>>
File: Screenshot_2025-12-21_10-48-40.png (220.3 KB)
220.3 KB PNG
I just got chatGPT to make me a new homepage. Less of a start page and more of a goals list but holy shit this only took a few minutes of prompting
>>
>>
>>
>>
>>
>>
>>
>>
>>
File: Screenshot from 2025-12-29 20-22-27.png (696.5 KB)
696.5 KB PNG
>>8085519
Too lazy to do a screen record at the moment, but all the 16bit nekos have different animations depending on what is in the news and CVSS vulns. There was a high severity within the last 7 days so thats why shes all hearty eyed rn
>>
>>8127460
Not the guy who asked for the example but rather the guy who first responded to you, but here's what I wrote in an hour. (Keep in mind that I don't know javascript that much)
https://rentry.co/b8s67kq8
Thanks anyway, I'll just insert a version of this into my page for manga updates.
>>
>>
>>
>>
File: ez.png (419.7 KB)
419.7 KB PNG
I stg I see some of you posting AI slop here and just shake my head.
The hardest part of this was the Weather and I still figured it out.
The surprise me hooks into Wiby's Surprise Me Button for simpler websites (Usually older too.) For websploring.
>>
>>
anyone got any reccs for some startpage templates that arent entirely fucking missing off the face of the internet or just so broken they might as well be? really looking to finally set one up and everything in the general links is super fucked up and outdated,
and my only real experience with html-css and js is (rather heavily atleast) modifying tumblr themes like a decade ago lol, so i am simply not skilled enough to just fix a core broken theme that hasnt been updated in 6 years myself
>>
>>8129045
I found that the minimal one is pretty good with some tweaking, and it's not really that much work required, I'm a total retard when it comes to web design and I could work on it.
https://github.com/pedro-pablo/minimal-startpage-template
Though yeah, I'd probably want something better, more graphical, something like OP's start page but darker... surely OP's startpage code is out there somewhere.
>>
>>
File: Screenshot.png (2 MB)
2 MB PNG
figured yous would enjoy an update from fuckshit.
Hosting a website now to get around the shits previously mentioned. CSS had to be used what a shocker. Religious quotes only get updated once every 24h.
Still used ChatGPT for everything lol fight me i'm the human that adds the snippets (apart from first pic that whole thing was done at once).
ciao
>>
File: web_desk_sample0.png (1.7 MB)
1.7 MB PNG
>>8113971
>>8127490
>>8128020
https://gitlab.com/css-templates1/WebDesktop
>>8114906
resources/wallpapers/desert01.jpeg