#html css tabs

[codingflicks]

HTML CSS Tabs

[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.

[divinector]

Tab Design with HTML, CSS, and JavaScript

[codenewbies]

CSS Custom Tabs Design

[wachi-delectrico]

finished fixing my theme go look at it it's so nicey....

[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

[kaiasky]

Complete-ish Guide To Settings You Might Want to Change

These instructions will be for desktop, because the settings are easier to find there. You can do the same on mobile, but it might be in different places.

Dash settings

Your dashboard is broken down into several feeds, including "Following" and "For You".

"Following" is primarily the posts of people you follow, "For You" is algorithmic.

If you just joined, "For You" is default, if you're a longtime user it's "Following". You can change this in the settings on the right

A lot of longtime users will tell you that the Following feed is where we spend most of our time. But try out all the feeds, and see what you like most.

The settings that are settings:

To start, click the settings gear under the account icon (the abstract person head).

This should take you to the General tab. Key settings:

Community Labels: By default anything NSFW is silently hidden. You can change how each subtype is handled.

Hide Additional Mature Content: If you have an iPhone disable this or it'll hide every post from you on the off-chance it contains porn.

If you're under 18 as determined by the birthdate you entered on signup, you can't change these. (If you want them on, you'll have to make a new account and lie)

Under the "Dashboard" tab, you can enable timestamps, which is mostly just nice information to have. sometimes a post is from 2010 and you can be like wow.

The next four probably have the biggest impact on your tumblr experience, so I'm gonna do a breakdown.

Best Stuff First reorders your "Following" to have popular posts at the top. Disabling it makes your feed chronological. I like it off, but up to you.

Include Stuff In Your Orbit and Based On Your Likes put various content from "For You" into "Following". Personally, I disable them to keep "Following" purely posts by people I follow, and then switch between feeds to get what I want.

Followed Tag Posts will put content from the "Your Tags" feed into your "Following" feed. Since you can go to the separate tags feed, I usually turn this off (it tends to show me a lot of duplicate posts), but up to you.

Under the "Notifications" tab you can tell Tumblr to stop sending you emails.

I'd recommend disabling all the emails--if you get a bunch of replies, Tumblr will happily send you dozens of emails, and you don't need that.

Notifications is the push-notifications in-app/in-website. The mobile app, for some reason, has a much better interface for controlling these, including the option to only get activity-notifications for mutuals. You can leave these on, or turn them off if you find the flood of notifications is distracting.

Tumblr News is a newsletter, it usually just has content from @fandom and the other staff-run recap blogs.

Conversational notifications sends you more emails.

Under the "Tumblr Labs" tab you can enable a bunch of cool beta tests.

I particularly suggest Reblog Graphs, What you Missed tab, & Popular Reblogs tab, but they're all fun to try out. A lot of these are honestly better than the For You dashboard.

For each blog you have, you can customize it's Blog Settings. Beyond things like setting an avatar or description, there's a few settings that are fun.

Custom Theme gives you your own subdomain at [blogurl].tumblr.com.

This makes your blog easier to search, and a lot of 3rd party tools depend on you enabling it. It also makes it easier to link your posts to people who don't have tumblr accounts.

You can completely customize the CSS/HTML/Javascript. you can go legitimately crazy. It's not a requirement, but if you want unlimited flexibility, go wild.

On the contrary, if you wanna run a more private blog, you can disable this and then hide your blog from search results/non-registered users.

Likes and Following are public by default. I like to turn these off so I don't have to worry about like, "what will people think if they see i'm following [...] or liking [...]". But it's also fair to keep them public if you'd like.

The other Blog Settings are important but pretty self-explanatory I think.

Finally, there's some useful tools I like:

XKit Rewritten - A bunch of scripts (like RES for Reddit). The one I really like is "mutual checker", which shows at a glance which blogs you are in mutuals with. Which is such a good feature it's included in the mobile apps by default i think.

siikr.tumblr.com - Tumblr search is bad, and google's indexing of tumblr blogs is worse. Siikr will find any post you've made on your blog. Because disk space is limited, only use it to search your blog, and if you're tech savvy consider running a local copy from source.

[reelmegabyte]

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

[smiggles]

Do you want toyhouse codes? Free ones here. Just delete the ones you take. Feel free to add any you have Link

What is toyhouse??? Long post under the cut

TH is a site that lets you store your characters and their artwork as well as any literature you have about them. You can use HTML (and if you pay for premium, which is 20 ish bucks for a year) you can use CSS as well as upload multiple images at once (and a few other things)

You can sort your characters images into different types of tabs Ones that allow you to have references, different forms, outfits, et cetera separated if you want. You can have completely different tabs that you click to show you another gallery (I use this for non canon art)

You can create "worlds" Many people use this for running species but you can also use it to flesh out your OC headworld. In a world you can make bulletins, forums for people to interact or roleplay, other people can submit their ocs to your world if you allow that

Bulletins and forum posts can be coded to include images, links, et cetera. Pretty much if you can do it with HTML you got it. If you enable it people can comment on your character, which makes it easy to sell adoptables there as well, with a tagging system! There is a public forum on toyhouse where people can sell their adopts, roleplay, share their species, get HTML help or share/find free HTML premade profiles to use! Generally, theres so much you can do there and its free! Just grab a code and go

[louroth]

Well, well, well. Would you look at what the cat dragged in. (it's me, Lou!)

The time is here, and oh man, do I have a lot to say! Ever since this post was posted on my personal tumblr, on the fifth of may, I have been working like a machine on all things OUROBOROS. I had originally planned for this to just be a progress report/ announcement on what I will be working on now that I am free of the shackles of work, but, somehow, I managed to finish all bullet points, and more. So, let's get into it!

First off, the title.  Ouroboros becomes all capitalized OUROBOROS. Idk. It's neat. Next!

Art. Whew. I didn't think I could draw like this anymore- drawing has been more of a struggle than writing has been, forever, always- it was something I really strived to become good at, for a time. And I gave up. Only to pick it up again when I started ouro, and ever since I released that pressure, something just clicked and I have been churning out art like never before. I don't know if this is a fluke, a stroke of luck or if all that hard work I once did slaving away with menial art practice… but I'm grateful nonetheless. (A note on official RO art: I lost my ipad pencil somewhere on the lawn, lmao. I haven't been able to get a new one yet, so there is a slight delay here.) I am hoping that I get to make some commissions too, in the near future. Visit the forum to see some works in progress (amongst them, Yor's RO portrait!)

Onto the hellscape that is coding! I have been growing more proficient with CSS and html with the help of the ones that run so that we can walk; I have studied and researched and tested and tinkered until my eyes crossed, finding my way into this medium with the incredible guidance of the giants of whose shoulders I stand on. I will talk about this in detail on a later date. So I think it's finally time to reveal that yes, I am working on a twine version of ouro. I will develop it in tandem with choicescript; the porting over from one to the other isn't the herculean task I thought it would be.

Why am I doing this? Because I need to have a save system. I am continuing to write the whole alpha draft in choicescript in hopes that CoG will announce the ability to have a native save/checkpoint system, but if that doesn’t happen, I can’t publish this story without one. Unfortunately, I am not willing to code in a savesystem in choicescript myself, because this will be a large game, with far too many variables for that to be sustainable. Trust me, no one is more disappointed by that fact than me. If it comes to the point that twine publishing will be what I do, I will set my sights on writing a smaller game for hosted games. 

Now the meatier announcements!

New Socials!

Tumblr: You are looking at it!  This is the new, exclusively OUROBOROS blog where I will share all announcements and sneak-peeks, and future updates. I worked together with the dev of the theme and made it oh, so pretty and functional. Please check out their portfolio here, if you are ever in the market for sprucing up your (desktop version) of tumblr. They were a pleasure to work with. Amongst other things, it has a gorgeous header (again, only if you visit on web and not mobile) where I am showcasing fanart and official art. Go check it out! This month, I am showcasing a truly breathtaking art from KAIRELART, and you can find the full art here, or follow the links in the “FEATURED ARTIST” tab in the top bar.

I hope you enjoy this new haven for OUROBOROS! I will be answering questions once a week (saturday) and ramping up as I adapt to this new schedule, more on that further below.

My old tumblr, honeypeabrain, will revert back to being my personal blog. Feel free to keep following me there, but know that it will be inundated with shitposts, crass humor and the occasional poetry dump and personal post. You’ve been warned!

Discord!

By the good graces, this was ROUGH to set up. Working with discord bots is akin to wrangling code, and it was well and truly, a war. But with the help of many, it is finally all done and ready for anyone to join and talk to me and others about OUROBOROS and anything else between heaven and earth. 

I will also greatly appreciate if any future bugs and feedback are submitted through here, so I can keep easier track of it. Come join us! (18+ ONLY.)

Patreon & Ko-Fi

Yep! Ko-fi is just a place to toss me a coin if you wish to help me towards the goal of new PC parts to make testing easier, or to just show appreciation for those that have it to spare. Patreon however, already has a multitude of posts and will be a hub for exclusive NSFW sidestories that you get to vote on, loredives and extensive sneak peeks, Q&A’s, polls and weekly dev logs. 

Right now, there are only two tiers, but I expect it to grow as my story does. I have many plans, but I am going at a steady pace. 

Amongst tiered content, there is a (free) NSFW story with female MC and Idren to read there right now, if you want to check it out! I am mgoing to post it on tumblr and the adult thread here over the weekend.

NOTE: I stupidly didn't realize that patreon had a review process after I pressed launch, which I did just a few minutes ago. Sigh. I am going to post the short on tumblr and the adult forum thread as soon as I get to it.

It is not mandatory by any means, so if you do choose to support me, you have my eternal gratitude as these places will be the sole source of income for me.

Onto writing:

The best news out of this whole bunch is that I have worked so hard on editing and writing, that in the past month I have all but finished a two chapter update! I have a chunk of about 5-6 thousand words left to write, and I am going to buckle down over the weekend to see it through. I wanted to have it done so badly for today, but I lost three days of writing time last week due to still being weighed down with work. I hope it isn’t too disappointing to have to wait until monday for the demo update! I am going to post a link to an as-I-write updated demo on Patreon and Discord, if you want to see the ugly face of raw wip drafts. Otherwise I will post the demo update here on Monday with a comprehensive post!

And now!  the biggest news is… from now on, I am writing full time!

This is what I have been tossing and turning about every night ever since Easter. It started as a silly idea while talking to some friends and family about how I was looking for a change in career. And then, little by little, that idea whittled down to a plan, carefully carved by my partner and his whispers of a happy future, a finished dream project, and something to be proud of until the day I wither and die. 

Somewhere between then and now, I grasped a tiny sliver of bravery and held on for dear life. 

I quit my job as a teacher, and instead of accepting a cushy office job, I started behaving as if OUROBOROS and writing was my work (for all the moments I could afford). I have researched and tried different methods from week to week, and although I was still tired from work, I felt like I was onto something that could build into a sustainable future. 

I have no doubts that this journey will be bumpy and long, but sometimes all it takes is to take that first step, and do it with determination. It might all crash and burn and fail in a spectacular way, or with a whimper, but then I will know that I have tried. I will know that I gave myself the chance to be who I want to be, work on what means so much to me. 

And that’s it. I think the hardest part of formulating this post (I’ve written about 50 versions of it!) is getting to the point; the kernel of what makes it so special to me. So, in my heart of hearts, what I'm trying to tell you is that I'm gonna give it my all- and while I know the road to having a sustainable career in writing is rough and ever winding, I do know for sure that I am ready for a challenge, to pour my heart and soul into it until the day I rush out of the office screaming IT IS DONE. IT IS DOOOOONE!!! 

If you decide to join me, I will treasure your company like a lantern in the dark. Hand in lovable hand, let’s fucking go.

[codingflicks]

Pure HTML CSS Tabs Design

[stripitdown-coding]

Code

  A simple to use code. Not as much room for editing it, but looks fine with little or a lot of text added in. Not the best use code for if you have a very lengthy story or bio you want to write-up in the profile, but it will still work. Includes a separate, highlighted section for your ooc. Designed for images that have a background. Just replace the existing background image on the front card.

[divinector]

Custom Tabs Design Join Telegram

[koncodes]

ATLAS OBSCURA (60$)

ATLAS OBSCURA is a fully flex skin optimized for Chrome but has been adjusted for compatibility across Firefox and Safari. A low contrast, dark background is recommended. A live preview can be requested at any time through my support discord. PURCHASE HERE: https://ko-fi[DOT]com/s/740013f3a4 WEBPAGES HERE: https://ko-fi[DOT]com/s/07654e42a0 TEMPLATES: https://ko-fi[DOT]com/s/020489ee5a

Includes:

light/dark toggle sidebar that auto transitions to a module for mobile custom forums, topics, memberlist, posts (optional larger post avatar with sticky) tabbed, popup application profile member group colors set up across the skin css variables set up for images, fonts, and colors for ease of editing guest to member links on login for easy navigation various indicators for messages/alerts customized tooltips tabbed header basic post template with all basic styles (bold, italics, h1 through h7, blockquote, hr, lists, etc)

Files:

full xml file html templates xml file easy to import field set json file general installation guide pdf skin specific instructions with member group prefix/suffix codes and user fields

Policies:

credit must remain intact and unchanged you may not claim my codes as your own at any point, nor may they be used as a base for other projects I offer unlimited support for bugs present at purchase

Please review the rest of my my policies prior to making any purchases: koncodes[DOT]tumblr.com/policies For questions or a live preview, you can contact me through ko-fi or my support discord: discord[DOT]gg/MXD5nDgDzq

[thatlethalsoul]

New Users: How to view a custom blog theme (on desktop)

Right click on a user's icon ➡ open link in a new tab or window or Right click on a user's icon ➡ Copy Link ➡ Paste into URL and hit enter

What does NOT allow you to view a custom blog theme

Copy link to post ➡ Paste into URL and hit enter Share post ➡ copy link ➡ Paste into URL and hit enter

Note: Links look different when you are about to view a post on the dashboard vs on the user's blog directly

https://www.tumblr .com/(USER NAME) = View post on dashboard https://(USER NAME).tumblr .com/ = View post directly on user blog

On desktop you can quickly find a user's blog by typing their tumblr name into the above template, including your own!

I don't have one of these! How do I make a custom blog?

Simple! You just need to meet a few account privacy parameters and you're ready to go!

Visit your account settings

Click on the blog you want to make a custom theme for

Scroll down and activate "Enable custom theme"

MAKE SURE YOUR BLOG IS NOT HIDDEN. - If your blog is "Hidden from people without an account" and/or "hidden from search results", you can edit your blog's code all you want but you will be unable to visit it on desktop. - If these visibility requirements are not met, your blog will only be accessible through the dashboard to all tumblr users.

Why do I need to know this?

You don't! But it's worth knowing for those that care.

HTML custom blogs have been a staple of the tumblr ecosphere since the beginning of the website. Many users (especially legacy users, artists, and roleplay blogs) put a lot of time, effort, and care into their custom blogs to either express their individuality and creativity, make their portfolios easier to navigate, or both!

Part of what makes tumblr, well, tumblr, is and always has been the ability to create a custom blog that expresses who you are. Tumblr's one of the last bastions of social media that allows for this form of creativity, and there's an entire market of prefab blog themes made by tumblr both for free and purchase, as well as a whole community of users that make their own code for tumblr blogs if you search for it either in the tumblr search or on a search engine.

You don't even have to know HTML or CSS in order to get started because of how many people already make custom blog codes, free to use! But if you want to learn how to do it yourself, you can use it as a playground to spread your wings. If your code doesn't work, tumblr users can always still access your blog through the dashboard anyway, so there's little to no risk involved!

TLDR; Tumblr is one of the only places left on the internet that allows you freedom of individuality, so express yourself! Join the thousands of other tumblr bloggers that already have their own custom themes, and take a look around to see what others have made!

[kitkatt0430]

Instead of doing a Six Sentence Sunday today, I think I'll do a short tutorial on copying over fanfic from FFnet to Ao3.

So you've got some old fics on FFnet and you'd like to back them up to Ao3, given the instability of FFnet. And for whatever reason you don't have the original files for the fics, or maybe you have edits to the FFnet versions that you don't want to lose that the OG files don't have. Whatever the reason, you're looking to directly copy over your fic from FFnet to Ao3. And you're looking for a relatively easy way to do so, but Ao3's import functionality doesn't work with FFnet web pages.

Never fear! It's actually a fairly easy process to get your fic copied over from FFnet.

First, head over to FFnet and open up the fic you want to port over to Ao3. You don't need to log in if you don't want to, just so long as the fic in question is yours and you can access the page, then you're good.

In a separate tab, open Ao3 and login, then choose the option for posting a new work.

Now back on the FFnet tab, you should be able to directly copy over the title, summary, fandom, and what little tagging was available on that site onto the relevant Ao3 fields in the tab you have for a new fic. You'll also want to take note of the published date on FFnet and back date the new work in the Ao3 tab.

FFnet may not have a lot of useful tag data, but it's pretty easy to replicate and build off that in Ao3.

Now for the hard part. Which is still pretty easy. Getting the fic body, plus any notes in the fic itself, copied over to FFnet.

While getting around FFnet's lockdown on the text of the fics they host is fairly simple - I'm pretty sure it's entirely css based - you don't really need to do that in order to get the body of your fic copied. And, honestly, even if you do have a work around in place to allow copying of the fic's text... you will probably find the following method a lot easier still.

In the body of the fic, right click the first line of the fic, which should bring up a menu with a bunch of options. On Firefox or Chrome you want the inspect option.

This'll bring up the dev tools with the html inspection tab open and, if you give it a few seconds to load, the specific line you right clicked to inspect should become the visibly selected section of the html.

The selected section of the html should be a paragraph (or <p>) element. You're going to want to right click the div (<div>) element that encapsulates that paragraph and the rest of the paragraphs in the fic body. This'll bring up another browser menu with the option to copy, which will bring up a flyout menu when you select it. From that flyout menu, you want the select the option for Inner HTML.

You have officially copied the html for the fic body. And you can dump that entirely in html format straight into Ao3's html work text editor. Then switch it to rich text for easier editing if you want to fix any spelling, grammar, formatting, or aesthetic issues. I typically try to fix at least the line breaks since it took a long while before FFnet adopted real line breaks and so there are a lot of fics where I have various combinations of dashes, em-dashes, equals signs, and other characters as line breaks. I figure, if I'm bringing the fic to Ao3 then I can try to make it more screen reader friendly in the process.

You can also move fic notes around in order to move pre/post fic notes out of the fic body or basically whatever you want to the fic. Maybe re-read it to determine any additional tagging you want to add now that your fic has access to Ao3's much more robust tagging system.

But that's it. You can hit post and have your fic with all it's original notes, and a back dated post date to reflect when it was actually written, all available on Ao3 now.

It's a pretty quick process, all told, and the only real bottleneck you might encounter is any time spent in re-editing the fic between migrating and posting. Even chaptered fics are fairly easy to migrate with this process, since the bulk of the work in publishing a new chapter is just copying the inner html and then moving any notes to the appropriate location before hitting post.

Anyway, for my fellow fic writers looking to move your old FFnet fics to a more stable archive, I hope this process helps a lot.