← Home ← Back to /wg/

Thread 8085519

114 posts 60 images /wg/
TheSound !!gmz/OJ84nQK No.8085519 [Report] >>8096373 >>8118247 >>8121571
/html-css/ HTML-CSS General #29
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
TheSound !!gmz/OJ84nQK No.8085520 [Report] >>8093162 >>8105736
Honored mention this anon >>8075165 since his page felt like it had a lot of work put in.
Anonymous No.8085657 [Report]
i miss startpages
Anonymous No.8085682 [Report] >>8086333 >>8090180
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
Anonymous No.8086333 [Report]
>>8085682
very cool
Anonymous No.8086334 [Report] >>8086506 >>8087031
Is there any way to use a homepage like this on android? I couldn't find a way to set a local storage homepage like this on android's default browser OR mobile firefox.
Anonymous No.8086506 [Report] >>8088485
>>8086334
ff on android still does not allow you to change the homepage. the main workaround is to go to your desired website and add it to the homepage so that firefox starts with that
Anonymous No.8087031 [Report]
>>8086334
If you access your local terminal on android, maybe you can play around with local files and hosts/hostnames
Anonymous No.8088084 [Report]
Saved
Anonymous No.8088485 [Report] >>8090180
>>8086506
So I guess in theory I could upload my homepage to a GitHub page and set it as my homepage on FF.
Anonymous No.8088528 [Report] >>8089129
That's my startpage. Made it look a lot cleaner now.
Anonymous No.8089129 [Report] >>8107440
>>8088528
I always felt like this kind of styles benefits a lot of clutter
Anonymous No.8090057 [Report] >>8090059 >>8090200
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?
Anonymous No.8090059 [Report] >>8107420
>>8090057
goto
https://4chan.org/frames
you may need to change browser settings to enable frame support though
Anonymous No.8090180 [Report] >>8090247
>>8088485
yes. in fact, this thing >>8085682 that i made back then was inspired by oldfags who posted their startpages on github pages.
Anonymous No.8090200 [Report]
>>8090057
mine does it, but it puts replying and watched threads there too
https://github.com/ricewind012/userstyles
Anonymous No.8090247 [Report]
>>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.
Anonymous No.8090945 [Report]
+1 to image limit, no contribution
Anonymous No.8091995 [Report] >>8091996 >>8095474
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.
Anonymous No.8091996 [Report] >>8105897
>>8091995
Actually, I found the repository I got it from:

https://github.com/IAmBaut/startpage.py

Turns out I only changed some pictures and colors lol
Anonymous No.8092595 [Report]
My first startpage.
Maybe it's what you get when you're good at code but shit at design.
Anonymous No.8092673 [Report] >>8092674
JEEEEEZs. I thought I am the only dumb doing this fkn shit. Bruh. I've been doing it for quiet a fkn while. Like more than 10 years.
Anonymous No.8092674 [Report] >>8092675
>>8092673
Anonymous No.8092675 [Report] >>8092676
>>8092674
Some versions got lost beyond recoverability
Anonymous No.8092676 [Report] >>8092677
>>8092675
Anonymous No.8092677 [Report] >>8092678
>>8092676
Gorgeous, is there an online version? I love this.
Anonymous No.8092678 [Report]
>>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.
Anonymous No.8092681 [Report] >>8092685
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.
Anonymous No.8092685 [Report]
>>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.
Anonymous No.8093162 [Report]
>>8085520

