#html css tabs

[codingflicks]

HTML CSS Tabs

[numbpilled-themes]

atheros umbralith- sleeping forgotten deity//transcendance tabbed html website theme code for neocities/nekoweb/etc

LIVE PREVIEW

DOWNLOAD: KO-FI // GUMROAD

[stripitdown-coding]

Radio

Code

A simple box code with tabs. Haven't done one in a while or felt like finishing other in progress templates, so here's one for now.

Don't remove or alter the code credits from the CSS and HTML.

If you just want to change the colors, they're in a separate section toward the bottom and labeled so you don't need to dig through the rest of the code to find it. The character image line is down there as well.

[codenewbies]

CSS Custom Tabs Design

[divinector]

Tab Design with HTML, CSS, and JavaScript

[sillimancer]

aw man I found a neocities website that looks real cool I want my neocities website to look like that

[pyreflydust]

Begging people to at least click articles and glance at them before reblogging in a panic. The thing Lee pointed out is said fairly early in the article! You didn't even have to read the whole thing to see it!

Does Libreoffice even have a Notepad equivilant? Its entire purpose is to be lightweight and simple (which is why I cannot fathom anyone NEEDING ai features for it) and it's not the same as a word processor.

[retrcmoon]

CONSTANZA - BLOG & PAGE THEME !!!

These themes are completely free. Please support me and my work by liking and reblogging this post!

  [ GENERAL GUIDELINES ]

Do not claim as your own.

Do not remove the credit!

Do not use as a base code or take parts of this code for your theme.

Feel free to edit as much as you want!

All credits are mentioned in the codes!

[ BLOG THEME INFORMATION ]

Non-Contained Theme with the option of 400px, 450px, 500px and 540px posts.

Custom Body Fonts and Body Font sizes.

Custom Body Fonts and Body Font sizes (11px - 14px)

Navigation changeable from sidebar to header navigation

Up to 3 custom sidebar/header links

Navigation Tab is optional.

5 extra links in the navigation tab.

Visible Source link!

Fully supports NPF (beta editor) posts (but also works with legacy posts still)

The theme adjusts to different screen sizes.

MANY different design options. Everything can be edited in the design panel. No HTML knowledge necessary.

BLOG THEME - STATIC PREVIEW AND CODE

[ PAGE THEME INFORMATION ]

This code is JAVASCRIPT FREE!!!!!!!!

Adjusts to different screen sizes automatically.

Custom links on the welcome page.

Ask Page, Rules Page, Multimuse Page

Comes with a "pseudo" filtering/category system for the muse page which is also easy to remove.

All colors are easily editable in the css root!

Basic HTML knowledge necessary when editing the page.

PAGE THEME - PREVIEW AND CODE

[ao3scrapesearch]

Hiya! I know it's been a little while but I just wanted to let you know I finally got around to making the web version of that fic poisoning tool I made about a month ago. It's at https://tricksofloki.github.io/ficpoison.html if you're interested :)

OHOHOHO!

Alright, I gave this a little test on my own fic over here. Quick little review/notes for anyone interested! (But the tl;dr is that I approve based on my initial review of the original code and based on using this web tool to automate running the code.)

