[a / b / c / d / e / f / g / gif / h / hr / k / m / o / p / r / s / t / u / v / vg / vm / vmg / vr / vrpg / vst / w / wg] [i / ic] [r9k / s4s / vip / qa] [cm / hm / lgbt / y] [3 / aco / adv / an / bant / biz / cgl / ck / co / diy / fa / fit / gd / hc / his / int / jp / lit / mlp / mu / n / news / out / po / pol / pw / qst / sci / soc / sp / tg / toy / trv / tv / vp / vt / wsg / wsr / x / xs] [Settings] [Search] [Mobile] [Home]
Board
Settings Mobile Home
/wg/ - Wallpapers/General

[Advertise on 4chan]

Name
Options
Comment
Verification
4chan Pass users can bypass this verification. [Learn More] [Login]
File
  • Please read the Rules and FAQ before posting.
  • Maximum file size allowed is 6144 KB.
  • Images smaller than 480x600 pixels are not allowed.
  • There are 48 posters in this thread.

08/21/20New boards added: /vrpg/, /vmg/, /vst/ and /vm/
05/04/17New trial board added: /bant/ - International/Random
10/04/16New board for 4chan Pass users: /vip/ - Very Important Posts
[Hide] [Show All]


[Advertise on 4chan]


File: 1631235586271.png (703 KB, 1920x970)
703 KB
703 KB PNG
ffs I slipped 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

---Discord link---
>https://discord.gg/ExAGgVR

---Relevant Sites---
Birb's Ricing
>https://stpg[dot]tk/
Collection of startpages for modification and use.
>http://startpages.github.io/
>https://www.ricing.chloechantelle.com/
>http://pastebin.com/ZJvDn0eN

--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---
>>7801612
>>
Changelog
>Updated (finally) Stylish for Stylus.
Thank you to all the anons who remembered me to update it.
>Added new tool
>Updated a little bit the lines regarding Vivaldi too.
>>
Total newfag here. What's the deal with FF and locally hosted start pages? Can I not open new tabs to a "file://" address?
At this point, I'm thinking of just getting a github page to host my shitty start page.
>>
Is there any way to get Edge to use a startpage for a new tab? None of the addons I've found seemed to work and there doesn't appear to be an option...
>>
Any good tutorials on how to make a searchbar that when pressing enter will redirect to a search engine? All the tutorials on YouTube deal with making the searchbar but not its actual functions.
>>
>>7844663
Here's what you need to know:
https://stpg[dot]tk/guides/firefox-startpage/
>>
File: LLa7HQhhgU.png (1.89 MB, 1920x1070)
1.89 MB
1.89 MB PNG
>>
><
>>
>>7846070
I'm more interested in how you customized your browser.
>>
>>7846554
custom firefox css
>>
Bump lads
>>
>>7844654
anon can you drop the index.html to your start page? giving my fairly simple one below.
>>
>>7847487
OP's are often one from the previous thread. Sorry mate.
>>
>>7848139
oh well, thanks a lot!
>>
>>7844654
>nslsc
yup
>>
>>7847487
>>7848139 is right but that page shouldn't be too hard to replicate.
>>
>>7846072
What is the code for those space-filling tabs?
>>
>>7851137
Often max-width iirc, r/firefoxcss or something like that has more on it, although if you want the specific class I can search it.
>>
File: 99679993.png (44 KB, 1920x1080)
44 KB
44 KB PNG
Good place to get tiling wallpapers?
>>
File: startingpage.png (1.9 MB, 1920x1080)
1.9 MB
1.9 MB PNG
I liked >>7844654 as a basic idea for a startpage, so I spent a bit of time writing a basic template startpage that is similar to the OP pic but can easily support other background and foreground pictures.
Also wrote a small script that generates the links and layou in the html file from a .txt file.
It's still not done, might revisit it tomorrow. I'm getting some sleep. If I do I'll upload source code in case anyone else wants to use it.

The way it's currently set up the background has a slight blur filter, which is also why there's a white border around the big background image. It happens due to the way the algorithm calculates the blur filter and is proportional to the severity of the blur, I have no idea how to fix that except by removing the filter completely, but unless the background image is very dark I actually kind of like it.
The one thing I did not recreate was that rasterized "pixel" overlay that the OP picture has. I don't think it's necessary and I don't feel like coding it at the moment.
Pic related is how it looks at the moment.
>>
>>7851461
Last I wanted to use blur I think it could be kinda offset like the shadow property, if memory serves me right. So you could pick direction, intensity, deep etc...
>>
>>7851990
you can probably find workarounds (either by changing the blur to apply to a smaller area of the screen or by adding another image behind the background that is scaled bigger than the viewport or something like that), but I just decided to change the color of the background, so you can change the color of the border for now. The blur I use only has 1 argument, which is the radius.
>>
File: Startpage.png (2.84 MB, 1920x1080)
2.84 MB
2.84 MB PNG
Well from the outside not much has changed, but the code behind it all is vastly better now.
Pic related is what I now have, a bit closer to the OP version than the one I linked earlier in >>7851461 .

