Making a CSS mod

Where it goes in your mod folder

See file hierarchy

Editing tips:

  • It’s way easier to try stuff out in developer tools. Make sure you’re in developer mode, right click in the game window and select Open Developer Tools. Click the tablet and phone icon to get rid of the big honking preview window.
    • Right next to that icon is the second most important icon: select element. Hit that and click on any part of the page to select it in the editor.
    • Your edits won’t stick when the next page loads. Before that happens, copy your changes into the mod’s CSS file.
    • An easy way to find out what you’ve changed is to hit Ctrl-Shift-P, pick Show Changes, and go to the Changes tab. You’ll see all your edits collected together there.

How to specify backgrounds

The Sexy Thatcher example mod has plenty of examples of this, but the basic idea is to set the background-image on div.page_background. Enclosing div.page_background, there’s a div.page tag which can have lots of different classes that you can use to determine which background you want.

.encounter div.page_background /* in a sex scene */  
{  
    background-image: url('horrible_thatcher.png');  
}

.encounter.on_fist div.page_background /* in a sex scene, when fisting */  
{  
    background-image: url('horrible_thatcher.png');  
}

List of classes on the page tag

  • dom0_gender_f / dom0_gender_m / mtf / ftm…
Encounter partner specific

Percentages are rounded to 10 so you don’t have to write 100 rules!

  • sub0_gender_f / sub0_gender_m / mtf / ftm…
  • sub0_trust_x (attitude level)
  • sub0_arousal_x0 (percentage, i.e. sub0_arousal_50)
  • sub0_fear_x0 (percentage)
Encounter event specific

A CSS class is also added for each dialogue event that happens during the turn. This lets you set a background based on what the player chose to do. Here’s a big list of those:

  • on_encounter_start — Encounter Start

  • on_encounter_fail — Encounter Failed

  • on_arouse — General Arousal

  • on_turn — Rising horror

  • on_terrify — General Pain

  • on_orgasm — Sub orgasm

  • on_seduce_success — Seduce progress

  • on_seduce_failure — Seduce failed

  • on_reveal — Player reveal

  • on_illusion — Player illusion

  • on_ride — Player ride

  • on_caress — Player caress

  • on_suck — Player suck

  • on_lick — Player lick

  • on_finger — Player finger

  • on_handjob — Player handjob

  • on_insert — Player insert

  • on_lactate — Player lactate

  • on_vibrator — Player vibrator

  • on_living_insertion — Player implant

  • on_clamp — Player apply clamps

  • on_needle — Player apply needles

  • on_electrostim — Player apply electrostim

  • on_loosen — Sub loosen

  • on_lube — Player lube

  • on_fist — Sub fisted

  • on_tease — Player tease

  • on_sub_insert — Sub insert

  • on_sub_insert_failed — Sub refuses to insert

  • on_rimjob — Player gives rimjob

  • on_trib — Player tribs sub

  • on_tailjob — Player gives tailjob

  • on_scratch — Player scratch

  • on_titfuck — Player gives sub titfuck

  • on_titfuck_success — Titfuck effect success

  • on_sub_chastity — Chastity applied to sub

  • on_gestate — Player gestates infestation

  • on_infest_success — Sub accepts infestation

  • on_infest_failure — Sub refuses infestation

  • on_infest_start — Player physically transfers infestation

  • on_infest_trance — Infested sub entranced

  • on_infest_lust — Infested sub lust incr

  • on_infest_fear — Infested sub fear incr

  • on_question — Sub question

  • on_fap — Sub fap

  • on_grope — Sub grope

  • on_arouse_dom_first — Dom lust meter appears

  • on_dom_orgasm — Player orgasm

  • on_simultaneous_orgasm — On simultaneous orgasm

  • on_time_limit_hit — Time limit hit

  • on_seduce_shield — On seduce shield

  • on_sub_misfire — On sub spell misfire

  • on_first_illusion — On first illusion cast