#javascript tabs

[divinector]

Custom Tabs Design Join Telegram

[purgingmarch]

i had a fun idea for a monster prom shrine on my neocities but that would require me to actually put effort into learning javascript. i suffer for what. girlish whimsy

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

[track-maniac]

I finally made my first pull request to an open-source project. It hasn't been reviewed yet so I don't know if it will be accepted but either way I'm really happy to finally have done it. It's just a small feature on a fork of a browser extension, but I'll work my way up from there. Maybe one day I'll be able to contribute something to KDE.

I love the feeling that when I want something to be different in a program, I can actually do it, and then share it with everyone.

If it actually goes through I think I'm going to love open-source even more and start being borderline annoying about it. I actually feel great right now.

[1ore]

Gently holding your hand like a sad dog begging you to draw more basedt I love your comics I am perishing I am not a desert creature I am subtropical I need to consume more comics to survive. I am perishing in a comic-less environment!!

(clenching fists) today's page... i'll do it... i'll do it for you...!!!

[m0n0lithical]

Been sorting out a new theme that is less of a cramped-ass mess to try and read. The mobile nav post will get updated as I start to get things reorganized.

Gonna make a temp page that leads to all the old page links while I rehaul, just because I know I'm bothered when links break/information is lost, even seemingly irrelevant ones, so I try to refrain from doing it even when all the shit there is a MESS/just straight up not correct anymore.

[valaratminaforaldrar]

i need someone to pluck my kas tristan character page concept out of my head because if i start making it it'll take the rest of my life like actually

[pneuma-themes]

Primavera: All in One Page #01 by @pneuma-themes

Always, it's spring, and everyone's in love, and the flowers pick themselves.

Live Preview / Get the code: [Pastebin] / [Github]

Another Twitter inspired layout. This is an all-in-one page with about, blogroll, tags, and FAQ sections. The code has been heavily annotated, so please go through the code first before sending me an ask!

Important note: Your blog must have been given permission to use Javascript on pages. As of 2024, the waiting time is almost indefinite, and thus might necessitate a circumvention. You can refer to the post I linked to find the how-to.

For the blogroll to display the list of blogs you follow, you must enable this option on the blog setting:

This will not work on secondary blogs, as they do not have that option on their settings.

Features:

Five custom links

Everything is customizable, from the icons to the content and the colors. Customizable options can be found on the :root section of the CSS.

A built-in light-on/off mode that can be toggled by one click.

A header image. The size of your header image is 60% of your screen width x. 250px. The image should resize automatically.

An endless space for practically every section. You can be as detailed or as concise as you like.

Sticky navigation tabs.

A short "currently" tab in the about section, can be about anything you like.

This is a page theme, so blog posts will not be displayed. Please install this through the Add new page link instead.

Credits:

Icons: @alydae

Header: @tofuvi

Fonts: Merriweather, Albert Sans @ bunny.net

Font icons: Dencar Icons (ported by @glenthemes)

CSS tabs: bulma.css, functionality adapted from this StackOverflow post.

Tooltips: tippy.js

Please like and reblog if you like or are using this!

[pouthongwon]

jaehuin: a character page with modals and tabs by pouthongwon

preview / code

features - dark/light mode. just press on the toggle to switch between them - four standard links (home, ask, archive, and dashboard), plus five custom links in an extra sidebar - a modal for each character with three tabs containing a character's biography, relationships, and works they're in

note: there are comments in the code with instructions on how to enable javascript. alongside my usual credits.

