#but i figured out the css stylesheet!!!!!!!!!!!!!!!!!!!!!!!!

[aesethewitch]

I'll just make a quick neocities account... oh, and brush up on html real quick... ooooh, an html template generator, that'll make my life easier.......

[blinks back awake three and a half hours later, hands covered in html and css residue]

... Um?

[sibyl-of-space]

now that i have tampermonkey ive spent the past like hour trying to figure out how to use it to update the dark mode palette to include the navy again because i hate that it's just black. i looked at tumblr's CSS and literally the dark mode palette takes the "navy" variable and just sets it to 0, 0, 0 AKA black. i can edit it in the inspector (which is how i know exactly what they did) but i haven't figured out tampermonkey syntax/functionality to the extent i know how to script it to do this. this is a reasonable rabbit hole to be going down 30 minutes after i am supposed to be in bed

[slugg]

does anyone know some good resources for learning to code html/css….. trying to work on my neocities again and im very confused

[dmmdipodcast]

Thanks for doing transcripts. I prefer reading to listening and really appreciate the extra work. To make it more readable, could you take off the textured background on the website please?

hi! we’re really glad the transcripts are helpful. :-D

at least in the short term, would it be enough to remove the texture just from the transcripts specifically? I (Lleu, who’s maintaining the website) have just set the transcripts to a solid color background, as a starting point — let me know if that’s helped the readability!

I’ve grown fond of the texture, so I’m going to explore some more involved options this week to see if I can accommodate both accessibility and my aesthetic preferences (in particular, seeing if I can set up a toggle switch that people can use to turn the texture on or off). I’m not sure I’m good enough at HTML / CSS to implement the ones that I suspect would be easiest / least annoying behind the scenes, but one way or another I will find a way!

(if anyone following us is good at HTML / CSS and has suggestions about how to implement this without me having to duplicate every page on the website �� which I will do if I can’t figure out an easier way — please let me know! is there a way to use a toggle to switch between two different CSS stylesheets? there must be a way, right?)

[calliopefiction]

I have a question, do you have any tips on CSS/HTML stylesheet's for Twine? I'm trying to make my own story, and I'm a big newbie

I'm no expert myself, but I think I can at least give you some tips on the basics. If you have anything concrete you want to know, feel free to ask follow-up questions!

First, let me share some useful resources with you. It's probably a good idea to start by looking through the Twine Cookbook if you haven't yet.

