Board Thread:Support Requests - Getting Technical/@comment-1807002-20150930004852/@comment-4731443-20150930055007

Centering the title and using an image to replace the control link can be achieved by using the remote Toggle button feature for collapsible elements. I've updated my demo to use each entire header as a toggle. You'll see each div now has an id like "mw-customcollapsible-Islands" and the following header has a corresponding class (e.g. "mw-customtoggle-Islands").

You can then add an image next to the title text to act as a button if you like; since it's added next to the text, the centering will now be more properly aligned. Note that clicking the image or anywhere else in the header makes no difference if the "mw-customtoggle-xx" class is on the header itself. I put a demonstration on Characters where the mw-customtoggle-Characters class is placed on a span that contains the image; this way, only the image toggles the display (you could also place the text in that span). You can compare with Harvesters where no distinction is made for the image.

Changing link color can be done with this syntax:. I put a demonstration on Islands.

Curved tables are definitely not an issue, I just omitted the border-radius on the demo for simplicity. I've now updated it to use the same values as th's in your "basicTable" tables.

As for spacing the images, that would best be achieved using a custom CSS class to apply to your collapsible-content divs. Suppose navbox-images: .navbox-images img { margin-right: 3px; margin-bottom: 3px; } Any div using the class "navbox-images" would add 3 pixels to the right and bottom of all images it contains. You can adjust those values to your liking. I've added the class to Mills so you can see the result if you add that CSS rule to your custom CSS.