This version is super easy to use. I'll be honest; I was struggling trying to figure out how to run the code locally before because that is not a coding language I personally use, and this website takes out all of the hard part of doing that. You need to do the one time task of creating a work skin to enable the "poison" CSS used, and you need to make sure that work skin is enabled for any work you're going to use this on. The code to put into your work skin is available at the link. If you already have a work skin you use, you can just add this class to it. (I think the tutorial I linked to does a good job walking you through how, but I'm open to doing a tutorial on this blog if anyone wants that.)

If you're poisoning an existing fic, first have a backup copy. Once you poison it, that copy is going to be annoying to UN-poison if you ever want to, so you should keep a private copy on your PC or phone or wherever so you have the unpoisoned version available. Once you do this, your copy on AO3 is poisoned, and it would take a fair amount of effort to unpoison as the author. Upside: as the author, you can see all the CSS stuff in the background, so if you really need to unpoison a copy as the author with full access to it, it's not impossible. Just really annoying.

For reference, here's what I can see as the author with access to the edit page:

I can clearly see where the poison is if I really wanted to go back through and unpoison.

And here is what I can see in a copy scraped with nyuuzyou's code:

You can definitely see it's messed up by looking, but you don't see an active callout to where exactly the poison code is. Keep in mind that not every scraper uses the same code as nyuuzyou, and more sophisticated code may pull something more sophisticated than the plain text from nyuuzyou's tool. Other scrapers may be pulling fics with the formatting and everything, and I don't know exactly what that output looks like. Depending on what their output is, if they can see the class for the poison, they can pretty easily code something to remove it. That's me being overly conservative, I suspect. I haven't heard of any scrapers who have bothered with anything more than plain text, and this isn't an issue unless they're grabbing the full HTML. (Translation: From what I know, this is NOT an issue. Yet. So this is not a weakness of the poison tool. Yet.)

Based on the output, anyone who's doing a half decent job of cleaning up the data they scrape would toss my fic out of the dataset. It's full of what look like typos because the poison got placed mid-word, so it looks like I just suck at writing. If your goal is to get tossed out of the dataset, this is perfect. If a scraper isn't paying attention at all, you can contribute some really terrible training data if they leave your fic in the set because your poisoned fic is going to be full or words that don't even exist thanks to the word placement.

As far as using the tool, I used an existing fic. I went into the edit page for the chapter, scrolled to the bottom and left the text editor on the default HTML mode. I copied everything in that box. (Easy method: click into the box where you can type out the fic, and press "Ctrl" and "A" to select all, then "Ctrl" and "C" to copy.) I went to the tab with all-hail-trash-prince's tool, and I pasted it into the box on the left.

I clicked "Apply poison" and the poisoned fic appeared in the right box. I copied the poisoned fic from the right box, went back to my fic on AO3 with my custom work skin already enabled, and I pasted the poison fic in place of the original fic. I clicked the preview button to make sure it would look normal, and it did. So I clicked to update the chapter with the poison block included.

I loaded the chapter with the default Microsoft screen reader turned on, and it didn't read any of the poison data, only the real fic that is visible on the screen, so success there.

So that brings us to applying this to a brand new fic. For those, you're going to go through the motions of posting a fic as usual, but instead of clicking post when you're done, you're going to swap that text editing mode over to HTML and copy everything in there. Take it to the poison tool, paste it in, and grab your poisoned copy. Go back to AO3, make sure your poison work skin is enabled, and then replace the original fic with the poison fic, making sure to stay in the HTML editing mode while you do.

(Sneaky quick edit after posting: sometimes the tool leaves you with a dangling <p> or </p> or <em>. Make sure you always preview the chapter after poisoning it, and you can go back in to the rich text editor to delete any of the floating tags that were accidentally put in by the poison.)

The last downside I notice is that your word count is immediately wrong. My 34k fic looks like a 43k fic after poisoning the first 16k words. Technically, you don't have to tell people the true word count of your fic but like. That feels a little rude to the reader, so I think it would be kind to briefly put the true word count either at the bottom of your summary or in your first author's note.

To me, the downsides of having to create a custom work skin (that trash-prince has kindly already written for everyone) and having the wrong word count displayed... are nothing. In comparison to having my fic be easy to scrape, I'll take those slight downsides any day. From what I know of the current scraping landscape, this is a reasonably effective way to make your fic useless to anyone who scrapes it because people are out there that will be scraping AO3 again.

I'm curious to hear anyone else's thoughts if they check this tool out or try it for themselves, so don't be shy! I'm one person, so maybe I can't catch everything. If you're seeing something that I'm not, I want to hear about it.

And if anyone wants a more visual step by step, you are welcome to yell my way. If this text post is clear enough for everyone, I won't bother, but if a more visual walkthrough will help anyone, then I'm happy to do it!

EDIT: Just tossing in a summary of feedback I've seen from others below!

The tool is pulling from a list of most popular English words, which means it may add inappropriate verbiage to G-rated fics. See this ask for info. trash-prince has made adjustments based on the initial words spotted, but please kindly report any other concerning poison words you find, particularly slurs and other wording that cannot be interpreted in a SFW way.

[laika290]

ever wonder why spotify/discord/teams desktop apps kind of suck?

i don't do a lot of long form posts but. I realized that so many people aren't aware that a lot of the enshittification of using computers in the past decade or so has a lot to do with embedded webapps becoming so frequently used instead of creating native programs. and boy do i have some thoughts about this.

for those who are not blessed/cursed with computers knowledge Basically most (graphical) programs used to be native programs (ever since we started widely using a graphical interface instead of just a text-based terminal). these are apps that feel like when you open up the settings on your computer, and one of the factors that make windows and mac programs look different (bc they use a different design language!) this was the standard for a long long time - your emails were served to you in a special email application like thunderbird or outlook, your documents were processed in something like microsoft word (again. On your own computer!). same goes for calendars, calculators, spreadsheets, and a whole bunch more - crucially, your computer didn't depend on the internet to do basic things, but being connected to the web was very much an appreciated luxury!

that leads us to the eventual rise of webapps that we are all so painfully familiar with today - gmail dot com/outlook, google docs, google/microsoft calendar, and so on. as html/css/js technology grew beyond just displaying text images and such, it became clear that it could be a lot more convenient to just run programs on some server somewhere, and serve the front end on a web interface for anyone to use. this is really very convenient!!!! it Also means a huge concentration of power (notice how suddenly google is one company providing you the SERVICE) - you're renting instead of owning. which means google is your landlord - the services you use every day are first and foremost means of hitting the year over year profit quota. its a pretty sweet deal to have a free email account in exchange for ads! email accounts used to be paid (simply because the provider had to store your emails somewhere. which takes up storage space which is physical hard drives), but now the standard as of hotmail/yahoo/gmail is to just provide a free service and shove ads in as much as you need to.

webapps can do a lot of things, but they didn't immediately replace software like skype or code editors or music players - software that requires more heavy system interaction or snappy audio/visual responses. in 2013, the electron framework came out - a way of packaging up a bundle of html/css/js into a neat little crossplatform application that could be downloaded and run like any other native application. there were significant upsides to this - web developers could suddenly use their webapp skills to build desktop applications that ran on any computer as long as it could support chrome*! the first applications to be built on electron were the late code editor atom (rest in peace), but soon a whole lot of companies took note! some notable contemporary applications that use electron, or a similar webapp-embedded-in-a-little-chrome as a base are:

microsoft teams

notion

vscode

discord

spotify

anyone! who has paid even a little bit of attention to their computer - especially when using older/budget computers - know just how much having chrome open can slow down your computer (firefox as well to a lesser extent. because its just built better <3)

whenever you have one of these programs open on your computer, it's running in a one-tab chrome browser. there is a whole extra chrome open just to run your discord. if you have discord, spotify, and notion open all at once, along with chrome itself, that's four chromes. needless to say, this uses a LOT of resources to deliver applications that are often much less polished and less integrated with the rest of the operating system. it also means that if you have no internet connection, sometimes the apps straight up do not work, since much of them rely heavily on being connected to their servers, where the heavy lifting is done.

taking this idea to the very furthest is the concept of chromebooks - dinky little laptops that were created to only run a web browser and webapps - simply a vessel to access the google dot com mothership. they have gotten better at running offline android/linux applications, but often the $200 chromebooks that are bought in bulk have almost no processing power of their own - why would you even need it? you have everything you could possibly need in the warm embrace of google!

all in all the average person in the modern age, using computers in the mainstream way, owns very little of their means of computing.

i started this post as a rant about the electron/webapp framework because i think that it sucks and it displaces proper programs. and now ive swiveled into getting pissed off at software services which is in honestly the core issue. and i think things can be better!!!!!!!!!!! but to think about better computing culture one has to imagine living outside of capitalism.

i'm not the one to try to explain permacomputing specifically because there's already wonderful literature ^ but if anything here interested you, read this!!!!!!!!!! there is a beautiful world where computers live for decades and do less but do it well. and you just own it. come frolic with me Okay ? :]