Font needs some work but everything else is brilliant.
Anonymous No.8093257 [Report] >>8093974
I understand the principle of quick access, but I don't get the need to recreate the entire bookmark catalog of your browser.
Anonymous No.8093974 [Report]
>>8093257
Well, some people might use their bookmarks more often than not.
Anonymous No.8094068 [Report] >>8094079
keep it simple, retard.
Anonymous No.8094079 [Report] >>8094153
>>8094068
That sounds like a marvelous idea for a sort of to-do list. Does it support linkification of urls?
Anonymous No.8094153 [Report]
>>8094079
Yes I mainly use it as a scratchpad, and no it doesn't do anything fancy. Just plaintext.
Anonymous No.8094872 [Report]
Saved
Anonymous No.8095465 [Report] >>8095471 >>8097509 >>8097653
https://www.reddit.com/r/firefox/comments/c8z0hx/help_set_new_tab_page_to_local_file/
absurd how hard it is to set a local new tab page on firefox these days.
Anonymous No.8095471 [Report]
>>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.
Anonymous No.8095474 [Report]
>>8091995
Pretty cool. Ultimate Guitar Anon along with this board. I like your tools and philosophy.
Anonymous No.8095667 [Report]
How would I go about implementing a RSS feed for new manga chapters? Where do I start?
Anonymous No.8096091 [Report] >>8096092
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
Anonymous No.8096092 [Report]
>>8096091
this how it looks when i hit new tab
Anonymous No.8096373 [Report]
>>8085519 (OP)
OP link to ricing.chloechantelle.com doesn't work
this link works: https://ricing-guide.github.io
Anonymous No.8097509 [Report]
>>8095465
>https://www.reddit.com/r/firefox/comments/c8z0hx/help_set_new_tab_page_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
Anonymous No.8097653 [Report] >>8097654 >>8097753 >>8097766 >>8098190 >>8098252 >>8101090 >>8109837 >>8110849
>>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
Anonymous No.8097654 [Report]
>>8097653
Accidentally used the link to my personal file but you get the point
Anonymous No.8097753 [Report]
>>8097653
god bless anon
Anonymous No.8097766 [Report]
>>8097653
All of google failed me and it was this post that gave me the solution. Thanks.
Anonymous No.8098066 [Report]
How can I take advantage of Zen's transparency (Mica?) using CSS? I tried looking at the Zen Internet addon but its "background: transparent;" does not work at all?

t. codelet
Anonymous No.8098102 [Report] >>8098121
Here's mine
Anonymous No.8098121 [Report]
>>8098102
Is it animated? Does the meteor orbit the Earth?
Anonymous No.8098190 [Report]
>>8097653
youre a fucking saint anon
TheSound !!gmz/OJ84nQK No.8098252 [Report]
>>8097653
Well fuck me anon, I thought I would never see it and you had it fixed last week. I'm adding this to the OP just in case and will speak to guide's owner. Thank you.
Anonymous No.8099725 [Report]
SAVED
Anonymous No.8100759 [Report] >>8100796
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.
Anonymous No.8100796 [Report] >>8101060
>>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.
Anonymous No.8101060 [Report]
>>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;
}
Anonymous No.8101090 [Report] >>8110849
>>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?
Anonymous No.8101620 [Report] >>8101702 >>8104357 >>8104374
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.
Anonymous No.8101702 [Report]
>>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.
Anonymous No.8102449 [Report]
saved
Anonymous No.8103230 [Report]
yet again
Anonymous No.8104078 [Report]
You're not escaping
Anonymous No.8104357 [Report]
>>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
Anonymous No.8104374 [Report]
>>8101620
inspect webpage you like, figure out how its done

thats it, you also have ai tools to ask questions and make examples, its piss easy.
Anonymous No.8104797 [Report] >>8104985 >>8105363
Does anyanon know if it's possible to disable Firefox fingerprinting-protection on local sites so I can load custom fonts?
Anonymous No.8104985 [Report] >>8104987
>>8104797
can’t you just serve up those custom fonts as part of the website you’re making?
Anonymous No.8104987 [Report]
>>8104985
I could but the browser already has that shit loaded, it just refuses to let me use it..
Anonymous No.8105363 [Report] >>8105399
>>8104797
When will you learn to search for your problem online before posting on 4chan about it?

