I am a twine 1.4.2 user with subgarcube 2.14. I am currently making a game and wanted to make a custom interface. I found several posts hinting that it's quite feasible and easy with a bit of planning (https://www.glorioustrainwrecks.com/node/5163
or even better http://twinery.org/forum/discussion/1654#msg4168
What I had in mind: a multi panel interface. 2 panels displaying pictures (character & locations), 1 panel to display locations navigation (exists) and the main passage text for location/character interaction. When the player select a link, the twine passage is displayed in the main passage text part and variables are updated to display new pictures in the other panels if needed.
After some investigation it seemed better to use a flexbox model (my css and html knowdlege is quite limited). I made a prototype with nested flexbox looking like this:
<div class="ex2">Movement layout</div>
<div class="portrait">This is the portrait</div>
<div class="ImagePassage">This is the location image</div>
<div class="textpassage">this is the UI text</div>
The flexcol/flextoprow are flex with either column or row direction. I tested it outside of twine to check the basic layout.
I added the css in my twine stylesheet and added the div in my storyCaption passage. Two things aren't working as expected: the panels are displayed in the passage and I don't display the passage in the textpassage of my UI. I read in TheMadExile post about creating storyregion (?) and using <<replace>> with the whole passage, is this my best option?