style_system | Floating Journal Guardian (Reply)

I just popped a little creature on my journal, in the bottom left-hand corner, which follows the page as visitors read, keeping an eye out for mischief.

(little creature designed by dollarchive.neocities)

Step 1: upload your picture somewhere. Make sure it's small, and has a see through background

Step 2: display the custom 'Text' module on your layout

Step 3: in the Customise Journal > Text screen, include this code in the Text for the 'Custom Text' box:

In the past, you would create invisible boxes and containers to structure your HTML with div boxes. Modern HTML gives you options to do 'semantic html' - so instead of a generic div, you can use tags like header, nav, article and section to do essentially the same thing you do with a div, but screen readers can navigate it more easily and it's nicer to code too

dialog is a rarely used html tag, so we can sneak it in here to target in our CSS, knowing it likely won't appear anywhere else in our css. (Using id selectors didn't seem to work with dreamwidth's code-wrangler; using a div is too generic, as there are several other divs in module-content).

Step 4: go to Customise CSS and paste in the following:

.module-content dialog { position: fixed; z-index: 3; bottom: 0; right: 100%; background: none; border: none; }

This tells the browser how to display the dialog box - moving it out of the Custom Text Module and all the way over the page, where it floats over the webpage.

Step 5: check accessibility. Shrink down the browser window size and use the inspect tool or a website to see how the page looks on mobile. Ensure that it doesn't cover up text you want people to read.

If it's a problem, you can get the Guardian to disappear once the browser window goes under a certain size. Put this code (or similar) into the Customise CSS section:

@media only screen and (max-width: 600px) {.module-content dialog {display: none}}

If the browser window is 600px wide or smaller, the website won't load the Guardian image at all, as if it never existed

Ideas: What creative purposes could you put this to? An animated gif. A pixel animal that moves, reacts or changes when you hover or click on it. A link. Something practical.