Css - Tumblr Posts

blue webcore blinkies (day version)

Night version

This looks really good compared to the new dash which doesn't fit the screen, reminder to always check projects for yourself before installing unfamilliar software though.

I created a Userstyle for the Chrome/Firefox Stylus Extension that reverts the new dashboard to the old format. This took a lot of tweaking and it's not perfect at all, but if anyone wants it I'll be uploading it soonish now!

userstyles.world

Old Tumblr Dashboard (Pixiel) by Pixiel

A fix for the new Tumblr dashboard! If you don't want the sticky header you can remove the labelled script at the top of the css below /* St

You need to have Stylus installed. So if you don't have it:

Install the Stylus Firefox Addon or the Chrome Extension (You can install Chrome Extensions on Edge as well)

Once it's installed into Firefox/Chrome/Edge you can proceed with adding this style or any other.

To add the style, follow the instructions:

Go to this link: https://userstyles.world/style/11286/old-tumblr-dashboard-july-2023

Click on "install".

Style will open a tag with it and in the left side you'll have a button that says "install style", click there. (Step-by-step copied from the lovely dorothyoz39 who wrote this in a reply!) If you don't want the sticky header you can remove the labelled script at the top of the css below /* Sticky Header*/

Be sure to check for updates regularly, I'm fixing things as I go! And because everyone keeps asking here's how to support me on Ko-Fi https://ko-fi.com/pixiel !

To update click the Manage button on Stylus and click the check for update button below then click again to install! If you experience any bugs let me know - feel free to edit it yourself as well! P.S. This userstyle works just fine alongside Xkit!

NEW UPDATE: 27/04/24, 2:15AM BST v11.6

v9.6: Moved the Following | For you | Your Tags to below the create a post panel. Fixed the Accounts Menu! + Bugfixes V10.3: Patio compatibility. Added a way to hide the Patio button & "patio feedback?" button, just search for patio in the code and follow the instructions! v11.0: Temporary Chat feature fix after Tumblr broke it, fixed some positioning issues and j/k scrolling!

UPDATE (12/04/2024): YOU CAN NOW UPDATE YOUR OLD TUMBLE DASHBOARD AGAIN!! After letting the server rest everything is now fixed. I will be leaving the Tampermonkey Backup still up but it will have less-frequent updates to remain a backup so please use the Stylus version!

If anyone wants to help test out a new feature (Post width, dashboard positioning, etc) it would be super helpful! Read more about it here and shoot me a message!

THE CREATOR OF THIS USERSTYLE SUPPORTS THEIR TRANS SISTERS. WE'RE ALL IN THIS TOGETHER!

Thank you dragongirlsnout for all your work on Dashboard Unfucker it was amazing working towards the same goal of fixing this website with you! As a Trans person (Agender, They/Them) I am saddened by the issues trans women have been facing on this site and the women who have been bullied into leaving Tumblr for good. I wish the best for you in all that you do next!

Check the readmore for the changelog, custom code & known issues!

----- Known issues:

Only two columns in Masonry view. Unfixable, Tumblr creates columns based on monitor size, if I try adding another column (because it doesn't exist) it just perpetually loads on screen. Tempfix: Zoom out in chrome/firefox and it adds more columns

Search bar doesn't appear on some pages (like viewing a post), this is because Tumblr removed the search bar on those pages completely. Unfixable!

Tumblr has ONCE AGAIN CHANGED THE ACCOUNTS MENU. The menus are now shorter and have less information on them. This is unfortunately permanent. I do not see any way to fix this. Unfixable.

If you want people's icons to stay fixed in place, instead of scrolling with the dashboard add;

.FtjPK .AD_w7 .JZ10N, .RYkKH > .nZ9l5 { top: 0px !important; position: relative !important; }

to the top of the code! You can also create a second userstyle by clicking the 'tumblr.com' part of the link in 'Write new Style' and adding the code in there! That way you don't have to worry about re-adding it when you update.

Solved issues: (Update)

Menus need to be manually closed SOLVED! in V.4 and updated in V.5! The menu & icon WILL scroll with you if you have removed the sticky header CSS, however, clicking anywhere on screen will make the Menu disappear still.

Masonry view in searches is now fixed!

Resized Messenger Chat Box!

NEW UPDATE 16/08/23, 23:55 BST v6.5: Figured out how to reorganise the icons in the header. Let me know if you have any problems with it and make sure to update your Userstyle! Some icons are hidden with Display: Block; you can hide more icons with this method!

Solved issues p2

Brought back SOME of the icons for Tumblrs latest update - Unfortunately, this does not bring back user icons for Reblogged posts! Make sure to yell at Tumblr for removing the icons as well as the horrible dashboard update here! v7.5 Fixed icons for all posts and put them back where they came from!

v6.9.6.9 (I promise this is the last funny number): Fuck Off Buggy The Clown Update + All languages support for the old header design!

v7.0: Fixed the search bar for tumblrs new collections feature, so it looks like the original search bar!

v8.0: Fixed masonry view icons, hidden the reblog icon on dashboard icons, fixed icons in blog viewport

V8.1: Fixed issue with icons not working on soft-refresh & with endless scrolling disabled - be sure to complain to staff!

v9.3: Changed a few things with the search feature, I also made the posts less round.

UPDATE2 11/04/2024: SO We mighhtttt have overrun their servers. 😅 I'm getting a 500 Internal Server Error every time I try to fix it or upload it as a new style - the massive influx of people downloading the userstyle was probably too much. The Tampermonkey backup on Greasyfork works just fine though! Probably easier for a lot of people migrating anyway! UPDATE 11/04/2024:: My code has broken on Userstyles.world, (it is now fixed as of 12/04/24) until this is fixed I have created a Tampermonkey Backup Version of the Userstyle so feel free to use this version if you've broken yours!

https://greasyfork.org/en/scripts/492279-old-tumblr-dasboard-backup

beginner’s guide to the indie web

“i miss the old internet” “we’ll never have websites like the ones from the 90s and early 2000s ever again” “i’m tired of social media but there’s nowhere to go”

HOLD ON!

personal websites and indie web development still very much exist! it may be out of the way to access and may not be the default internet experience anymore, but if you want to look and read through someone’s personally crafted site, or even make your own, you can still do it! here’s how:

use NEOCITIES! neocities has a built in search and browse tools to let you discover websites, and most importantly, lets you build your own website from scratch for free! (there are other ways to host websites for free, but neocities is a really good hub for beginners!)

need help getting started with coding your website? sadgrl online has a section on her website dedicated to providing resources for newbie webmasters!

HTML (HyperText Markup Language) and CSS (Cascading Style Sheets) are the core of what all websites are built on. many websites also use JS (JavaScript) to add interactive elements to their pages. w3schools is a useful directory of quick reference for pretty much every HTML/CSS/JS topic you can think of.

there is also this well written and lengthy guide on dragonfly cave that will put you step by step through the basics of HTML/CSS (what webpages are made from), if that’s your sort of thing!

stack overflow is every programmer’s hub for asking questions and getting help, so if you’re struggling with getting something to look how you want or can’t fix a bug, you may be able to get your answer here! you can even ask if no one’s asked the same question before.

websites like codepen and jsfiddle let you test HTML/CSS/JS in your browser as you tinker with small edits and bugfixing.

want to find indie websites outside the scope of neocities? use the search engine marginalia to find results you actually want that google won’t show you!

you can also use directory sites like yesterweb’s link section to find websites in all sorts of places.

if you are going to browse the indie web or make your own website, i also have some more personal tips as a webmaster myself (i am not an expert and i am just a small hobbyist, so take me with a grain of salt!)

if you are making your own site:

get expressive! truly make whatever you want! customize your corner of the internet to your heart’s content! you have left the constrains of social media where every page looks the same. you have no character limit, image limit, or design limit. want to make an entire page or even a whole website dedicated to your one niche interest that no one seems to be into but you? go for it! want to keep a public journal where you can express your thoughts without worry? do it! want to keep an art gallery that looks exactly how you want? heck yeah! you are free now! you will enjoy the indie web so much more if you actually use it for the things you can’t do on websites like twitter, instead of just using it as a carrd bio alternative or a place to dump nostalgic geocities gifs.

don’t overwhelm yourself! if you’ve never worked with HTML/CSS or JS before, it may look really intimidating. start slow, use some guides, and don’t bite off more than you can chew. even if your site doesn’t look how you want quite yet, be proud of your work! you’re learning a skill that most people don’t have or care to have, and that’s pretty cool.

keep a personal copy of your website downloaded to your computer and don’t just edit it on neocities (or your host of choice) and call it a day. if for some reason your host were to ever go down, you would lose all your hard work! and besides, by editing locally and offline, you can use editors like vscode (very robust) or notepad++ (on the simpler side), which have more features and is more intuitive than editing a site in-browser.

you can use ctrl+shift+i on most browsers to inspect the HTML/CSS and other components of the website you’re currently viewing. it’ll even notify you of errors! this is useful for bugfixing your own site if you have a problem, as well as looking at the code of sites you like and learning from it. don’t use this to steal other people’s code! it would be like art theft to just copy/paste an entire website layout. learn, don’t steal.

don’t hotlink images from other sites, unless the resource you’re taking from says it’s okay! it’s common courtesy to download images and host them on your own site instead of linking to someone else’s site to display them. by hotlinking, every time someone views your site, you’re taking up someone else’s bandwidth.

if you want to make your website easily editable in the future (or even for it to have multiple themes), you will find it useful to not use inline CSS (putting CSS in your HTML document, which holds your website’s content) and instead put it in a separate CSS file. this way, you can also use the same theme for multiple pages on your site by simply linking the CSS file to it. if this sounds overwhelming or foreign to you, don’t sweat it, but if you are interested in the difference between inline CSS and using separate stylesheets, w3schools has a useful, quick guide on the subject.

visit other people’s sites sometimes! you may gain new ideas or find links to more cool websites or resources just by browsing.

if you are browsing sites:

if the page you’re viewing has a guestbook or cbox and you enjoyed looking at the site, leave a comment! there is nothing better as a webmaster than for someone to take the time to even just say “love your site” in their guestbook.

that being said, if there’s something on a website you don’t like, simply move on to something else and don’t leave hate comments. this should be self explanatory, but it is really not the norm to start discourse in indie web spaces, and you will likely not even be responded to. it’s not worth it when you could be spending your time on stuff you love somewhere else.

take your time! indie web doesn’t prioritize fast content consumption the way social media does. you’ll get a lot more out of indie websites if you really read what’s in front of you, or take a little while to notice the details in someone’s art gallery instead of just moving on to the next thing. the person who put labor into presenting this information to you would also love to know that someone is truly looking and listening.

explore! by clicking links on a website, it’s easy to go down rabbitholes of more and more websites that you can get lost in for hours.

seeking out fansites or pages for the stuff you love is great and fulfilling, but reading someone’s site about a topic you’ve never even heard of before can be fun, too. i encourage you to branch out and really look for all the indie web has to offer.

i hope this post helps you get started with using and browsing the indie web! feel free to shoot me an ask if you have any questions or want any advice. <3

you giggle and kick your feet at home as youre reading fanfic

i am giggling and kicking my feet at school because were learning css

we are NOT the same

skyso.me

Skysometric

Here's where you can find Skysometric on the web!

i made a links page! it's pretty snazzy~

all of the animations on the site, including the opening animation above and the icon animations below, are made entirely with css – no javascript here! the icon animations for the social media icons are particularly fun, you should go see them for yourself 👀

the only javascript on the page powers some keyboard shortcuts, like skipping the animation with esc / tab, or switching between ☀️light and 🌙dark theme with L

i made the site with extensibility in mind, so i can easily add more links later. colors automatically cycle between blue, purple, and pink, and the icons automatically swap to the left or right; all i have to do is add text and an icon, and the css does the rest of the heavy lifting.

i can even add custom color palettes with minimal effort! it's as easy as plugging a few colors and then typing, for example, "green link" (insert zelda joke here)

besides just web dev, some graphic design went into the site as well – namely these two icons for my journal (left) and portfolio (right). i'm particularly proud of the journal icon, it's easily one of my best yet!

speaking of my portfolio, you may notice it says Coming Soon, i.e. it's not done. in truth, it's been coming "soon" for about five years now, waiting for inspiration to strike... and it finally did 👀 i'm hoping to make that my next web dev project~

anyway i have a few more ideas for what to do with this links page in the future, but hey, not half bad for a 1.0 release, right? ✨

check it out and let me know what you think! https://skyso.me/tric

still working on extra bits for that links page. here's a tumblr one where the tumblr logo turns into a reblog.

could i do this with a gif? yeah, sure. did i do this with pure css? you bet i did.

with twitter's potential demise on the horizon, i've returned to working on my links page so that all my socials are in one place. today i added collapsible categories for quicker browsing! check it out here:

skyso.me

Skysometric

Here's where you can find Skysometric on the web!

I used W3schools to learn HTML and CSS and I recommend it. It looks scary, but if you're familiar with any kind of forum coding, such as BBCode, it should start to make sense pretty quickly. Not saying it's the same, but it's a similar concept.

If you don't mind learning some git, you could host your own website using GitHub Pages as long as its less than a gigabye. I'm not entirely sure what other limitations it has other than that, but it seems to be pretty fair game if you want to iterate on something before choosing a more permanent, paid host. Use it to show it off to your friends or something, since it's easier to drop a link to something that updates as you make changes rather than sending over a bunch of html/css files (as small as they may be).

If you want to mess around with HTML and CSS in your free time, you can use VisualStudioCode and one of the many HTML viewer addons available to see your changes in (somewhat) real-time. There are also some HTML editors you can use in-browser if you just want to try it.

Oh, also, maybe try to pick up some Javascript while you're at it. May come in handy if you wanna get fancy, but that's getting more into the weeds a bit.

I feel like the trouble with making personalized sites like this is that, to a lot of people, they will exist as a link board for other things they do. BUT, it'll be *your* link board. You can customize it and add stuff to it in ways you can't fiddle with a linktree for example. Also, it's fun to just...make stuff. Make a page about the video games you completed this year. Make a page for your fanfictions. Make a page for your cat. It's YOURS.

webmastery now! april 2023

Minecraft

Hey everyone,

I have been working on a project for the past couple of months in light of having to interact with friends and family from the comfort of my home. Then I thought it may be useful to more than my small circle, so I wanted to know if anyone around here would be interested in using my custom Minecraft crafting guide.

Up until now I was using a giant text document, then I got fed up of scrolling endlessly and decided to move everything to a web page, and this is WAY better:

Note that this is for the Java version, and I haven’t finished yet!

More details and pictures under the cut!

What you can use it for:

Get all types of recipes: Crafting Table, Furnace, Grindstone, Brewing Stand, and more

Get all alternate recipes possible for a block, including repair recipes

View every single block variant possible

Filter by types of recipes

Find tips added to some recipes

Get all info about animals: taming, healing, breeding, growing

Available in French (for those interested)

Some categories:

Did I waste my time doing this? No.

My parents both LOVE the game, but didn’t want to switch from their PS3 and X360 versions which deprecated at 1.13.2, because there wasn’t anything (or anything not shitty) in-game on the Java version to help with crafting. So voilà. It’s mainly organized so they can easily find stuff, and it works pretty well! Ever since Thanksgiving (social distancing done right), we’ve been playing the latest version on my server.

Also because:

Big pictures

No stupid GIF roundabouts, you can see the blocks for as long as you want goddammit

More intuitive GUI than PC/PS/XBox/any version

Once you load the page, you can use it offline

Am OCD programmer

So, if any of you would like to use it, just let me know! If there are people interested I’ll publish it online. Then feel free to share it and leave feedback! I spent a lot of time and effort doing this, it’s all built from screenshots, game files, my tears, and Notepad.

Here’s the link!

Thanks!

Here is the link everyone! Didn’t expect this many of you to show interest, thank you guys!

It’s in French by default, but you can switch to English in the upper-right corner.

Minecraft

Hey everyone,

I have been working on a project for the past couple of months in light of having to interact with friends and family from the comfort of my home. Then I thought it may be useful to more than my small circle, so I wanted to know if anyone around here would be interested in using my custom Minecraft crafting guide.

Up until now I was using a giant text document, then I got fed up of scrolling endlessly and decided to move everything to a web page, and this is WAY better:

Note that this is for the Java version, and I haven’t finished yet!

More details and pictures under the cut!

Keep reading

The Ruined King — Expediente 

Preview & Download 

~~~~

Gracias a @thekingcodes​ por ayudarme con varios inconvenientes que tuve hace tiempo. Esta tablilla me hizo llorar sangre y no habría podido terminarla sin su apoyo~

Notas:

No usar de base para otra tablilla. Por favor y gracias.

No remover los créditos.

Colores justo en el HTML.

Imagen: (600X600).

A la imagen de fondo se le aplicará un filtro gris~

Pueden contactarme en caso de que haya algo raro. Con confianza.

K, guys, I’m going to copy and paste my AOPS blog CSS in here, but be warned, it’s kind of(really) crazy. I’m not sure it’ll work, but here's a heads up. I mad it when i was 10, and dint understand crediting people so i just copy and pasted and shoved together other peoples codes from their blogs, so this code isn't mine, but IDK who it is. It might have the names in the code, so if there is, I’ll post it here. 

This might be overwhelming for nerodivergent people, but I might be wrong. 

Non-binary pride flag color picked from the counter strike: source icon

PLEASE HELP

CAN SOMEONE HELP ME PUT THE FUKCING SIDEBAR TO THE RIGHT OIF MY PAGE AND HAVE MY POSTS ON THE LEFT IN CANT FOR THE LIFE OF ME FIGURE THIS SHIT OUT. 2 YR OLDS COULD FIUGRE THIS OUT IN 2012 BUT NO ONE IS AROUND TO HELP ME I TRIED GOOGLING BUT NOGHTING WORK CAN SOMEONE PLEASE EXPLAIN THIS TO ME LIKE BABY

nothing else makes me appreciate my coding phase in middle school, where I learned html and css on khan academy, like formatting on ao3

I have so much confidence and power now! If only I could remember the closing forwardslash!

Some people do cool things with CSS transformations, and then there's me (Audio)

Gays should I watch caspers scare school? Or should I grow the heck up