If any anon is interested in generating a similar one, here's the code (github and gitlab files are the same, just use whatever you prefer)
https://github.com/IAmBaut/startpage.py
https://gitlab.com/Baut/startpage.py
>>
File: Startpage with overlays.png (3.5 MB, 1920x1080)
3.5 MB
3.5 MB PNG
>>7852028
>>7851461
Added two optional filters to it:
A vignette and a RGB pixel overlay similar to the OP picture. The pixel overlay can be adjusted in terms of how big/coarse you want the pixels to be. Both can be turned on and off easily.
I like how the pixel overlay turned out, not sure how I feel about the vignette yet.
>>
>>7844654
recently when using firefox the hover to unwarp animation starter pages similar to
https://startpages.github.io/startpages/Startpage-zivallh/
and
https://startpages.github.io/startpages/startpage-rwrt_crshd/
are now all of a sudden laggy as fuck.
Is there any way to fix this? it works fine on chrome browsers for whatever reason
>>
>>7852468
>it works fine on chrome browsers
Since firefox is basically the only regular browser that doesn't use chromium to render websites (surf, waterfox and similar don't count as regular browsers let's be honest), it's probably related to their rendering engine. Maybe put a bug report into the github or something? I don't know enough about how it renders shit to tell you how to fix it myself sadly.
>>
File: 1635219213636.jpg (328 KB, 1920x999)
328 KB
328 KB JPG
>>7852573
i figured it out
>>
>>7852831
Wait fingerprinting is fucking with the code? The fuck are they using that requires user identifiable data? kek.
>>
>>7852865
for canvas blocking shit but firefox seems to aggressively hinder anything that could be an exploit. Like sure there are addons that do the same thing but i was told they were nothing but a placebo
>>
>>7852901
oh right I forgot that html5 canvas data is pretty important for fingerprinting and also often used by firefox.
Can't have it both ways I guess, either you want to max your privacy or performance, one comes at the cost of the other at some point. Glad you figured it out.
>>
File: hLLPu39.png (4.62 MB, 1920x1080)
4.62 MB
4.62 MB PNG
>>7852273
2 more images, then I am done posting this startpage.
I like the darker space look quite a lot as well.
>>
File: JIwPXUS.png (4.82 MB, 1920x1080)
4.82 MB
4.82 MB PNG
>>7852906
And the last one. Experimented around a bit with transparent backgrounds, but I like the end result less than the one with a normal picture. Feels tacky to me somehow.
>>
File: startpage.jpg (107 KB, 1920x1080)
107 KB
107 KB JPG
How difficult would it be to get my startpage to scale with the size of the browser window?
>>
>>7852999
What do you mean?
Depending on how you implemented it it should be very easy or somewhat annoying. An intuitive way to get it to work is probably to put a div as the "main container" (or style the html body) that fits 100% of the screen. Then put another div in that that is positioned in the right place (in your case the center) and is sized relatively to its parent. Then put what content you have in your startpage now in that div. That should do it. Might need some tweaking to prevent overflows, but should work.
>>
>>7853011
Okay I will try. Thanks brother.
>>
>>7852028
Hey Anon, I am an utter beginner to HTML and CSS, so it's really hard for me to navigate around all of this. I was trying to recreate your page but this is as far as I got. How do i make the container for the links in the middle? btw, this is me >>7847487
>>
>>7853135
The easiest way is probably downloading the github/gitlab files I linked. Then you can either use the generator I added in there or (if you want to recreate it to learn) simply click the html file to open in a browser. You can then either edit the html file in a code editor of choice, or inspect the site in the browser with developer tools to get a better idea about what is going on. (In Firefox that'd be crtl+shift+c to open the inspector).
Generally consider html the skeleton that just defines what content there is, while the css defines where it goes and how it looks. So if you look at my startpage as a html and inspect the page you can see that I have a background image div in the body, followed by a window background (which is the window image) div and the overlays. With different css these could have been nested as well, but I wrote it this way instead.
If you then click the windw-bg div it will show you the stylings in the lower left of the inspector window. There you can see that I defined a custom height and width (gained from the image source), a background image, positions, margins etc.. You can also turn them off or on individually.
For example the pic you posted clearly has the picture not sized to the size of the div, so you'd add some css rules:
[code]
background-image: var(--backgroundImageUrl);
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
[/code]
anytime you see "var(--variablename)" in my code, that's just a way to use variables instead of hardcoded values. I'd hardcode everything while trying things out and only add variables later if you want (or leave it out).
>>
>>7852999
anon can you share ur code pls
>>
>>7853135
Wait a second, I didn't inspect the pic you posted in fullscreen earlier, I see that it has the content, just no styling, so I guess your question isn't how to recreate the page by hand, but how to deploy it, so forget my previous post.
From the looks of it the css isn't linked. I have 2 ideas why that may be:
Either because your browser has issue with local cross origin files, or because it is for some other reason at a different path.
Here's how to fix it:
Easiest way is going into the .css file, copying it all and adding the contents into the html file in <style> tags.
Alternatively by looking into the console in your browser while refleshing you should see some error message that specifies why some assets didn't load. I also don't get how one picture managed to load but the rest didn't, css normally either links correctly or not at all.
Can you give me some more info? What OS are you on, what browser etc.
If it's fundamentally broken I'd like to fix it for others.
>>
>>7853163
Voila
https://pastebin.com/d2FdENG8
>>
>>7853216
thanks
>>
>>7852028
>the code behind it is vastly better now

oof that was mine, but you're right, my code was an antisocial mess lol
>>
>>7853247
>oof that was mine
Don't worry I actually never looked at your code anon, I meant vastly better than my own code that was used when I posted >>7851461.
>>
>>7853248
its all good, the orignal was still probably an improvement on mine
>>
>>7853249
might as well contribute this, I'm now using a darker theme
>>
File: skyline.gif (4.14 MB, 1500x900)
4.14 MB
4.14 MB GIF
>>7853250
the inset image is actually a gif btw
>>
>>7844654 simple and comfy
>>
>>7853197
Hey, Thanks a lot for the reply mate. I am using Firefox. When I click on the actual .html file it works, but I am using an extension to get my startpage to work, and it doesn't display any elements, only this:
>>
>>7853197
I switched to Chrome, It's working perfectly. Thank you so much!
>>
File: startpage.png (110 KB, 1568x1082)
110 KB
110 KB PNG
Got template from the startpages github. Changed background to solid color and added ghost in the shell gif for added kewl.
>>
>>7853257
can you share how you added a gif to it and changed the color of the container?
>>
>>7853301
>but I am using an extension to get my startpage to work
That explains it then, probably the extension that forbids loading of external content.
The way to fix that with github would have been
https://stpg[dot]tk/guides/firefox-startpage/
It's annoying that browsers are trying to discourage custom startpages for ads.
>>7853316
If it works for you that's fine. I don't really use chrome out of principle, but happy it works for you. Enjoy.
>>
>>7853342
Not that op, but you can add a gif the same way you add a image. Just link to the gif instead. As for the container color changes, use the inspector tool on your browser to see what each element is called, then edit that element's colors. If you mean the windows (instead of the contents of the window), with the code I shared in >>7852468 that's not yet easily doable. You either need to edit the image in a image editing software or add some sort of overlay. I was thinking about making that programatically changeable when I have time, but during Christmas and maybe until new years I will probably be busy, so it may take a bit. Will see when I have the time. If I do I will update the github though.
>>
>>7852028
anon can you share how you made the clock pls
>>
>>7853437
Hey, I'm not anon, but I guess he used a little bit of javascript that updates the innerHtml of a div element.
I wrote a couple of functions to do that, let me know if you need them :)
>>
>>7853466
>>7853401
>>7853404
>>7853149
>>7853197
Thanks guys for the help, I finally got where I needed to be with this proper start page. Sending Peace and Love!!
>>
File: startpage.png (36 KB, 1920x1080)
36 KB
36 KB PNG
simple and minimal
>>
>>7853437
Well I was (and kind of still am) visiting family ocer christmas, so I didn't check the thread, sorry about that.
>>7853466 is right though, you can see the code by opening the .html file and looking what is between the 'script' tags.
The function in there is for the clock. That being said if you only want to change the timezone, you can easily do so in the python code as well.
>>7853658
Nice, glad you made it work for you. I like the style.
>>
File: webpage1.png (4.64 MB, 2560x1440)
4.64 MB
4.64 MB PNG
>>7844654
pretty basic, but i enjoy this one
>>
>>7854879
It looks good anon. Readability is a bit low for my tastes, but if it works for you that's great. Personally I'd try to add a border to the font to make it easier to read, but then again you quickly know where the links are by heart anyways.
>>
I made this years ago. Still use it to this day.

