Magpietalon
This page is heavily under construction.
Magpietalon | |
|---|---|
| |
Biographical information | |
| Age | 32 moons |
| Pronouns | She/Her |
Affiliations | |
| Current: | ShadowClan |
Relationships | |
| Mother | Swiftcreek |
| Father | Slatestrike |
| Siblings | Rookfeather |
| Great-grandfather | Ferretmask |
| Great-granduncle | Sootcloud |
| Mentor | Shimmerstar |
Sootcloud was
Table of Contents
Subheader 1
This code has two mobile responsiveness breakpoints: one at 1000px and one at 576px. The sidebar goes on top on small screens. On desktop, you can test this by resizing the window.
Subsection 1
The table of contents is open by default. You can make it closed by default by removing the word open from the tag.
This is a static template, so you'll have to set up the table of contents on each page manually. Add an id="headername" to each header in your code, then add a corresponding link with href="#headername" to the table of contents. IDs cannot contain spaces or begin with a number.
There's no elegant way to make sub-ordered-lists appear like 1.1, 1.2, etc. in HTMLCSS. On MediaWiki sites, they just auto generate the numbers right onto the page, which is messy and not ideal for a static site. You'll have to make do with a/b/c, sorry.
Subsection 2
Most things in this code (the notice boxes, floating images, infoboxes, etc.) can be dropped into your page wherever you want with minimal issues. Just copy and paste.
Subheader 2
There are some utility classes in the CSS:
- Adding .text-center to anything centers the text
- Adding .text-big to anything makes the text big
- Adding .redlink to <a> makes it red (see above)
- See below for effect of .clear-both
Subheader 3
Make sure any <h2> elements directly under a section with a right-floating image have the class "clear-both" applied. This makes it "clear" any floating elements and appear below them, to avoid display weirdness on large screens.
(NEW) This code now contains gallery rows - see below for an example. If you're already using this theme, you can use "view page source" to grab the HTML/CSS for the gallery, and drop them into your code.