*when i say chrome i technically mean chromium. but functionally it's same thing

[aspectpriority]

i dunno. it's nice in a lot of ways, but its janky in a lot of other ways, and like- the layout leaves a lot to be desired i'm finding. Chewing glass about it tbh

hm. I know i spent like a week on it. and i'm not really in a state to revisit it. but i kind of hate our toyhouse theme a little bit lmao. goddamn it

[codingflicks]

Pure HTML CSS Tabs Design

[fannedandflawless]

Finally resurrected this from the dead after accidentally closing the HTML/CSS tab mid-edit. 🥹 It lives. Just like the emotional trauma he left behind.

[stripitdown-coding]

Identification

Code

Alternate version for non-rendered image(image with background)

Don't remove or alter the code credits from the CSS and HTML.

Images are not included.

If you just want to change the colors, they're in a separate section toward the bottom and labeled so you don't need to dig through the rest of the code to find it. The section to change the images is at the bottom as well.

[amphibianauthor]

Ao3 HTML/Coding Resources Part II

This is the HTML/Coding for Website mimicking resources in Archive of our Own (Ao3). To find Part I where I go over the Basics, General Text HTML and some Fancy Formatting (images, dividers, columns, photos, tabs etc. CLICK HERE!

Other Websites:

Texting

-How to make iOS Text Messages on Ao3 by CodenameCarrot, La_Temperanza

-A Quick Generator for Embeddable iOS Text Messages by 221b_ee

-imessage Skin by Adzaema

-Retro imessage by Adzaema

-Basic Text Message Work Skin by ProfessorMotz

- Bubble platform [workskin] by Khashana

-Chat Log HTML by deathbymistletoe

-LINE Messenger/Chat by imperiousmarshmellow

-IDOLish Rabbit Chat Workskin by associate

-Replika workskin by FaeriMagic

-Texting Workskin to match light/dark mode by irrationalpie

Tumblr

-Tumblr style CSS Tweaks by Aposiopesis

-Ao3 Workskin Testing and Tutorials by junietuesday25 tumblr DM

-How to make Tumblr Posts on Ao3 by phyyripo

-Plain Text Social Media Platforms by anubisms

-Tumblr Post Work Skin by tsukinosaugi

Twitter

-Repository - Twitter by gadaursan

- How to mimic Social Media in an Ao3 work by aerynevenstar

-Twitter Work Skin Template by etc e tal

-Twitter Workskin: Tweets and Profile by starskin

-Twitter Mock-Up by TheBrookesNook

Ao3/Fandom

-How to mimic Authors notes and Kudos/Comment Buttons by La_Temperanza

-How to mimic AO3 Comments by bittermoons

-How to add mobile Ao3 in your fic by DemigodofAgni

-How to make a fanfic style header Ao3 style by ElectricAlice

-Template for adding post chapter content by SpookyTesting

-CSS based full Ao3 fic integration (Header/Overview, Comments, Title, Summary & Buttons) by deciMae

-How to Mimic LiveJournal Posts and Comments by cursedcuriosities

-Dreamwidth Entries & Comments Work Skin  by folk_melody 

Facebook/Instagram/Whatsapp

-Whatsapp Group Chat builder by FestiveFerret

-How to make Facebook Messenger Chat on Ao3 by ran_a_dom

-Whatsapp Work Skin Template Revamped by etc e tal

-Whatsapp group chat skin by ovely

-Instagram DMs for Ao3 by monarch_rhapsodies

-How to make Instagram DM mockup by xslytherclawx

-Penstagram chats on ao3 by deciMae

Snapchat

-Snapchat skin by Azdaema

-Snapchat Template for Ao3 by starskin

Reddit/Forum

-UPDATED Reddit Skin by diamine

-2020 Reddit Work Skin by timstokerlovebot

-Reddit Work Skin CSS & HTML by knave_of_swords

-How to mimic Social Media in an Ao3 work by aerynevenstar

-template Reddit Skin by spookedcroon

-template:Subreddit page by ireseen

-Ao3 workskin for Forum Thread by fencesit

-Ao3 workskin for Forum Thread [Expansion Pack] by AMereDream

-How to mimic 4chan posts without just taking screenshots of 4chan

Twitch/Youtube

-Mimicking Twitch Chat for fics by Ultraviollett

-Twitch Chat Work Skin by cherrari

-Workskin testing by tohmas [Youtube comments]

-Youtube Work Skin by 1864s

-Youtube Comment Section Workskin by LupaMoe

Discord/Slack/Zoom

-2023 Discord Theme Workskin by TrojanTeapot

-Discord Work Skin by unpredictableArtist

-Discord (Dark Theme) Workskin by Heterochromia_Mars

-Skin for Recreating Discord’s Server Member List by SpookyTesting

-Ao3 Workskin Testing and Tutorials by junietuesday25

-Slack Workskin by Khashana

-Zoom inspired Ao3 skin by mystyrust

Wikipedia 

-Fake Wikipedia article about a TV show: Work Skin by Anonymous 

-Wikipedia article work skin by styletests

-SCP Wiki Style Workskin by thesnager

Working Games in Ao3 Tutorials

Logic Grid Puzzle Work Skin & Tutorial by BookKeep

The Case Of The Clickable Murdle by VThinksOn

Review Sites:

Yelp Reviews by kiwiana

Amazon Reviews by kiwiana

Rate My Professor Work Skin by BookKeep

Video Game Dialog Mimics

-Dialog [workskin] by Clover_Zero

-Dialogue Workskin (with parallax BG effect) by mystyrust

-My S Ranks--System Windows by unpredictableArtist [computer dialog workskin]

-Tutorial: Ace Attorney Work Skin by QuailFence

-Among Us Ao3 skin by mystyrust

-How to Mimic Undertale Fonts on Ao3 by La_Temperanza

-Tutorial:Rain Code Work Skin by faish

-Balder's Gate 3 Documents Work Skin by Professor_Rye

-SpookyTesting has SOO many Nintendo based ones

–Mimicking Minecraft for some fics by Ultraviollett 

Runescape Right Click Menu Formatting by fennfics

How to put Z skits in your Tales fics by wingedcatgirl

How to make Honkai: Star Rail Messages by html_hell (jihnari)

Hold-hands inspired Texting skin by cursedcuriocities(SetsuntaMew)

Simple Linkshell Ao3 Work Skin by Pent – Final Fantasy XIV mimic

Homestuck Chat Clients by 77angel-skins

Workskin: Slay the Princess by ASpooky

Slay the Princess: Updated Workskin by Lilto

Misc. Sites

--How to mimic Deadpool Thinking boxes by La_Temperanza

--FetLife Skin [Work Skin] by Khashana

--Disco Elysium workskin by SarunoHadaki

--StarTrek PADD workskin by duskyspirit

--MDZS-themed letters by allollipoppins

--A Newbie's Guide to Podficcing by Adzaema [skin for podfics]

--Skin for making Character Intro Cards by SpookyTesting

--Kpop Photocards by legonerd

–OVR System Workskin by unpredictableArtist

-How to make Stylized CSS Card Links for your fics by buttertartz

-vroom vroom kachow: Formula1 Race Results Workskin by mackerel_cheese

Bonus: Ever wanted to see how crazy HTML can be on AO3? Try playing But can it run Doom? or Tropémon by gifbot

Happy Creating!

Last updated: Feb 8 2025 (Have a resource that you want to share? My inbox is open!)

View Part I with HTML Basics HERE!

[divinector]

Custom Tabs Design Join Telegram