Layered a few characters, added a layer of smoke and yellow particles using some random javascript and obviously distributed it all so it looks cool.
>>
>>7844654
>Collection of startpages for modification and use.
>>http://pastebin.com/ZJvDn0eN
>Uploaded Jan 3rd, 2016

Surely, /surely/ it is about time to update that paste?
>>
b
>>
hey wg! somebody knows how can i make a border bottom that looks like this one?
>>
>>7856670
You can do that with another five bottom aligned and with a radial gradient as the background
>>
>>7856670
>>7856739
Ignore the 'five' not sure what happened to my brain
>>
>>7852999
> Luke Smith
> Landchad
Remember to bind your keys so Alt+Shift+^R+f1 takes you to based.cooking
>>
working on this one
what do you think?
>>
>>7844654
I've improved mine
>>
File: unknown.png (2.42 MB, 1920x968)
2.42 MB
2.42 MB PNG
>>
File: 08-01-2022 00 47 03.png (356 KB, 1360x766)
356 KB
356 KB PNG
>>7855752
remade it
>>
>>7845227
is there any way I can do this for librewolf? I have tried to apply this guide to librewolf and it doesn't seem to work
>>
>>7858756
drop code <3
>>
>>7858752
I like that a lot. Can you share the code for yours?
>>
>>7858762
cringe
>>
>>7845130
you using php or javascript?
>>
>>7845130
searching google for "test"

