#button style css

[orcelito]

Working on my javascript for my web page. Turns out I have the perfect kind of setup to accomplish some of the project requirements, specifically with even handlers and user interactions

My website, conceptually, will load a different employee details page depending on what employee name is clicked on. But I need to load it dynamically (instead of hard-coding it) so that the user can add or delete employees & it'll be able to still load the relevant shit.

So! Only one employee details page, but depending on how it's loaded, it'll load a different employee's information. Still working on getting down Exactly how to do it (I'm thinking using URL parameters that'll read a different object depending on what ID is used)

It's entirely doable. In fact, it's probably extremely common to do in web pages. No one wants to hard-code information for every new object. Of course not. And thus the usefulness of dynamic javascript stuff.

I can do this. I can very much do this.

[citrusella-flugpucker]

((Things I said in the replies that I want to add as a caveat while reblogging this:

Your interaction in the new layout is almost definitely still being logged (as opposed to being considered the old dash) for analytics purposes (the A/B testing they’re doing to see how people interact with Tumblr differently with the new layout), so if you care about what they’re seeing in the analytics, note that they’ll probably still see it because there’s basically no way either XKit or a CSS style could do anything to touch that kind of logging. (EDIT: XKit probably CAN send information that causes an A/B test to disable (because apparently JS is capable of doing that under certain circumstances), but its settings probably DON'T here. CSS, on the other hand, is basically completely incapable of doing something like that though.)

The number of people in the reblogs and replies calling this a script are making me want to pull my hair out. It’s a user style, which uses CSS and is basically the web equivalent of rearranging furniture (special code that’s active all the time but doesn’t really “run”), rather than Javascript (what userscripts use, special code that usually only runs on page load (unless you do some funky stuff), the web equivalent of... IDK, running a Roomba?). It’s a semi-important distinction: Stylus cannot run JS user scripts (only user styles), and most user script extensions (TamperMonkey, ViolentMonkey, etc.) cannot natively run a CSS user style (AFAIK) without it being converted to a script that does nothing but implement the CSS code slightly differently.

The More You Know, and all that nonsense.))

i got the old tumblr dashboard back T_T

i got the old tumblr dashboard back T_T i used the xkit rewriten options in this post and installed the firefox application called stylus and installed this script through it for the old tumblr layout <3

(psst reblog and spread this so it can get to who needs it )

update :hi besties both xkit rewritten and stylus are available for chrome too!

[pixiel]

Old Tumblr Dashboard (Userstyle)!!

I created a Userstyle for the Chrome/Firefox Stylus Extension that reverts the new dashboard to the old look!

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

Install the Stylus Firefox Addon or the Manifest V2 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 (Stylus), follow the instructions:

Go to this link: https://userstyles.world/style/11286/old-tumblr-dashboard-userstyle (If it says 'style not found' then the Userstyle.world server is just down, try again in an hour)

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*/

For Manifest V3 only Chrome Or Stylus incompatible browsers:

For Chrome Manifest V3 install the Tampermonkey Extension

Then add the Tampermonkey Backup Script instead of the Stylus version

https://greasyfork.org/en/scripts/492279-old-tumblr-dasboard-backup I highly recommend you switch to Firefox for continued use of good extensions! Stylus does not have a V3 update yet; however, the tamermonkey script works just as good.

Be sure to check for updates regularly and if you'd like, consider supporting me on Ko-Fi https://ko-fi.com/pixiel !

I'm currently taking donations so I can afford a much-needed wheelchair, so please check out my GoFundMe for more details! Any Ko-Fi donations will be added manually to the GoFundMe

..::::HOW TO UPDATE::::..

click the Manage button on Stylus and click the check for update button next to the userstyle, then click again to install!

Make sure to check the Userstyle and see if the version number matches the one below if you don't see any changes!

NEW UPDATE: 26/04/25 (D/M/Y) 23:28PM BST v17.12

16.16: Fixed activity and notifications, they now look like the previous version 17.0: Final update to the new icons bs! Every page should be functional. If theres any missed parts or bugs - let me know! 17.9: Minor fixes and Tampermonkey update! You can also fix the positioning of the Communities button and subnav from this menu as well - it should remember your settings when you update!

Tumblr Post Width & More (OTD+ Userstyle) Is now available!!

OTD+ is an add on for Old Tumblr dashboard that you can use to edit the Post Width, Content Positioning & More - It must be used with Old Tumblr Dashboard installed as well on the latest update! This style might be merged with OTD in the future.

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

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

----- Known issues:

Only two columns in Masonry view. Semi-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. Semi-fix: Zoom out in chrome/firefox and it adds more columns, you may need to change the font size of the page though

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 but not a big deal

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 change this in Stylus;

Or if you're using the tampermonkey version

Find text:

.NLCTe > div.Evcyl > div > div > .So6RQ.YSitt > .ge_yK > .c79Av > article > header > .RYkKH > .nZ9l5 { pointer-events: auto; top: 55px; transition: top .25s; position: -webkit-sticky; position: sticky; } and replace it with;

.NLCTe > div.Evcyl > div > div > .So6RQ.YSitt > .ge_yK > .c79Av > article > header > .RYkKH > .nZ9l5 { pointer-events: auto; top: 0px; transition: top .25s; position: absolute; }

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

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!

v12.3: Fixed a text issue (my bad!), I undid the changes to the replies function and added a way to fix icons order for when you get the communities update!

v12.5: Update to make compatible with the Content Positioning using Tumblr Post Width & More (OTD+ Userstyle) v12.6: Post buttons fixed, icons unable to be fixed yet as I haven't got the tumblr changes just yet - but I will fix them asap!

v11.7: Communities Update, changed the new search bar on communities page to resemble the old one. The search bar still doesn't work on these pages yet for some reason. Blog view icons fixed. v13.0: The icons change should now have a working patchfix! BIG THANK YOU to arcadian-asgardian for sending me the screenshots I needed and testing if it worked. + Minor tweak, communities button resized to fit the rest of the icons better v13.2: Mini fixes now that I have better access to the new changes! Communities icon re-centered, usernames nudged back into place.

V13.5 & v13.7: Nuked the Go Premium button - Re-positioned the search bar on search pages v13.10: Changed a lot of the new look for replies - it's not perfect yet mind. Small bug with the "..." menu moving to the left with shorter replies. Looks a lot more like the old replies section though! Made it possible to remove the reply to reply button just search for "NEW Replies UI" in the userstyle and remove the /* */ around "display: none" OR use Ublock to block the element! v14.1: Reverted the "Original Poster" border + text to look like old version. Edit: Whoops, fixed an issue with showing the timestamps

v13.4: Added a way to fix the communities icon position if you don't have the New Xkit button or have hidden any of the icons. Just remove the highlighted /* */ pair in the code for what you need.

v14.11: Made Premium Perks button available in the bottom left corner for all premium users v15.2: Fixed the Tumblr fuckup AND added a cool new feature that allows you to customise the look of your header & hide the reply-to-replies button if you like, here's how to customise this. Set to "Block" if you want the button/icon visible, Set to "None" if you want it hidden! V15.5: Given labels to options for clarity - now says 'show' or 'hide'!

v15.9: The Boopdate! V16.0: Fixed Search view pages and made them look normal, unfortunately, I can't bring back the dropdown menus for "top"/"All Time" etc - but it should look more like the original now

v16.3: Minor tweaks to make search pages look better

16.10: Fix changes to the notification icons 16.14: Fixed many issues with Tampermonkey Version - including a bug that makes the header go weird when you click on a post, fixed notification icons in small view

16.16: Fixed activity and notifications, they now look like the previous version

16.26: TEMPORARY UPDATE - only changes some aspects of the dashboard - THIS IS FULLY INCOMPLETE AND I AM WORKING ON A FULL FIX FOR THE REST OF THE SITE EDIT: added changes for timestamps!

[kumpulanjurnalmakalah-blog]

[solved] How to keep :active css style after click a button

[solved] How to keep :active css style after click a button

When you click a button on a web page, a common behavior is for the button to enter the :active state, which is a CSS pseudo-class that applies a certain style to an element when it is being activated by the user. However, in some cases, the :active state may not persist after the button is clicked, especially when dealing with WordPress websites. This can be frustrating for users who expect…

[numbpill]

========================================================

[tutorial: build your own neocities/nekoweb page]

========================================================

a beginner's guide for making your very own home on the indie web—retro, personal, weird, and 100% yours.

this ain’t an average wix, squarespace, or tiktok aesthetic.

we’re talking full html/css with soul and attitude.

[ prerequisites ]

------------------

> an idea

> basic text editor (vscode, notepad++, or even notepad)

> account on https://neocities.org or https://nekoweb.org

> some gifs or tiles you love (dig deep or make your own)

> optional: image host or gif repo (or self-host everything)

[ feeling overwhelmed? read this. ]

-----------------------------------

you do *not* need to know everything.

html is not a mountain. it's a garden.

you plant one tag. then another. then a style. then a button.

you can build your site piece by piece.

and every piece is a portal to somewhere personal.

you are allowed to make broken pages.

you are allowed to use templates.

you are allowed to start over as many times as you want.

this is *your* world. you control the weird.

[ step 1: create an account ]

-----------------------------

> neocities: https://neocities.org

> nekoweb: https://nekoweb.org

register a name, log in, and enter your file manager.

this is where you upload your files and see your site live.

[ step 2: your first file - index.html ]

----------------------------------------

make a new file: `index.html`

basic starter:

<html>

<head>

<title>my weird little corner</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<h1>welcome to the void</h1>

<p>this is my page. it’s strange. like me.</p>

<img src="mygif.gif">

</body>

</html>

> upload to the dashboard

> boom. you’re live at

https://yoursite.neocities.org

or https://nekoweb.org/u/yoursite

[ step 3: add a style sheet - style.css ]

-----------------------------------------

create a file called `style.css` and upload it.

here’s some nostalgic magic:

body {

background: url('tile.gif');

color: lime;

font-family: "Courier New", monospace;

text-shadow: 1px 1px 0 black;

}

img {

image-rendering: pixelated;

}

marquee {

font-size: 20px;

color: magenta;

}

link it in your html and the vibes activate.

[ step 4: decorate it like a haunted usb ]

------------------------------------------

> use <marquee> for chaos scrolls

> embed gifs from https://gifcities.org/

> steal buttons from https://cyber.dabamos.de/88x31/

> set up a guestbook at https://www.smartgb.com/

> loop audio with <audio autoplay loop>

> add fake errors, 90s web lore, random link lists

[ step 5: resources, themes, and comfort ]

------------------------------------------

> templates & layouts: https://numbpilled-themes.tumblr.com

> glitchy gifs & buttons: https://glitchcat.neocities.org/resources

> layout builder: https://sadgrl.online/projects/layout-builder/

> free tiled backgrounds: https://backgrounds.neocities.org/

> beginner html intro: https://www.w3schools.com/html/

> pixel fonts & cyber assets: https://fontstruct.com/

remember:

you don't need to know js. you don't need to be a coder.

you just need a mood, a direction, a dream.

the html will follow.

[ bonus concept: shrine pages ]

-------------------------------

> a page just for one character you love

> a room to house digital fragments of your identity

> embed quotes, music, images like altars

> call it shrine.html and link it from your homepage

[ closing mantra ]

------------------

you are not here to be optimized.

you are not a brand.

you are a ghost inside the machine,

carving your initials into the silicon void.

welcome to Your website.

========================================================

[digital-chance]

Neocities Websites for Decor (& Other Resources)

9/4 2:10pm

i've been working on my neocities website and wanted to compile a bunch of places where one can find decor. this is not an extensive list, but rather a bunch of places where you can start finding resources.

please note that various pages could strain the eyes, including flashing lights or colors. pages called 'blinkies' usually have flashing colors throughout. [* = prominent flashing lights]

all websites, resources, and thoughts are beneath the cut

decor

effects for mouse cursors, text, and sites - https://www.mf2fm.com/rv/

assorted decor, images, and more - https://shishka.neocities.org/shishka/toybox

* random gifs from the internet archive - https://gifcities.org

https://pinkukingdom.neocities.org/toybox

http://whimsical.heartette.net/material [has tos you need to follow]

https://cinni.net/?z=/toybox/ [love this website so much]

* assorted early internet graphics - https://www.glitter-graphics.com

https://graphic.neocities.org

https://strawberry-gashes.gensoukai.net/v2/

archived images - https://web.archive.org/web/20100211160439/http://neskaya.net/pixels.php

* https://kawaiiness.net/home.php [potential eye strain]

https://www.asterism-m.com/item/ [japanese site]

https://pixelsafari.neocities.org

https://foollovers.com/mat/index.html [japanese site. has tos]

* https://gothiclolita.neocities.org/materials

https://sozai.pooftie.me [pastels. very low contrast, hard to read warning]

https://scripted.neocities.org

https://arunyi.art/#goodies

https://nonkiru.art/resources

* https://animatedglittergraphics-n-more.tumblr.com / @animatedglittergraphics-n-more

https://drive.google.com/drive/folders/1eQx_UiPvEvI4ZZECoPOuRrLhIE_6XbBy [content guide here... 4k+ gifs and graphics by @topadie]

* https://cutewebgraphics.tumblr.com/directory / @cutewebgraphics

https://pngfarm.tumblr.com / @pngfarm

https://lostsozai.tumblr.com / @lostsozai

decor directories

https://directory.cinni.net/sozai/

https://pixelsafari.neocities.org/links/directory/

https://www.tumblr.com/gender444/680981849679511552/favorite-sozaiblog-materials-sites-fool-lovers

definitions

(for those who don't know and/or are just getting into website creation)

webmaster: person who coded/created the website

favicons: small icons or graphics, usually 16x16 pixels.

pixels: graphics either custom-made or found. i've seen this term used for favicons, adoptables, and other graphics.

emoticons: old term for emojis. typically custom emoji expressions

* blinkies: thin flashing or sparkling banners, usually with text, an image, and flashing lights. collectible.

toybox: collections of favicons, stamps, blinkies, buttons, and more. all up to the webmaster's discretion and preferences

* glitters: glittering or shimmering text or images

stamps: collectible rectangular images, usually 99x56px

buttons: images that are hyperlinked to other websites. often custom-made for one particular webmaster or site.

avatars: typically 100x100 pixel images

other websites

beginner's guide to html and css - https://webguide.neocities.org

dnd style character generator - https://harlekine.neocities.org

templates/themes - https://neothemes.neocities.org

photo editor - https://photomosh.com

rainbow text maker - https://www.glitter-graphics.com/generators/rainbow.php

various other resources - https://scripted.neocities.org

learn more about websites & neocities - https://sadgrl.online

assorted resources - https://www.tumblr.com/punkwasp/725206601551773696/neocitiesindie-webmastery-resources

get started with website creation - https://www.tumblr.com/oddmerit/685644129978499072/note-cause-im-getting-sick-and-tired-of-terfs

all types of resources - https://punkwasp.leprd.space/resources/

* = prominent flashing lights/colors

i suggest not linking back (aka hotlinking) to the resources on the website. instead upload it yourself onto either neocities or an image hosting site and include credit. this way, if the person hosting the image deletes their page or loses the image somehow, your website will still be fine. (i didn't do this and had to find everything all over again... )

i have found that the best websites to use as companions to neocities are w3schools, pinterest, tumblr, and any image hosting site. w3schools for coding tutorials. pinterest for inspiration or for graphics. tumblr for any type of decor and advice. to edit my code and have a live preview, i use codepen.io.

since you read through all this, maybe take a look at my neocities site and follow me! <3

[eri-lessthan3]

Hey you

all of you complaining about tumblr live

Seethe and cope 😎

Okay but seriously

Get yourself the Stylus extension For Firefox users: https://addons.mozilla.org/en-GB/firefox/addon/styl-us/ and for everyone else: https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne

Get the Old Tumblr Dashboard Style: https://userstyles.world/style/11286/old-tumblr-dashboard-2023

You should get this stuff even if you don't plan to remove tumblr live :3 Now here is where the magic comes from:

Stylus allows you to add custom css styles to websites, and you can edit themes made by other people to fit your needs!

See that little fucker? How about we fuckin g kill it?

Press f12 to open the Developer Tools (or however it is called lmao)

Click on this little guy

Now you can select an element on the website, and it will show where it is in the html!

3. Point

Click on it, and now we will see something like this in the inspector!

Collapse a bunch of this stuff, since here we only care about the list items, or <li>

These are the different buttons in the banner

Now, how do we fucking kill that guy?

There are a number of ways to do this, so let's start with the simplest one

Delete

Just select the list item that has the title "Live" and press delete!

So it is gone now, right?

Well... not really. If you refresh the page, it is back. Which makes sense, since the only thing we did is remove that part of the "code" (if you can call html "code"), but when we refreshed it, the server gave us a version of the site that obviously had the button still there.

So what is a smarter way to get rid of it?

While you can't really delete a specific part of the site with just css, you can hide it! To do that, all you have to do is apply the style display: none;

Like that! While it doesn't fix the problem with the refresh, it brings us closer to the solution.

Remember when we got Stylus? yeah!

Go inside of it (😳), and inside the Old tumblr dashboard theme (😳😳), and now we just need to apply the css style of "remove that fucker" to the specific list item. How do we do that, since we can't add it directly into html? We use the attribute selector, and we look for title="Live"!

Where do I write this????

Well, css applies the styles from top to bottom of the style sheet (usually, this post is already too long), and you see how the list item has a few classes assigned to it? It so happens that they also modify the display property, so we have to override it by putting our selector after those in the css sheet... so basically you can just write the thingie at the end 😅

Here is how the attribute selector works!

the .IYr09 part is that specific class, so that if there is ever something on this page that has the title="Live" but isn't what we are looking for, it won't apply there (You don't need to do this, but whatever). The attribute selector is written in the square brackets, and you just... write the attribute that you are looking for there ;P

(I also did the same for the Explore button, but that can be an exercise for the interested ;P)

And now, BEHOLD

(How am I so popular that I got dms during the making of this >.&lt;)

And it will stay like this, forever*

*except if something happens to the addon, theme, css of it or whatever, but you get the point!

[self-spaghettification]

The Mystery of Aaravos The Banter Lodge

So, recently an account called "The Banter Lodge" has popped up. April 30th, to be precise. You've seen it. I've seen it. We've all seen it. On Twitter, posting various images in the TDP official style.

A few nights ago, it debuted on Tumblr as well. "Coming May 2024" all of the promotional images and the website itself say.

Who is this account? Is it fan made, is it official? It's May, when exactly in "May 2024" is it coming?

Well, me and a few friends took some time to try to piece the mystery together, and so -- while it may still be 'coming', only dropping hints, I am here to tell you what I know now!

History

Website Code ( I love computer programming so I took the time to dive into that!)

Purpose

A. History

Who's Running the Banter Lodge?

To know that, first we need to delve into the history of the Twitter account.

Despite these images and site debuting less than a month ago, the account itself was founded way back in 2022, and originally called @BantherLodge, with an H, as it is in the show.

@BantherLodge is no longer available, and while it initially did not seem to be connected to The Banter Lodge, there are several interactions linked to the current one, Banter Lodge without an H.

In fact, here is the same tweets linked to the current (banter) account version.

Now we've established that @'BantherLodge' and @'BanterLodge' the same account with a changed name and identity, here is the most important past interaction:

@‘bantherlodge’ is mentioned here, and they are on this call. that said, WHO IS REALLY BEHIND BANTER LODGE? well based off the tweet, it seems that it’s 6 members of the cast and then 2 guests, @‘thebantherlodge’ and @‘ladytheebug’. But don’t take my word for it. Here, more confirmation:

Another person in the call happened to tweet about it too, this time with labels.

Now let’s take a closer look at these two guests. Sara @‘ladytheebug’ seems to be the one on the right, and by process of elimination, on the left is ‘bantherlodge’. aka:

Max….

Max the Mystery! ‘Sara’ and ‘Max’ isn’t really enough information to know more along with no connection to other socials so it’s hard to pin down who they are or what connections to previous fandom projects or creative projects in general they might have. However, they are still connected.

Besides the partially deleted various back and forths between these two accounts, this tweet about the Bait screensaver in the background is additional confirmation that this is @‘bantherlodge’ and @‘ladytheebug’: (note use of word ‘our’)

FURTHERMORE:

Said TV embodies this duo: A person who loves Bait (evident from so many of their tweets) and a person who loves the Banther Lodge…

Reminds you of something, doesn’t it?

“but hold on, just because there’s all these coincidences doesn’t mean the account could be passed on to someone else to run this.” Ok, but one last thing. If that was the case, why would they still be following Sara? In fact, it’s the Only person that they’re following besides TDPO?

(and their following has even been recently updated within the last few days as before then it didn’t include Eugene and Boone.) So, in conclusion,

Max of @‘BantherLodge’, and possibly Sara, (with or without TDPO but I’ll get to that later) almost certainly are the people behind the curtain of this Banter Lodge mystery.

Now, about said mystery… what exactly is the trail building up to?

well, to find out more about that, let’s glean what we can from the website.

B. Website Secrets

The website itself is very simple- A background, the image of the Banter House, and some text saying "Coming May 2024." But, beneath the deceptively simple surface, there was more to be found.

On May 1st Caprinae got this from the page. She also tweeted about it, after which the site changed to remove much of the css, including the part about the episodes and subscribe button. I was pretty excited about this as someone with a few years of coding experience, I wanted to mess around in VSC and see what I could find out.

After formatting the code the most noticeable thing is this right?

And when I make an element for it to apply to (since all that code is just formatting for stuff on the page like the title, images, etc, in this case- an audio bar) + adding in an image and an audio file:

We get this

AUDIO and an image. It looks exactly like a podcast episode. It turns out there’s actually a bunch of code for formatting that’s not used in elements in the site (elements that exist: the title or image), but it’s there, so I made some elements it would apply to. technically, it’s supposed to have a parchment paper background too, but I just chose some colors that you could see the text on.

Doing so, we get this!

(Here’s a video version.)

Plus, Original Code and Modified Code if you’re curious

Anyway, so the site (at least at the stage the code was taken from) doesn’t appear to be finished and there was no Java script written (or at least, linked) but there is definitely the makings for a website for a podcast— some sort of nav bar with the episodes, on an episode page, the image and audio, and then a subscribe link at the bottom!

C. Purpose

Time to speculate on the real identity and purpose of the Banter Lodge. So far, we know it used to be called the Banther Lodge. We know it seems to be run by [insert here.] We know it is almost certainly a podcast of some sort. But what, and why?

Here are some possibilites:

1.Official Content to Tide Over Fans Til S6 As we know, to calm the frustration of fans at Netflix/TDP for the delay of S6, the creators have been putting out content every day for the fans to puzzle over and figure out the season six titles.

Based on the current schedule, it’s set to end on May 13.—although it could be ending either May 13 or May 14 (depending when they do the last hint) after these drop, there will likely be a lull in TDP content, which would be the perfect time for the Banter Lodge to launch.

+ The Banter Lodge teaser campaign has already been perfectly timed for when a bunch of fans would be online on Twitter checking in for clues to begin with.

If this is official content, it would doubly make sense—it’d be timed perfectly to tie the fans over until the actual season six campaign starts (ie, trailer). Considering these two fans also somehow got to have a private panel with the cast, it’s not impossible that they’d be working with TDP on this content, additionally the teaser images put out this far have been somewhat reminiscent of TDP official content—ie, Callum’s lodge notebook->Callum’s sketchbook, Refractions->Reflections, Dear Callum letter from Rayla, design style, etc.

However, there is one big reason I don’t think this is the case: it’s a little too sloppy. For example, if they wanted it to be completely anonymous and unclear what was happening, the tweet mentioning @‘BantherLodge’ in the panel would have been deleted and there wouldn’t have been any hints in the code. Of course, these could still just be honest mistakes. However, it also seems like it is building off of the current world in a more derivative, fan-content fashion, not necessarily adding new material the way TDP Official tends to. It’s copying the official style,—but almost too much if that makes sense.

Like altering a shot from the show for a teaser.

x

Don’t get me wrong. I love the way that they’re building off the world, I’m excited to see where it leads, but for whatever reason, to me, it just doesn’t seem official.

So assuming it’s made by fans, what kind of podcast is it? Second possibility—

2. Fan Made Talk Show

This seems like the most obvious conclusion, considering that The Banter House is a play on a location in TDP, and the word banter, which is synonymous with talking, but specifically back and forth, genial interactions.

Maybe it’s dedicated to analyzing the show or a particular aspect,—maybe centric to the lodge, crystals, Bait and Stella—maybe even interviewing cast/crew!

Well, to get a better idea of what niche it might be filling, let’s take a look at what TDP podcasts are already out there.

Hot Brown Morning Potion Podcast [2019-2023] Hosted by Tamika "Kuno" Williams and Hailey from Cartoon Universe. This podcast [is] full of answering fan questions, interviews, theories and all kinds of discussions on everything Dragon Prince.

News from the Breach [2020-2024] Your hosts Ceilidh and Yana are watching The Dragon Prince from start to finish. Each season of the podcast covers one “Book” (or season) of the Netflix series The Dragon Prince. In each episode we discuss two chapters of the series, except for the season finales.

Calm Chaos Club [2023] Join Kevlar and Lou each week as they discuss topics about animation, design, and all things related to The Dragon Prince on Netflix! With special guests brought on for unique topics and insights into the creative process, these bite-sized episodes will ensure you can get your TDP fix in anywhere and anytime.

There’s no harm in another talk show but as there are a few out there already (and for other reasons) I personally think this is not necessarily the niche the banter Lodge is going to fill. I mean, I do think that it’s still possible I mean, it could be centric to particular aspect around the lodge as mentioned.

However, there’s a possibility that excites me a lot more, that I’m hoping for the most….

3.Fan Made Audio Drama in the Saga Setting I have personally always been a huge fan of audio drama podcasts (TMA,TPP,WTNV) and if there was a dragon Prince audio drama podcast, I think I would just die on the spot honestly from joy. I also think it’s most likely because all of the clues so far have been very story/worldbuilding oriented, as well as writings from familiar characters’ perspectives. It seems as though a story is being crafted here, and I am all for it.

Y’know what? While we’re here on the topic of storytelling podcasts, we might as well throw in D&D/TTRPG or even Tales of Xadia as a possibility because yeah sure. Why not? I mean, tabletop role-play games also involve a lot of talking so it would fit the banter theme. Who knows.

That's all! What do you think? Any other thoughts, additions or other speculation? Feel free to add on!

Thanks to @bycaprinae for Twitter screenshots, html, and general inspiration, and to @parroset for other help with the website part and general support!

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

[dkettchen]

not me learning HTML & CSS this week and my gender theory video essay brain being like 'omg this is the perfect metaphor for like how I define my trans & now binary-aligned gender ID purely through my preferred apparent sex, it's like the HTML (the bit that determines what items the page contains to begin with (ie buttons, text, etc)) & then [insert anything from a simple "gnc" or "gay" in reference to gender expression all the way to xenogender shenanigans like "sparklegender" here] is the CSS (the bit that styles it how you like, with colours and fonts and placement etc of those items)' so uh potentially look forward to that incredibly frontend nerdy metaphor being utilised in an upcoming video after matriarchy someday someday my youtube channel will come home from the war

[orcelito]

So i did finish the lab. Pretty damn late, but I finished it.

This should be testament enough to my general state of mind by this point. Yes, I did turn it in like this.

[obey-me-rewrite]

Hi! just wanted to ask on how you personally use Twine I've been a fan of OM, and wondered how u made the remake in that system lmao. I was wondering if you had any tips / tutorials u used, I've spent some time testing and have got the hang of variables and linking but i was really confused on how you designed it / removed the borders around the side bar and everything, along with how you made the intimacy system, Especially the notify / achievement bar system! No tutorials were helping me lol

Sure! I'll do my best to explain below; feel free to ask me to expand on anything if it's confusing.

Changing sidebar:

The way you do this is basically through CSS ("Story Stylesheet"). When your game is open in the browser, you can inspect elements to figure out what they're called, then change their styles. For example, I removed the border of the menu buttons by putting the following in the stylesheet:

(for the overall borders)

menu ul {

border: none;

}

(for the borders between each link)

menu li a {

border: none;

}

w3schools.com is a great website if you'd like to learn CSS - it's what will help you completely restyle your story. There are also plenty of Twine design templates for something easier to use without having to learn code.

Intimacy system:

This one is a little more complicated. I'm actually completely rehauling the intimacy system for version 1.1. Right now, it uses a lot of if statements to check the amount of intimacy the player has collected with a character - and this intimacy is in a variable initialized in the special StoryInit passage. However, that's bandaid code which is messy and easily runs into bugs, as has happened ever since release lol. To fix it, I've essentially created a proper levelling system using custom macros and JavaScript. That requires a good grasp on behind-the-scenes programming, though. If your game isn't a huge project, keeping intimacy in variables should work just fine. Just make sure to keep a spreadsheet or notes somewhere that list how much intimacy is possible to gain and in which passages. It will make your life easier in the long run.

Notifications:

This one I actually got from one of Chapel's custom macros! They're super easy to use and do a lot of cool things. I highly recommend checking these out because they can make your life easier: link

Achievements:

I'm going to assume you're talking about achievements that persist over different saves - for this, you'll need to utilize Twine's special StoryInit passage again. In case you are not sure of what that is, it's essentially all the variables that will be initialized when the game is first loaded into the browser. Your achievements and important story-spanning variables (like personality traits, intimacy counters, etc) will go here. To create an achievement, you'd put something like this in your StoryInit:

<<set $achievement1 to recall('achievement1')>>

If the player hasn't obtained the achievement, $achievement1 will automatically be set to false. To have them actually get the achievement, put

<<run memorize($achievement1, true)>>

<<set $achievement1 to true>>

in the passage where the achievement is gained. Also, be sure to have your players know that keeping saves and achievements like these relies on browser cache - if that's cleared, their progress will be lost.

Hope that helps! I wasn't sure how familiar you are with Twine beyond variables and linking as it's a pretty big engine with many things, so I just covered things without going into deeper mechanics like Twine's special passages, scripts/stylesheets, macros, etc. I'm happy to explain those too if you're having trouble. Also, everything I explained is specifically in the Sugarcube language - it won't work in Harlowe, Snowman, etc.

Helpful links:

Twine cookbook

Chapel's custom macros

Cycy's custom macros

Albie's Twine Tutorial with tons more resources

[soophia-studies]

100 days of code - day 16

31.10.23 again ?

Hello! 😊

Today I did a project with HTML, JS and CSS. It is like a pixel art canvas, you can pick a color and draw some pixels.

I'm impressed with the reduction of time that I made the project, if compared with yesterday project I was I little faster today :)

I struggled a little when trying to make the dynamic size for the canvas and the click + holding event to draw the line, but after a lot of googling I managed to do it.

This project was so fun to make. I always got excited when saw it slowly taking form.

I also added some cool buttons style:

Now I have only one project left to finish the foundation path!

That's it, I also made some rust exercises on rustlings, but not too much.

Now I'm going to 🛌😴😴😪

[hauntinginprogress]

neocities heracles trials: from a chaotic newbie

okay so i want to actually start posting here and i finally got it through my thick skull that this is LITERALLY A BLOG. i'm supposed to blog. so here's a blog post.

anyways, for context, i've been working on my neocities for a while now, recently started over to make things more original and more me. another thing to note is that i'm using VScode.

the issue here is that i have zero well not exactly zero but i lack any professional/academic background experience with making websites. the html isn't the issue (thankfully) but holy shit dude...css+javascript implementation . basic styling with css is no biggie, right? absolutely, however...may i introduce: smooth transitions + the absolutely tragic fact that the <marquee> tag is deprecated an accessibility issue.

so, my first goal day one was to recreate a marquee animation through css. so i tried to simply implement this incredibly useful bit of code into my site (in which if you're interested i totally think my failure to get it working was user error so please check it out it works great if you're not me) but, lo and behold, despite me getting it to work in my V1 project, i could not, for the life of me, get it to work. so i, not too familiar with css animation and completely lost when it comes to javascript, started grasping at straws. i ended up finding this tutorial and, with some improvisation since the tutorial is for webflow and i'm manually writing everything, managed to make my own css recreation of a marquee effect essentially from scratch, and even learned about the animation-play-state css attribute so i could pause the effect when the marquee is hovered over! victory, basically.

then, i looked around the many cool and absolutely awesome sites on neocities to get inspiration, and then i was like "hey what if i made a custom button background image" and with some trial and error, made myself a pretty decent base (for now) with aseprite, and learned more about the program in the meantime which is always a plus.

then i decided that i wanted to do more with the buttons. i wanted to make it animate on hover. not too hard right? you'll...you'll see why i struggled...in a moment...

anyways, i settled on a simple shrink animation. which THIS i could do with ease, messed around a bit, got the keyframes, assigned that to the button:hover and all of that and all was good!...until i realized that once i stopped hovering over it, it snapped back to its original scale instead of transitioning smoothly again. THIS is where the "fun" began.

see, although i can wrap my head around things easily when it comes to css, i have to constantly look up what the proper syntax for everything is because otherwise i'll mess everything up. and through my research i had conducted (aka surfing through multiple blogs and reddit posts alongside other things on random forum websites) i had discovered the very neat transition attribute.

but we'll have to return to this because i have adhd, and i ended up getting distracted during this process. see, originally i had decided that the button would change it's visual to appear like it was pressed when the user's mouse hovered over it. then i was like "i don't think this makes sense" so i changed it so that the button wouldn't change its background image unless the user actually clicked on it. so i did that. then i had to make sure that the button wouldn't magically scale up again so i had to transform the styling and blah blah blah those details aren't really that important ANYWAYS the actual important bit about this is that if you use the transition attribute and there's a change in background images that change will also be transitioned unless you set the transition to only apply to a specific change. and i didn't know that originally. so every time i tried to fix things up with a transition so the button wouldn't snap back to it's original size out of nowhere the background would slooowly change as well and i actually got so frustrated with this that i wanted to burn something down because that's a totally normal reaction i guess. anyways, then i started frantically searching for answers on the topic and EVERY. SINGLE. THING. THAT I FOUND. INCLUDED JAVASCRIPT.

i do not know javascript. i have not learned anything about it unlike css and html. it SCARES me and it is FRUSTRATING. but i thought i'd try it anyways. news flash that shit didn't work at all and i almost thought about scrapping the animation entirely especially when it randomly stopped working when i made certain changes, but i ended up eventually figuring out what i mentioned earlier (CSS transitions and the fact that you can assign them to only affect a specific change instead of everything) so with some dabbling here and there i eventually managed to finally figure out how to make everything smooth through pure css and although it still snaps if the element hasn't finished animating i'm happy with it.

moving on to another thing, i wanted to then make a sound effect play when you click the button. yes, we are still talking about buttons. THIS i could not do with css, like, at all. javascript admittedly is for interactivity and i had already been bending the rules quite a bit with the animations since those teechnically should've been done with javascript as well but this? this was impossible without javascript. so i found a free mp3, and searched up a nice little tutorial on the very basics of javascript.

little did I know that apparently, this would be my own personal little hell.

see, no matter how many times i tried a different script, the sound just would not work like at all. i'd do everything in what i assumed to be the correct way, and no matter what, it would not play. knowing that i'd just have to revisit this, i decided it was best to just sort of put it on the back burner.

and this is where i wish i could say this is the end of my absolutely gobstopping rant. however, i cannot.

see, one thing that i really like that i've seen in a lot of other people's sites is draggable windows. i think they're sick. but this ALSO requires javascript, but i didn't think this could POSSIBLY be that bad since so many people did it.

...right?.......right? guys. right?

MOTHERFUCKER I WAS SO WRONG.

see, it turns out that a lot of people do this sort of thing with jQuery, specifically for user interfaces. but vscode doesn't have a "user friendly" way to get jquery to work with it. and because i don't want to mess with program files, i decided that logically speaking jquery just makes writing things in js scripts less complicated and doesn't introduce things that are impossible in vanilla javascript so i decided i could suffer a little bit and try and do things without jquery.

this led me to looking at many sites with draggable windows to look at their own scripts, in which every single time i tried replicating things i FAILED.

i eventually stumbled upon a nice code that worked. but the issue with it - in which unfortunately i can't find it, else i'd link it - is that it works with not only element classes but also a specific ID. see, this would be fine if i only wanted ONE draggable element. but i want multiple. and i thought that maybe if i just duplicated the script and dedicated it to a different ID and changed function names it would work but nooo life cannot be this easy apparently. so after setting up my webmaster status window, getting that to work, i tried doing the aforementioned method for what will eventually be a guestbook of sorts. it failed.

so i decided, "hey i'll revisit this later!!" and i went on to finding a way to implement a status widget into my site. this honestly was really easy as i ended up stumbling upon status.cafe . so i registered, eventually got my account activated, and i got it working in my live port of vscode just fine!! all is good in the world.

well that's what i thought until i found out that since i had created my neocities account in march of 2024, and i'm unemployed since i'm still in high school hence i have a free account, that i could not. use the widget. in neocities. so i tried finding a work around, found this handy guide (which is genuinely useful by the way) and set up things through a RSS feed instead which is essentially just a work around that complies with the security restrictions of neocities that i'm bound by. anyways, this works great but i literally just can't customize it to how i want so this is another fail. then i find imood.com which, although is NICE, doesn't suit what i want on its own. so i'm at a loss here too.

so, again, another thing to put to the side i suppose.

so i started working on getting my guestbook, browsed through people's homepages again, and found chattable . and you probably think i have another paragraph complaining about this but honestly i can't write about something when i can't figure out how to even create a chat to implement onto my site in the first place so...y'know.

plus, i honestly have no clue if it'll work on my site either due to security restrictions so this is fun!!

anyways, after dealing with all of this, i finally decided it was about time i ported what i had so far over onto my neocities account. which isn't actually that hard i just had to wipe all of my files, overwrite the content in my index.html file there and paste in what i have now, and then upload my new files. but for some god awful reason after i went through all of this chrome just. kept depending on my old stylesheet??? so i had to clear some of my browsing data and eventually everything was loading properly for me.

and THIS is finally the end of my ridiculous documentation concering my neocities adventure so far.

i have no doubts i'll end up ranting here AGAIN about all of this but for now this is all i have on my plate...besides finally caving and learning javascript for real and continuing to learn more about html and css. hopefully one day i'll stop having such frequent issues but now is not the time and i doubt that'll be anytime soon either.

moral of the story, if you want to start something new and pick up a new hobby, please for the love of all that is of substance in this world don't go in completely blind like i've done if you're going to be making a project of some sorts. it will only lead to many misfortunes.

anyways you can see what i currently have done in my neocities here, make suggestions or give advice in the notes and whatnot i don't know.

[santaeofficial]

Quality Of Life Improvements Continue

Today's a big day for hidden avatar hunters across Santae. We have several updates to share that make it easier to track information about the avatars you've discovered -- and show off your favorite ones to others!

> Your Forum Avatar is now displayed above the HA on user profiles! Now you can show off your favorite avatar outside the forums, or select your forum avatar to perfectly match your HA. The number of avatars a user has unlocked is now also displayed on user profiles.

> For the coders among you, some inline styles on user profiles moved into CSS classes/identifiers to allow further profile CSS customization.

> Your user profile now links to a new Hidden Avatars page! This collection-style page has space to display all the hidden avatars on Santae. The art for avatars you haven't yet found is hidden, but you can see the titles -- along with the ability to reveal the solution for how to unlock it (if you wish!).

> Profiles have been improved on mobile. They should look ALOT better when viewing them on mobile - from the HA no longer spilling out of it's container, to the pet content being wrapped underneath to make it look better.

> Button added to profiles to view the avatars of the user you're looking at.

> Guess the Cup is now awarding the trophy upon winning all 10 levels. For the next week we have increased the odds of winning.

Thank you everyone for your valued feedback, without you, we would not be where we are today! <3

With Love & Gratitude,

~The Santae Team

[manonamora-if]

Hello Manon hope you're well! I was wanting to ask for a little bit of coding advice if at all possible? I don't know if you know of Brushmen's code collection to make Twine look like Choice script. I was hoping you would know a way to do something similar in the sense of wrapping the choices in boxes the way they did (similar to how choicescript does.)

Hiya Anon,

Of course! Happy to help.

Yes, I'm familiar with the template, thought I hadn't noticed the update... It is now meant for more intermediate users, it seems.

The source code does provide what is needed to make it happen (which is essentially a custom macro in JavaScript, with some extra CSS to make it pretty). You will need to download the projectfiles.zip from the page, extract it, find the choices.js and choices.css files inside the src folder, and add the code to your project. You can also find examples of how the "<< choice_shown >>" macro is used in the story folder.

However, if you just want to make it look more like ChoiceScript as in rather than

you want

You will need to choose another SugarCube macro: << radiobutton >>. Essentially, code your radiobuttons for the choices (and wrap each of them in a < label> for accessibility), and wrap the whole in a < div> for the styling. Don't forget the button for confirmation!

< div class="choices"> < label><< radiobutton "$choice" "value" autocheck>> Value 1< /label> < label><< radiobutton "$choice" "value2" autocheck>> Value 2< /label> < label><< radiobutton "$choice" "value3" autocheck>> Value 3< /label> < /div> << button [[Next]]>> /* More code if necessary */ << /button>>

You will need to remove the spaces... Tumblr otherwise eats the code...

Then we move on to the StyleSheet:

.choices label { padding: 11px 8px 12px; display: block; border-color: #a9acaf; border-style: solid; border-width: 1px 1px 0px 1px; } .choices label:first-child { border-top-width: 1px; border-top-right-radius: 8px; border-top-left-radius: 8px; } .choices label:last-child { border-bottom-width: 1px; border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; }

That's for the radio button. We target the label, because it's the easiest and it takes into account the whole option block (radiobutton and text). The second and third code is to round the borders.

And if you want the button:

.macro-button { clear: both; display: block; width: 100%; font-size: 1.5em; font-weight: bolder; font-family: -apple-system, sans-serif; margin: 1em auto; color: #f7f4f1; background-color: #626160; border: none; border-radius: 0.5em; padding: 6px; }

And so you get: