[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

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 38 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: 1641707060906.webm (2.41 MB, 1006x1042)
2.41 MB
2.41 MB WEBM
You mad cunts hitted the bump limit 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-tk.netlify.app/
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---
>>7844654
>>
>Changelog
Updated stpg with the new link
>>
bros i need a homepage that is suited to mobile screens, are there any for me to modify with simply links?
>>
>>7921861
bloat
>>
>>7922007
tpbp
\thread
OP btfo
>>
>>7921861
hey I made that. thanks for posting, OP :^)

>>7922007
>>7922075
You big meanies :^)
>>
>>7922138
sup anon
>>
>>7922141
Working all the damn time. Don't have much time to make new fun start pages these days.
sup with you?
>>
>>7921861

Very well done. Amazing thread but not sure if it should be on his board. As it usually about customizing wallpaper to use not the whole homepage.
>>
>>7922495
This is actually a recurring thread that has been around for some time yet.
>>
>>7922495
Bro these threads have been a staple of this board for 5+ years
>>
File: preview_catalog_classic.png (3.47 MB, 3160x2040)
3.47 MB
3.47 MB PNG
>>7921861
4chan css : https://github.com/Catgrills/4chan.usercss
>>
File: preview_watch_classic.png (2.75 MB, 3160x2040)
2.75 MB
2.75 MB PNG
>>7922617
YouTube css : https://github.com/Catgrills/Youtube.usercss
>>
File: preview_classic.png (3.47 MB, 2760x1638)
3.47 MB
3.47 MB PNG
>>7922618
Firefox userchrome : https://github.com/Catgrills/Firefox.userChrome
>>
>>7922618
nice anon, thank you.
>>
File: stpg.gif (5.31 MB, 1920x979)
5.31 MB
5.31 MB GIF
>>7921861
>>
>>7922842
clean & cute
>>
File: Capture d’écran (2930).png (2.01 MB, 2560x1440)
2.01 MB
2.01 MB PNG
>>7922626
twitter css (wip)
>>
>>7924157
Cool, is everything CSS?
>>
>>7925000
Yes, but it's a bit tricky since most elements have a random class/id (pic related).
>>
>>7921861
omg, more examples of this aesthetic menu
>>
>>7925026
I remember when I tried that I was either being overly ambigous to get everything or chasing down ids so I can target those fixes lmao twitter css is a bitch indeed
>>
slow week
>>
File: how.png (28 KB, 1270x641)
28 KB
28 KB PNG
how would I go about hiding these in html/css?
>>
>>7928830
retard
div.reply input {
display: none;
}
>>
>>7928865
Sorry I'm still pretty new to this
>>
edging the 8th page
>>
>>7921861
I like this. What do I need to do to make this as my startpage?
>>
>>7929940
Depends, i dont gave access to the machine I made this on, but i can talk you through how I built the parts that you like. The only really complicated part were some clip-paths. Everything else is pretty simple css, a little js, and a few svgs i drew up and layered
>>
Does the guide on stpg.tk for setting a startpage in Firefox not work any more?
I've made a new startpage for a new Linux sytsem, but I can't for the life of me get Firefox to show the page when I open a new tab.
>>
>>7930401
Thanks for the offer, but I have next to no knowledge on how to code. I saw the OP and thought I could do something similar. If anything, it looks really cool and I bet you're a cool dude too.
>>
>>7925026
How do you deal with those? Unless have attributes of course.
>>
gotchu senpai ヾ(•ω•`)o

https://youtu.be/xfeelu9IycM
>>
>>7922617
Looks great my barebones wrapper. I'll probably fork it.
>>
>>7931375
you don't, unless, like you said, they have attributes or have a different tag other than div
>>
>>7930401
How’d you do the circle background. I’ve actually tried to do something similar by creating an svg animation in Adobe after effects. Could never figure how to put it on the website though.
>>
>>7922617
>>7922618
Great work as always, Kat! I really loved the YouTube and 4chan style.

If I'm not overstepping I've got two question for you:
First, any reason you nuke all your previous works?
And second, any chance you can make a style for mDex and make it look like v3 (the version you had made the previous style for mDex)? I know that's like asking to alternate the whole site and it may not even be possible; also mDex not being steady with their frontend it may be discouraging to make something like this (though I don't see them changing anything in the regards any time soon).

Thank you in advance!
>>
Anyone have any experience making startpages with Vivaldi recently?
>>
>>7931633
As far as asset creation goes, I made the composition in layers as a still image, then exported each of those layers as svgs one-by-one. Them being svgs isnt really important, you could do the same with pngs. Anything that allows for transparency.
The animation is done with css keyframing. Each of those layers are contained in a div and center aligned, each with their own animation id. Basically just so that their rotations to act independant in direction and timing.

So, we've got asset01.svg, asset02.svg, etc... They're all inside a container in your html file like

<div id="container">
<svg>
<svg>
<svg>
</div>

You'll assign each of those svgs (the layers of your composition) a unique id, so that you can assign an animation tag. Something kind of like this

#svg01 {
animation: a01 12s linear infinite;
}
#svg02 {
animation: a02 30s linear infinite;
}

Im phoneposting, so just take this as referential. Look into css animation tags to get a better understanding of whats going on here. The important part is that 'a01' and 'a02' are arbitrary names which reference a css keyframe. The css for those look something like this

@keyframes a01 {
0% {
transform: rotate(0)
}
99% {
transform: rotate(359deg)
}

}

Again this is a rough approximation so that you know what to look for. If you're looking up css animations, keyframes will be covered.
>>
>>7931810
Thanks, I deleted all my others works because they were quite old and I wasn't satisfied with them anymore. I wanted a fresh start.

For Mangadex, I don't know if I can make a style similar to the previous one with css alone, I can try tho, so if you have any suggestions, feel free to share them.
>>
>>7932580
>Thanks, I deleted all my others works because they were quite old and I wasn't satisfied with them anymore. I wanted a fresh start.
Yeah, I understand. At some points your old works aren't the best you can do at this point. Well, I'll just hope for a new MU style soon.
>>
>>7932580
>>7932614
>For Mangadex...
Yeah, I wasn't sure if it was even possible to make it exactly as it was in v3. I just hoped for something similar and not what they've going on right now. Don't take me wrong, it's not bad, I just prefer the old style (v3). As for suggestions, I guess this clone of the site is pretty much the same as v3 was back then: mangadex dot tv . I guess if it was something similar with your unique style of things it would be as good as ever. I'm not even sure if you would be possible to add those side bars that v3 had which were called Top manga and Top Chapters because they haven't implement view counts. Though, you can find a few things in Titles > Advanced Search Anyway, anything similar would be good enough. At least we wont have to use v5 and if they add new stuff (like view counts) we can see if you are able to add them in your style.

Apologies I had to reply with two different posts. I wrote too much.
>>
finished tinkering today
>>
bump
>>
Bump
>>
aaaaaaaaaaaaand page 9
>>
>>7933299
Looks great!
>>
>>7936536
Dang, again?
>>
>>7937254
S A V E D
>>
File: 73nd5FBVcsuf.png (159 KB, 2317x650)
159 KB
159 KB PNG
brehs i’m trying to get my old css to work with 4chanX but my in-line replies are all fucked, any ideas?
>>
>>7938629
what is the css ? it may have a new selector, no !important applied, position: absolute, etc.
>>
File: start.png (3.76 MB, 3840x1940)
3.76 MB
3.76 MB PNG
I will add some JS so that the menu has the categories aligned vertically and the submenus are expandable, but so far I like this basic HTML+CSS w/ no JS
>>
File: 1665938411113439.jpg (48 KB, 1024x941)
48 KB
48 KB JPG
>>7939027
>funnyjunk
>>
>>7939039
yes, and?
>>
>>7939042
Cringe...
>>
File: 9862393874.png (196 KB, 1564x1192)
196 KB
196 KB PNG
>>7939043
>>
>>7939027
a video example of what you want to do ? I really doubt you need js for that
>>
>>7939141
I actually did the thing last night, I had to use JS because I wanted to be able to expand/contract on click, don't know how to handle clicks with pure HTML+CSS.

Will post results once I get back from work.
>>
>>7939141
Hey sorry I don't know how to post it here, it says audio streams are not allowed, but I uploaded the capture to MEGA

https://mega.nz/file/fuAmEQQb#D2SJ4lcvw0sys4DVDYoh0wAmMN5qLe9elZpyKOnPZI4
>>
>>7939196
something like this should work, but I didn't test:
[code]
<style>
input[type="checkbox"] {
appearance: none;
cursor: pointer;
}
input[type="checkbox"]::before {
content: attr(title);
}
input[type="checkbox"]:not(:checked) + ul {
height: 0;
}
@media (prefers-reduced-motion: no-preference) {
ul {
transition: 300ms;
}
}
</style>

<section>
<input type="checkbox" title="watever"/>

<ul>
website list
</ul>
</section>
[/code]

>audio streams are not allowed
you can remove audio with ffmpeg's -an option
>>
>>7939211
I forgot these don't work here, lol
>>
>>7939211
Oh yeah something among those lines would definitely work, but having some job conditioning, having the menu entries as `<input/>` activates my autism mode, making me uneasy as all fuck. The JS was extremely basic, so I'll just go with my shitscript
>>
>>7939222
that is the price you pay for not using js
>>
bumping for interest
>>
>>7921861
bump
>>
Okay what userstyle do you use for this hellhole also Happy Halloween.
>>
>>7942686
I like this one - https://github.com/saxamaphone69/ss21
>>
>>7922842
link?
>>
>>7921861
this looks amazing
I just started web design as additional education, I don't plan to make it my career, just took it for fun and because it was free (some EU promotion), and this seem like a really cool way to test my skills when I finish
>>
File: 1.png (2.29 MB, 2560x1432)
2.29 MB
2.29 MB PNG
>>
>>7944073
really cool thanks
>>
How?
What black magic is this?
Please I want to know it sirs.
https://i.4cdn.org/trash/1668655201580918.png
>>>/trash/52402409
https://desu-usergeneratedcontent.xyz/trash/image/1668/65/1668655201580.png
https://desuarchive.org/trash/thread/52364483#p52402409
https://imgur.com/a/zqLnY0W
Image is too small apparently
>>
>>7946265
>>7946265
it's just copying the reddit look, nothing too complicated, maybe ask the poster ?
>>
>>7946265
>>7946321
I just saw the thread, it's https://greasyfork.org/en/scripts/16672-4cheddit-skin/
>>
>>7946323
thx alot
>>
can anyone please tell me how to insert a search bar in my startpage?
>>
>>7946869
I had this before:
<form action="https://duckduckgo.com/html">
<input name="q" placeholder="Search" autocomplete="off" autofocus="">
<button type="submit">Submit</button>
</form>
>>
>>7945381
bg image: DRESDEN BY MOONLIGHT - JOHAN CHRISTIAN DAHL
nice choice
>>
I don't understand how to set the new tab page to my local index.html file in Firefox. I have changed the "homepage and new windows" just fine, but for new tab the only two options are the default firefox one or a blank page.



[Advertise on 4chan]

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.