>https://www.google.com/search?q=test

html:

[code]
<form method="get" action="https://www.google.com/search">
<input type="text" name="q" placeholder="search text" />
</form>
[/code]

naturally use some CSS styling or whatever
>>
>>7857767
Not much on it to have a opinion yet. Looks decent, not sure what the middle field is for (links maybe?).
>>7858752
Looks nice, I like the matte appearance and flat nature of it.
>>7858762
Weirdly I prefer the old one, but they both look nice anon.
>>7845130
Most engines encode the query into the URL as part of the request, so no need to work with complicated http requests, just find out the URL syntax and redirect to that, like >>7859041 suggests.
>>
>>7858762
i like it, but i would use the same font for the time so it is more consistent
>>
>>7858864
https://github.com/Jimmynutreno/homepage
>>
File: WIP.webm (2.41 MB, 1006x1042)
2.41 MB
2.41 MB WEBM
WIP
>>
File: 1589311982863.jpg (737 KB, 1920x1080)
737 KB
737 KB JPG
>>7859150
Thanks a lot, fren, have a great Sunday
>>
Mine inst very beautiful under the hood, but i manage to get it done! kkkkkk
>>
File: home.jpg (785 KB, 2561x1295)
785 KB
785 KB JPG
been lurking for a while and been kinda jelly at all the nice startpages you guys have, I finally decided to create one for myself.

question to all the veterans, what is your favorite thing about using a startpage? does it help you with productivity? (like maybe not putting links that can easily distract you etc.)
>>
>>7859419
General feedback: Looks great, I just think readability is a bit low for my tastes. If you want to change that you can either change the font color to something with more contrast (but that may destroy the aesthetic you are going for), add a somewhat translucent background or experiment with a text outline with
-webkit-text-stroke-width
and
-webkit-text-stroke-color

>what is your favorite thing about using a startpage?
I just think they are neat. I get some enjoyment whenever I open a new tab and I see my little startpage pop up.
Technically I have 2 startpages, one of which is more practically useful. One is for my homeserver (a homer dashboard linking to the appropriate adresses and ports for the services I run on it) and the other is my normal startpage which just links to sites I frequent. I get to the server dashboard via a link on my normal startpage. I could of course theoretically have all those services as normal favorites, but I prefer a dashboard. I also still have my favorites toolbar enabled on firefox, which could theoretically replace the normal startpage, but as I said I enjoy the startpage more.
>>
>>7859209
this is a bit too much
did you really do all of this for a personal home page?
i can understand if you're a web dev and you made such a thing as a portfolio website, but i mean something this intricate (or should i say, tedious) for personal use is absurd
>>
>>7859457
>>7859419
nah try this:

text-shadow: 0 0 2px #000;
>>
>>7859419
i really like how this looks, would you mind sharing it?

i haven't noticed an increase in productivity since i started using a custom startpage. as for why i like using a startpage, i'd have to say because it looks nice and having my most frequented sites there to click is a bit more convenient than typing the url into the address bar.

also one totally unrelated question, but would you suggest using 2chan while learning japanese or is there too much slang and it would be overwhelming? and do you wanna be frens on AB?
>>
>>7859520
I don't like blur radius as text backgrounds personally, but it's certainly an option.
>>
>>7859419
>>7859526
the text should have anti-aliasing