[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

[divinector]

Join Telegram

Tab Design with HTML, CSS, and JavaScript

[lunachats]

the cookie consent thing is ok i guess but what we really need is to regulate the amount of RAM a website can request from a browser tab. elected officials need to start taking about being "tough on javascript bloat" imo. this could be a political movement that exists in real life

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

[boringkate]

Sometimes I just want a place to paste some plain text or to type something ephemeral without opening notepad and the random "this javascript script will count how many characters is in your text" page that I had been using for that shut down, so I made this page to use in place of it.

It's literally just a big textarea. No clutter. No bloat. It doesn't do anything. Your browser might automatically/temporarily save what you put into it (I genuinely don't know what the rules for that are and I'm always surprised when I close a tab only to find my text still there upon reopening it), but the site doesn't save anything, so don't use it for anything important. Enjoy.

[lanayrucodes]

Immortales: Skin Bundle ($20)

I've been wanting to branch out into a more minimalist style for a while, and found the opportunity to do so when I was struck by the coding bug over the weekend and began to experiment with a more semi-transparent style of index that eventually evolved into this. I tried to keep the skin as light as physically possible, with minimal Javascript or Jquery inclusions, and instead tried to optimize it to build off of HTML5 elements as best I could without needing to weigh it down with more external resources.

The Immortales skin is a dark themed, responsive skin for Jcink forums, and is optimized for Google Chrome. (Cross-tested in Opera GX and Mozilla Firefox.)

You can purchase the skin here: https://ko-fi[DOT]com/s/6f663cfe6e

Bundle Includes:

All custom HTML structures

a forum index a topic row for threads a post row with a sticky/hover mini profile a main profile custom board stats, with the five (5) recent topics appended a member list, sortable by filters

Full set of DOHTML templates

x1 general announcement/admin template x1 application template (tabbed, for threads) x4 thread templates x5 development templates x1 miscellaneous codes for TW/CW x1 tabbed webpage/guidebook

Custom Userlinks Menu

Easy to add/modify group variables for color coordination (five groups already included)

Responsive to smaller monitors

Upon purchase, buyers will receive an installation guide with editing and customization instructions, as well as any XML/HTML files.

Support & Refunds:

Refunds or returns are not offered on pre-made skins. Due to the nature of how they're distributed and the fact that they're digital files I cannot offer refunds for a purchase if you buy a skin from me.

If you encounter bugs or skin-breaking issues, please reach out to me and I will do my best to fix them and provide you with updated files.

I do not offer coding support beyond initial problems with my skins at install. (i.e. Finding a bug when you install a fresh copy of the skin onto your site, etc.) If the skin breaks during modifications you make on your own, I am willing to help restore the skin to it's original state. I do not provide support for third party coding that is not mine.

[darkfictionjude]

Hi, how do you do?

This is somewhat of a follow-up from the romance system ask. I ended up deciding to do something similar to what you are going to do with EC: Having two flirt options, the opposite of each other, but specific to each RO. It just works so well I had to copy that idea. I had considered something like that at one point, but I thought it was too much effort. Then I realized that the contrary was true. It's less effort, because now I don't have to force myself into binaries that do not work for the RO's.

For example, one my RO's simply wouldn't be with an MC who is antagonistic. So, instead, I went for a dichotomy between Oblivious and Assertive. So either the MC basically has feelings for the RO, but doesn't realize. Or actively pursues something more than the relationship they currently have.

That doesn't sound like much, but that's because I'm lacking context. It sounds better with it. Sigh.

Well, besides that, I got to another stopping point. I have been messing with the code, and realized I wanted to use icons to show when an option was meant to be romantic, or special in some kind.

And that meant going to search for tutorials about how to do that. I found some... Then I always felt I was missing a step or something, because I simply couldn't figure out how to do it.

The only thing I understood was that many used FontAwesome to get the icons. Then they either used the Stylesheet, the Javascript or both. They used a link, but I could never find a link that worked for me. I know you can link fonts (which I did before), so I know you can link things of that sort.

So, I ask you, darling author: How did you add icons on your projects? I know WWC has them (I even checked, even though I was sure you used them there). So, it seems reasonable to assume you know how to do it. Or at least a way to do it.

Maybe I'm overcomplacating myself, which wouldn't be the first time. But it can be a useful question, even if it ends up being basic or easy.

Thank you in advance for your help.

Have a nice day!

Honestly? I just use the icons for google docs

I go on the tab that says insert, then special characters and select from there. After I just copy and paste haha

I’ve gone a crazy with it for OYHS but damn I really think the icons I chose for that game go with the vibe