Here: https://support.mozilla.org/en-US/kb/firefox-protection-against-fingerprinting
Anonymous No.8105399 [Report] >>8105497
>>8105363
when will you learn to comprehend the sentences i type? i don't want to disable it entirely, just on local pages.
Anonymous No.8105403 [Report]
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.
Anonymous No.8105497 [Report] >>8105499
>>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?
Anonymous No.8105499 [Report] >>8105501 >>8114191
>>8105497
It literally isn't an option on local pages
Anonymous No.8105501 [Report]
>>8105499
Sorry, it's my bad then. Don't use firefox myself.
Anonymous No.8105736 [Report]
>>8085520
This one's sick. Is there a git somewhere?
Anonymous No.8105897 [Report]
>>8091996
thanks nigga
Anonymous No.8106607 [Report]
SAVED
Anonymous No.8106747 [Report] >>8107453 >>8114906
It's a work in progress
Anonymous No.8107417 [Report]
u not dien on me
Anonymous No.8107420 [Report]
>>8090059
if it's html you can just add the links, what am I missing
Anonymous No.8107440 [Report] >>8108641
>>8089129
NTA
But yeah I totally agree. Everything is so readable, so the "clutter" only increases the informational density of the page, without managing to feel overwhelming.
Anonymous No.8107453 [Report] >>8107469
>>8106747
Wow your work is amazing! can you explain me? please
Anonymous No.8107469 [Report] >>8113971
>>8107453
Built on WinBox.js with custom CSS. The design is inspired by SGI's Indigo Magic Desktop and uses some SVG icons from IRIX.

Tested on Firefox: gofile.io/d/lOcCUg
Anonymous No.8108641 [Report]
Page 10 noooooooo

>>8107440
Yeah nicely put, I couldn't agree more.
Anonymous No.8109837 [Report]
>>8097653
nice thanks
Anonymous No.8110849 [Report] >>8117574
>>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.
Anonymous No.8111992 [Report] >>8114904
bump
Anonymous No.8112744 [Report] >>8114904
rebump
Anonymous No.8112745 [Report] >>8114904
Are we out of ideas?
Anonymous No.8113971 [Report]
>>8107469
The link is broken.
Anonymous No.8114191 [Report]
>>8105499
It's been 6 months but you should just host a local webpage. Use HFS or something.
Anonymous No.8114901 [Report] >>8114904
savin
Anonymous No.8114904 [Report]
>>8111992
>>8112744
>>8112745
>>8114901
Good samaritans.
Anonymous No.8114906 [Report]
>>8106747
Wallpaper, please?
Anonymous No.8116047 [Report]
Bump
Anonymous No.8117308 [Report]
total bump
Anonymous No.8117574 [Report]
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.
:^)
Anonymous No.8118247 [Report] >>8118308
>>8085519 (OP)
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.
Anonymous No.8118308 [Report]
>>8118247
good luck anon!
Anonymous No.8119328 [Report] >>8120621 >>8120672
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
Anonymous No.8120621 [Report] >>8121373
>>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.
Anonymous No.8120647 [Report]
^ nicest frontend developer
Anonymous No.8120672 [Report] >>8120673 >>8121374
>>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.
Anonymous No.8120673 [Report] >>8121150
>>8120672
oops file didn't paste
Nezahualcoyotl, on uitstlanik se No.8121149 [Report] >>8121372
Is it possible to filter flags with CSS?
Nezahualcoyotl, on uitstlanik se No.8121150 [Report]
>>8120673
Beautiful.
Anonymous No.8121372 [Report]
>>8121149
like filtering 4chan posts by flag? be more specific.
Anonymous No.8121373 [Report]
>>8120621
spell it out for me anonGPT how 2 set html file as new tab page firefucks
Anonymous No.8121374 [Report] >>8121378
>>8120672
posted before reading lol, thanks
Anonymous No.8121378 [Report]
>>8121374
am i bugging? do I have to host it?
Anonymous No.8121571 [Report]
>>8085519 (OP)
Where can I get op's pic
Anonymous No.8121586 [Report]
I'm 35 and have been making these since forever

It's funny how zoomers have no idea what an HTML file is.
They just have an AI think for them or something.
Anonymous No.8121587 [Report]
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

<html>
<body>
<a href="https://4chan.org/pol">My favorite site</a>
<br>
<p>Above is the only site I use</p>
</body>
</html>
Anonymous No.8122211 [Report]
update, on windows,
"resource:///modules/HomePage.mjs" will throw error
replace it with "resource:///modules/HomePage.sys.mjs"