-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
>>
alright fuck it, i'm going to make a start page for myself.
i've been a web dev for 7 years, i know PHP and javascript very well. HTML + CSS like the back of my hand

does anyone have some decent php scripts for parsing RSS feeds. i want to have a news feed
>>
>>7859457
thanks for the feedback, I will def try the stroke options. the dashboard thing sounds interesting I've never heard of it before. what links do you keep there?

>>7859520
I'll give that shot

>>7859521
thanks man! of course I can share it. https://github.com/Odensala/startpage-space
I put my ab username in the name field so feel free to add me.

>>7859534
The text is intentionally supposed to be jagged to emulate the PC-9800 feel. Or are you referring to something else?
>>
>>7859589
>the dashboard thing sounds interesting I've never heard of it before.
Dashboards are quite popular among people with homeservers, what software you use for one (or if you write your own) changes from person to person.
Homer is a decent dashboard, generated from a single config.yml file, which live updates (no compiling needed), so it sits in my network and I can just open it in a texteditor, do some quick edits and have it changed. As for the layout - it's not perfect, but its simple and does its job well.
>what links do you keep there?
Basically links to the services on my homeserver, portainer, nginx proxy manager, jellyfin, calibre web, paperles-ng, wiki.js, radarr, sonarr, bazarr, lidarr, qbittorrent, tdarr, jackett, irc client, rss feed, kanboard, snapdrop, dpaste, syncthing, octoprint, archivebox...
Essentially anything hosted on my local server is accessible via the dashboard, anything else (websites, links and similar) goes on the startpage. Then there's a "Homeserver" link on the startpage to get to the dashboard.
>>
>>7859382
yo do you have sauce for that side panel image?
I swore I had it in my papes folder but it's disappeared
>>
>>7858818
https://github.com/Cornbread121/startpage1
>>
File: 1543541545148.jpg (526 KB, 1920x1080)
526 KB
526 KB JPG
>>7859622
I got it from here a while back!
>>
>>7859589
cheers mate, i'll be using your startpage from now on since the one i had before got stale after using it for a few years. also added you on AB, hope you won't mind if i try talking to you sometime haha
>>
>>7859382
>rindo em inglês com "kkkkkk"
>>
>>7859589
>https://github.com/Odensala/startpage-space link isn't working anymore, do you mind sharing the font you used, looks really good man
>>
hey everyone, noob here.
do actual web developers etc refer to
div > img[title]
as a selector pattern or just a selector?
i checked the w3c latest recommended standards document (https://www.w3.org/TR/selectors-3/#selector-syntax) and they say the latter but i've also seen some other resources online refer to it as a selector pattern.
also do people say "type selector" (also the recommended w3 vernacular) or "element selector"?

i know the actual code matters most but i also want to be able to articulate things professionally too.
>>
>>7861731
JF-Dot-jiskan24-2000
https://a.pomf.cat/qjdums.ttf
>>
>>7861734
what is your goal here?
>>
>>7859589
>I'll give that shot
take a screenshot with it i wanna see
>>
File: 1615344196513.jpg (341 KB, 1920x1080)
341 KB
341 KB JPG
>>7861904
not him but here goes
>>
>>7862014
looks a bit better IMO, i would mess around with the text shadow. maybe make the text bigger as well, i have to put my face up to the screen to see it
>>
>>7859573
I'm kinda too in the market for RSS feeds, I've tried Reuters and AP but they're both deprecated or using something different as "RSS"
>>
File: Screenshot (34).png (567 KB, 1366x768)
567 KB
567 KB PNG
>>
>>7862193
>Reuters
https://www.reutersagency.com/en/reutersbest/reuters-best-rss-feeds/#recent-content

>AP
https://webapps.stackexchange.com/questions/113549/rss-feeds-for-associated-press-news#113551

i know php, js, and of course html and css.
i got lazy on the startup page though. decided to do it and 5 minutes later ADHD'd off to something else. i don't know, i might go back to it.
>>
>>7862321
Yes, I've found the Reuters one but as I typed they're not "just RSS" like lets say the BBC.
>https://feeds.bbci.co.uk/news/world/rss.xml
Which servers better use for my usecase since I use it on other places outside my homepage.

Also the link on the SE about AP says their old links are kinda dead, I appreciate the gesture tho.
>>
saved





Delete Post: [File Only] Style:
[Disable Mobile View / Use Desktop Site]

[Enable Mobile View / Use Mobile Site]

All trademarks and copyrights on this page are owned by their respective parties. Images uploaded are the responsibility of the Poster. Comments are owned by the Poster.