When it comes to using CSS and HTML, it depends on the story format you are using. Twine has several. I am using SugarCube 2.36.1 (which isn't the newest version, but I don't feel like updating it while I'm in the middle of working in it). If you plan on using SugarCube 2 as well, here's the documentation for it, which pretty much has all the information you need to get started.

There are a lot of guides and tutorials out there. I recommend checking out the one by Adam Hammond, which covers the basics well enough.

Some general tips from me:

Feel free to look at other style sheets/templates and just copy what they are doing. Not only will it get you an idea of what is possible, but it saves you the time of having to figure everything out yourself from scratch.

When it comes to the stylesheet, a lot of it is trial and error. You just try something, realise it looks awful, and then try something else. It is easy to get frustrated when things don't work like you want them to, so just take it one step at a time.

Take notes somewhere! I don't code a lot, so even if I know how to do something now, I'm likely to forget it again. For that reason, I made myself a document with all of the functions, macros, etc., so I have them all in one place and in a way that I can easily find again.

Get the basic stuff done first. Proper formatting, readable fonts, etc. take precedent over adding a dark mode and so on. You can always add more stuff later, so get the most important aspects down first.

I hope that helps at least somewhat!

[skinsort]

Look, you don't have to do everything in code from scratch. It's fine to use generators to make your grid layout, or use scss to css converters to keep your stylesheets neater. As long as people have put a tool out there for the public to use, take free and full advantage. Most of the ethos in actual coding circles is in favor of open source- we none of us are doing anything truly original, unless we're writing a new language or framework from the ground up, which VERY few do. Even then, people want their tools to be used, and that's why they include examples, working sites, documentation, sometimes whole startup tools that will get you running a page in two commands. What matters on all sites it the actual CONTENT you put on a webpage, which is why all the most successful companies in the internet age rest on the foundation of what other people populate their sites with. netflix is nothing without creative film and television output, youtube is nothing without content creators, twitter, tiktok, facebook. even amazon doesn't mean anything if manufacturers don't sell their products there. All these sites are just wireframes for what YOU put on there. Do not shake in your boots about using freely disseminated code on the internet- stack overflow, open source repositories, design frameworks like bootstrap, material ui, free font packs, tutorials on code education websites, etc. Go, use it. People share these things with the intent of it all acting as a shortcut, usually without expectation of credit. They know that other people can figure this stuff out on their own eventually, their intent is to HELP. If a resource is open source, if a tool is available to the public, if a stranger answers a question on a coding help forum, I promise you. You can use it. There is no glory in making coding harder for yourself. Stand on the shoulders of coders who came before you. They wouldn't have put themselves there if they didn't want you to.

[izicodes]

Continuing Django #2

Continued from the last post

I figured out how to add CSS and JavaScript to my pages, and what a hassle! Took me forever to figure it out! Because files like .css, .js and even image files are classed as 'static' files, they have to be in a special folder in my app folder called 'static' for Django to recognise the files. Then I have to add the tag {% load static %} at the top of the HTML page so it can use any static files in the folder. Then the actual link tag for the stylesheet looks like this now: ' link rel="stylesheet" href="{% static 'style.css' %}" '. It looks easy now but I was struggling to figure this out, even after reading the documentation, it finally got it after trial and error 😅

With that being said, I will now be keeping track of all the information I learn from the video and by myself as I continue because I will forget that easily 😌🙌🏾

[sophia-sol]

The progression of my work on my website over the last week or so, as documented on mastodon:

one

heeheehee I get to learn JAVASCRIPT now via the method of just diving right in there! (aka. downloading the zonelets starter pack to use for formatting my website, and digging into the script to see what I want to change!)

awww opening the zonelets css stylesheet and it feels so comfortably familiar! I love how much work I put into understanding css, via creating an ao3 personal theme!

also, seeing how these files all work together, the javascript and css and html, I understand the relationship between what you do with each of them far more. It makes sense to me now! the structure of building a site!

two

I'm learning things about filezilla…I'm learning things about website structures….I'm learning how bad ao3's html download files are.

three

I have one entire fic posted to my website! YESSSS!

I'm doing my best to divorce from ao3 my sense of what structure and language I should be using in the various preamble that goes with a given fic. I don't need to use the same categories of data, and I don't need to call things the same thing! and I don't even need to have the same sections on every fic if I don't want to, if something isn't relevant for that fic!!

four

I made one entire change to the javascript for my site, and it WORKED, I am so powerful 💪

five

I'm just so emotional about the people of the smallweb who code their little projects and then give them away freely - with instructions! - so that others of us can build our own little projects! My website, the main site and the linkding instance, couldn't be what it is without the help of many people, friends and strangers! 🥹

six

I keep going to my website and shrieking a bit internally. it looks like a website!!!

seven

for most programs, there's not enough customization, I can't make it behave in ways that are useful to me, and it's endlessly irritating

visual studio code: I got u bro

I'm actually intimidated by the notion of scrolling through all the customization options of vsc, damn!

eight

look how many fics I have posted on my website now!

this listing page still has some tweaking to do for maximum clarity of reading/skimming over the info, but this is still great progress!

I am a firm believer of the web design principle of "if people have to focus to figure out how to find the info they're looking for, the problem is with the design rather than the user" and I'm not out of the woods yet

nine

OKAY I think I've got my fandom list page looking a lot more clear now, via tweaking my use of whitespace! hooray!

ten

oh my god. I just realized. the "zap colours" and "zap stylesheets" bookmarklets I use semiregularly are…..snippets of code. that I now know approximately how to read! and could edit to get slightly different results, if I wanted to!!

the world opens up to you, when you learn things about coding!

eleven

things I want to add to my website:

theme-picker, so people who do better with dark mode etc can still comfortably browse my site

comments on fanwork pages and blog pages

table of contents on fic pages so you can easily jump down to the section you want to

all the rest of my fanworks - 12 fics are up but that's not nearly everything!

BIRD SHRINE.

and all of this is very doable! so exciting.

twelve

omg I submitted a feature request to linkding and LATER THE SAME DAY a fix is committed:

between this and the default guest profile stuff I am soooo excited for the next linkding release

thirteen

I've started to write up a podcast recs page for my website because I figured that would be cool content to have. but I forgot. how wordy I can be. and HOW many podcasts I listen to.

my original plan was just a list of podcasts. my second plan was to include a sentence or two about each one, as context.

my current document has multiple paragraphs per podcast. most podcast descriptions are between 150-200 words each. and I have so many podcasts to go!

fourteen

my list of fanworks by vibe is now posted to my site!

also posted: just my faves of my fanfics!

and a history of the fandoms I've been in!

fifteen

…and the next linkding release is OUT NOW. today! hot damn. ok. ok. I am not prepared, it's usually not this quick between releases!

I hope I have time soon to dig into this and get my instance updated!!

[gorgynei]

have to say, i checked out your site and its honestly really cool! what resources did you use to learn html/css? i've always tried to learn more than the basics but could never really get any further

hi, thank you!! i honestly really dont know THAT much html/css, i just know how to read it and can kind of understand what i need to do to get certain things to happen. i was very much in the "tried to do it, couldnt get a grasp, got tired of it" boat for a long time. im not the best person to ask for advice honestly but!

the resources i used were the basic neocities tutorials, eggramen's templates, and the inspect function. but the most helpful tool to learn, i think, is the ability to read code that other people have written and understand how it works, and then try to recreate it or its functionality on your own, and then make something new with that new understanding, and so on

i dont reaally recommend doing this because im sure its not the best way to learn but im too stubborn of a person to try and sit down and learn things slowly, i just wanted to be able to do everything immediately so instead of reading any real amount of tutorials, i decided to try and brute force one of eggramen's templates onto my site (which didnt go well because i didnt understand what a stylesheet was or how any css worked or anything at all) but eventually i figured it out. and it forced me to get a grasp on html and learn a lot of important skills, like customizing css and html and such! but. thats not really good advice or help. so i just wish you luck i guess? /\o

[tigerdrop]

good morrow mr.tiger drop. i'm trying to do a neocities and i cannot figure out how to change how the pages look. your neocities looks so swag, can you bestow upon me your wisdom. thnx love u

the best way to do this is by using css. by default your neocities site should pull from a file called "style.css" in its root folder for any new pages you make, so thats where u should start. but you can have as many css files you want

this is where u would change which css file your page is using. btw

a full explainer of how css works is beyond me but you can use this website to learn the basics. you dont necessarily have to read every single page, but if you have something you want to try - like changing the default fonts or background colors or link colors - its pretty easy to find what u need

as an example you can see one of my stylesheets for my frenrey site here. css modifies how each html element is displayed, so, for example, this bit here:

changes how anything in the <body> element is displayed. you can do a lot of complex things with css, especially once u start digging into divs and stuff, so i would definitely experiment and see what seems fun and visually appealing to u

"hope this helps". the stuff i do with it is pretty basic and hacky but its fun to mess with

[artmctalon]

Currently working on building a new personal website.

I used to have a couple basic Wix.com sites that I used for my college portfolio, and after graduation served as my de-facto "main" site.

I had been meaning to retire it and replace it with something more polished for a while now (especially since taking some actual web design courses!). However, I was never motivated enough to take it down until I started looking into the BDS Movement and similar campaigns. It may not be as big a player as Hewlitt Packard, but it is still a notable company with headquarters in Tel Aviv.

So now I've finally deleted my crummy old site, and I'm setting up a new one for the new year.

I've been browsing through web-hosting services, seeing what's affordable. May install Wordpress at some point. In the meantime, I am also coding a dummy site from scratch (nothing fancy, just some html docs, a plain CSS stylesheet, and some Javascript), just so I can figure out how I want it to look.

[manonamora-if]

Well, well, well... Lots happened this week!

The update for Meeting the Parents is finally out! Almost two months after I thought I would be done with it...

Go play it!

My first ever IF event (that only took 14 days to organise lol) SeedComp! is online! Come participate with me in this 2-Round fun game jam!

Do you have a prompt lying around catching dust? An idea you were never able to code? A piece of code you could not include in a project? A UI mockup/code you could not use? Or a piece of music or art? Submit it as a seed and see it being nurtured by another creator!

Or come use the submitted seeds to create something new!

Check @seedcomp-if for info and announcements!

Also yes... that seed is kind of a pushed concept for the sci-fi theme template I've been working on.

Since we are talking template... Here (a.k.a. my comp seed) is a bit of a preview. It is not complete (I didn't do the Dialog Boxes for example) and definitely not easy to edit as of now. It is also not mobile compliant, maybe tabled, but def not mobile.

My plan is to strip it a bit down to an easier form, finish the dialog boxes, add the usual settings/controls, and trying to make it mobile accessible (haven't decides on the orientation yet). It will have 3 colour scheme, 3 fonts (incl. OpenDyslexic), annotated stylesheet and JavaScript, etc...

If you think I wasn't going to use my comp seed as is right now (well more edited actually), well, you're wrong :P

Coming next weekend: P-RIix : Space Trucker A Slice-of-life Sci-fi IF game about a space trucker doing a delivery.

That's what I'll be submitting to the Twine Sci-Fi Jam and the 2 Buttons Jam (because challenge :D). This past week, I have done quite a bit: coded most of the UI (duh) and mocked up the rest, plotted the story (it's a very simple one), coded part of the mechanic (if you've played Goncharov Escapes, you won't be surprised to see some thing in this one), and started writing.

I have to figure out the resource management of this thing... If I could do CSS animations, I CAN DO THAT!

Some other stuff:

The Confessions Time moved to @if-confessions. Send your IF confessions there!

The Goncharov Jam is now over so go play some Gonch games (play mine, it's fun!) !

That's it I think?

[serenfire]

twine stylesheets are kicking my ass!! i am not a programmer and yet i am trying to figure out creating custom css and importing it into harlowe. sickening.

[vael]

Minimum Knowledge Required to Use GAM3

Someone who I have some faith in recently asked about using GAM3, Tinydark's proprietary game engine, to make a game similar to Marosia with elements of Flight Rising. I'm still in stealth mode but I thought I'd offer a license, and endeavor to get them an installation running some time in December.

GAM3 is a no-code piece of software. The pitch for GAM3 is the same it was in 2013: you shouldn't need to be a programmer to make a game. Eleven years later(!), that has never been more true. But in order to achieve the flexibility required to build complex games, I have had to make features which closely resemble programming.

Here's a screenshot from the most complex thing GAM3's ever made, URPG's battle system. This is the skill Mighty Leap and what follows after this event is played, is a ton of logic smartly injected (and cached) to account for all the features that URPG's alpha combat requires.

Most events aren't nearly this complex, but if you look closely you'll see a lotta code-lookin' things. This isn't a tutorial -- that will come in 2025 -- so I'll leave it at that and proceed with detailing the minimum knowledge you'll need for a comfortable GAM3 development experience.

Programming 101

You should understand the concept of variables, conditionals such as if statements, and how to use functions. Any functions available to PHP are available to use, but there are restrictions on any functions that could be security issues.

In this (nonsensical) example, we say: if the player chose choice #2, set the variable [$foo] to the number of swords they have * 2. Next, we increase their dexterity by whatever that amount: if they have 3 swords, +6 dexterity xp.

Understand web technology: here's a cute explainer I generated with ChatGPT which analogizes web development to building a house.

Styling With CSS

Websites are styled with CSS. Each game has its own stylesheet for overrides. We're still working on making everything perfectly flexible, but you're able to customize/override anything with CSS and most colors are based in configurable variables. Right-click on anything in the game and select Inspect Element to try changing a few properties and see what happens. :}

The layout itself is configurable through CSS grid. That's a big topic, but chances are you'll be able to figure out how to move things around easily.

Regardless, rest assured Tinydark is here for a minimal (or perhaps more) level of support should you need some styling help.

Game Design

Gasp! Yes. Game design is a real discipline. Here are a few resources I recommend.

Game Design Vocabulary -- I never got to read Naomi's part, but it's a good primer.

Extra Credits -- I was thrown for a loop when I tried to find the link to EC and it turns out they rebranded the channel as Extra History. You'll have to scroll down to find the Extra Credits episodes. They were formative for me as a younger designer.

Lost Garden -- A great general resource; Dan Cook is a brilliant designer and I have a lot of respect for him and Spry Fox. I recommend looking through his posts to find any that catch your eye.

Otherwise, it's hard to say what got me to the point of confidence I have now. I've failed a lot. I've read a lot of post-mortems. I've written a lot. I'm happy to provide feedback and guidance on the design of your game as well as talk about GAM3's strengths and weaknesses.

Finally, you'll really want to learn how to write a Game Design Doc. It is absolutely critical that you get your thoughts all out on paper and get settled on design pillars, as well as how to pivot out of them and determine the risks for your game/design.

[transgenderuwo]

Bam. As you wish:

This is a temporary setup while I figure out how to make a browser extension (JSON scary, I'm just a front-end dev), and you will need to manually add entries in the meantime, but it'll do the job in the meantime. You can install the highlighting stylesheet on any browser using any style-injector extension like Stylus. Thoughts, questions, and feedback are more than welcome right now since this is just a sketch of the kind of UI/UX I'd like to have.

Unpopular/unheard opinion: Some folk with great handling of programing should go and create a Shinigami's Eyes extention for jewish people to watch out and keep eachother safe from the huge rise of antisemitism lately¿

god that would be fucking incredible.

[lucirent]

if it's not too much, would it be possible for you to reference the font you used and/or how u got the sidebar to the bottom left corner? it looks GORGEOUS and i'd love to figure out how to do it T__T. thank u for ur time!

no problem, i'm happy to help!!

with reference to the customize page

1. when i was editing this theme, the font family was Source Serif Pro, but now it's called Source Serif 4. in order to add support for special fonts you need to go to google fonts and get the URL (see below where it says "custom stylesheet url".

paste [https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap] into the custom stylesheet URL box.

then in the "use embedded css" section, any time it says font-family you need to replace whatever font family name is there with the new font family. like so (text comparison: left being the original, right being my modified version). the serif/san-serif thing after is to provide a default in case the font doesn't load properly. if you were doing this with the above URL you'd type "Source Serif 4" in that spot though!

-----

2. the sidebar will be more difficult because i made so many changes and i don't remember what did what LOL but feel free to ask me again if it's not working for you. these steps are going to be somewhat specific to recessional though and i don't know how well they would apply to a different theme...

the sidebar is controlled by the div id called "secondary"... this page might help you tell the sections apart and the tool that helps me troubleshoot is the f12 key (windows) which shows you the elements of the webpage you're on.

for the widescreen/desktop version of the layout, i fixed the secondary module to 10% page height off the bottom of the page and 3% width off the left... more info on pages like this. i usually just experiment with those numbers until they look good and test them on a few screen sizes.

i made some other changes that apply to the mobile version as well, but i added this code at the end of the secondary "section" of the css and right before the comments section (lines 599-605 are the relevant ones here).

something else i had to do to get my sidebar to work properly was change the page setup in dw to 1 column (different to what was specified in the theme install). i'm not sure why, i'm by no means a css/html expert T__T

i hope this helps and you can figure out how to customize your theme to your liking!