NationStates

First things first; a gargantuan shoutout to Ponderosa and his ICONIC factbook template which this is heavily inspired by. viewtopic.php?f=23&t=256878
This template aims to bridge in having a 'skeleton' factbook with words and imagery, without worrying too much about details and complications.

Source Code -



Examples -

https://www.nationstates.net/page=dispatch/id=1238331
https://www.nationstates.net/page=dispatch/id=1198696

---

Quirks of the Code -

The Header -

Code: Select all

[center][img]https://i.imgur.com/enqQCxt.png[/img][/center][hr]


In particular, the reason why the height is set to 150 is so the factbook/dispatch will have an eye catching aesthetic when posting to the Regional Message Board.

The Animated Flags -

Code: Select all

[floatright][box][center][img]https://i.imgur.com/0kOd1gq.png[/img][hr]


My nations default flag is animated and so with that comes the dimensions of 321 x 213. You can of course resize any flag/image proportionally.

The Table of Contents -

Code: Select all

[floatleft][box][center][b][anchor=top]Table of Contents[/anchor][/b][/center][hr]1. [url=#history]History[/url]
2. [url=#geography]Geography[/url]
3. [url=#culture]Culture[/url]
4. [url=#politics]Politics[/url]
5. [url=#legislation]Legislation[/url]
6. [url=#religion]Religion[/url]
7. [url=#military]Military[/url]
8. [url=#economy]Economy[/url]
9. [url=#international]International[/url]
10. [url=#trivia]Trivia[/url]
11. [url=#miscellaneous]Miscellaneous[/url][/box][/floatleft]

[color=#feffff]
@

@

@

@

@

@

@

@

@
[/color]


There are 3 things here which provide both function and aesthetic.

The first is the

Code: Select all

[anchor=top]Table of Contents[/anchor]

This allows us to return to a set word or phrase with a click.

The second is the

Code: Select all

1. [url=#history]History[/url]

This allows us to go to a set word or phrase with a click.

The third is the

Code: Select all

[color=#feffff]
@

@

@

@

@

@

@

@

@
[/color]


Because we are using floatboxes alongside images, we use this technique to create almost 'invisible' empty spacing on our pages and to properly align the 'meat and potatoes.'

The Meat & Potatoes -

Code: Select all

[floatright][box][center]
[color=#feffff]@@[img]https://i.imgur.com/JmIvMyh.png[/img]@@
@[/color]
[/center][/box][/floatright]

[anchor=geography][size=150][b]Geography[/b][/size][/anchor][hr]

Amet justo donec enim diam vulputate ut pharetra sit. Sed adipiscing diam donec adipiscing tristique. Morbi tristique senectus et netus et malesuada fames ac. A diam sollicitudin tempor id eu nisl nunc. Orci nulla pellentesque dignissim enim sit amet. Sed blandit libero volutpat sed cras ornare arcu dui vivamus. In est ante in nibh mauris cursus mattis molestie a. Suspendisse potenti nullam ac tortor vitae purus faucibus ornare. Sed augue lacus viverra vitae congue. Eu nisl nunc mi ipsum faucibus vitae aliquet nec ullamcorper. Mattis aliquam faucibus purus in. Consectetur purus ut faucibus pulvinar elementum integer enim. Id porta nibh venenatis cras. Sem fringilla ut morbi tincidunt augue interdum velit euismod in. Ultrices tincidunt arcu non sodales neque sodales ut. Id donec ultrices tincidunt arcu non. Orci nulla pellentesque dignissim enim sit. Dui vivamus arcu felis bibendum ut tristique et. [url=#top]Top[/url]

[img]https://i.imgur.com/63sjpJK.png[/img]
[color=#feffff]
@

@

@

@
[/color]


Floatbox images will have the dimensions of 300 x 400 and category images (like Geography, Culture, Politics, etc) will have the dimensions of 800 x 200
The placeholder text is from this website: https://loremipsum.io/
And finally that 'anchor' that we set back for the 'Table of Contents' makes use of its function;

Code: Select all

[url=#top]Top[/url]


After each category, you can simply click on the phrase to return back up top, without scrolling!

---

Resources -

https://nsindex.net/wiki/List_of_stock_ ... tionStates - The iconic images of NationStates
viewtopic.php?f=15&t=404339 - Banner Resolutions (I still have yet to find that perfect custom banner dimension)
viewtopic.php?f=15&t=437857 - A thread on where exactly some of NS images were taken
https://www.nationstates.net/page=dispatch/id=219095 - Nullarni's iconic list of extremely useful sites

---

Thanks for reading. Good luck!

Edit - 2019-07-29, links to dispatch and thread added
2019-08-10, link to master factbook added, removed emojis, streamlined code
2019-10-24, changed Edit date formatting, changed title, other changes to be pending
2019-11-4, removed spoiler images, minor changes to code, variant templates in the works
2020-03-15, updated default flag size, so excited!

Keeping up with the tradition, shoutouts to;

Ivelboria
Synne_Industries

for their ICONIC factbooks which this is heavily inspired by. This Variant (v2) template has been something I have been wanting to do for several months now, to keep scrolling to a minimum.

Source Code -



Examples -
https://www.nationstates.net/page=dispatch/id=1278518
https://www.nationstates.net/page=dispatch/id=1278512

Quirks of the Code -

The Header And Main

Code: Select all

[center][img]https://i.imgur.com/uNuJIlH.png[/img][img]https://i.imgur.com/bVABq60.png[/img]


Header height set to 150 for Regional Message Board; centered text still works best, haven't quite found an optimal placement for images yet. Main width and height set to 1645 x 666.

The Hyperlinks

Code: Select all

[img]https://i.imgur.com/qO2TyCn.png[/img][img]https://i.imgur.com/Kf1BNa1.png[/img][img]https://i.imgur.com/qO2TyCn.png[/img][img]https://i.imgur.com/Kf1BNa1.png[/img][img]https://i.imgur.com/qO2TyCn.png[/img][img]https://i.imgur.com/Kf1BNa1.png[/img][img]https://i.imgur.com/qO2TyCn.png[/img][img]https://i.imgur.com/Kf1BNa1.png[/img][img]https://i.imgur.com/qO2TyCn.png[/img][img]https://i.imgur.com/Kf1BNa1.png[/img][img]https://i.imgur.com/qO2TyCn.png[/img]


Height is set to 50 while the width alternates between 150 and 149.

---

Thanks for reading. Good luck!

This is cool. Tagging for easy find. :3

Shoutouts to the ICONIC movie and game Goldeneye which this is heavily inspired by. Variant v(3) was not originally meant to be on NationStates as this was just a fun project on its own, but it works almost perfectly here.

Source Code -



Examples -
https://www.nationstates.net/page=dispatch/id=1329274
https://www.nationstates.net/page=dispatch/id=1329276

Quirks of the Code -

The Header

Code: Select all

[center][img]https://i.imgur.com/EW9ZJlB.png[/img]


Header height set to 150 for Regional Message Board. The following are both the Hyperlinks and Main area for minimum scrolling.

The Hyperlinks

Code: Select all

[img]https://i.imgur.com/hHUoHvC.png[/img][img]https://i.imgur.com/hHUoHvC.png[/img][img]https://i.imgur.com/hHUoHvC.png[/img][img]https://i.imgur.com/hHUoHvC.png[/img][img]https://i.imgur.com/hHUoHvC.png[/img][img]https://i.imgur.com/hHUoHvC.png[/img][img]https://i.imgur.com/hHUoHvC.png[/img][img]https://i.imgur.com/hHUoHvC.png[/img][img]https://i.imgur.com/hHUoHvC.png[/img][img]https://i.imgur.com/hHUoHvC.png[/img][img]https://i.imgur.com/hHUoHvC.png[/img][img]https://i.imgur.com/hHUoHvC.png[/img][img]https://i.imgur.com/hHUoHvC.png[/img][img]https://i.imgur.com/hHUoHvC.png[/img][img]https://i.imgur.com/hHUoHvC.png[/img]


Height is set to 329 while the width is set to 222.

---

Thanks for reading. Good luck!

This sounds quite impressive, now following for details on how to work dispatches out.

Shoutouts to the ICONIC app Instagram which this is heavily inspired by. Variant v(4) is made for endless scrolling! Swipers keep swiping!

Source Code -



Examples -
https://www.nationstates.net/page=dispatch/id=1426640
https://www.nationstates.net/page=dispatch/id=1426641

Quirks of the Code -

The Header

Code: Select all

[center][img]https://i.imgur.com/5TC9unK.png[/img]


Header height set to 150 for Regional Message Board.

The Instagram Header

Code: Select all

[img]https://i.imgur.com/PoELvn7.png[/img]


An optional but nice aesthetic and authentic 2020 Instagram touch. This header's height is set to 53 while the width is set to 935.

The Hyperlinks

Code: Select all

[img]https://i.imgur.com/MlFpiN7.png[/img][img]https://i.imgur.com/AuOo471.png[/img][img]https://i.imgur.com/MlFpiN7.png[/img][img]https://i.imgur.com/AuOo471.png[/img][img]https://i.imgur.com/MlFpiN7.png[/img]
[img]https://i.imgur.com/ftLmuV9.png[/img]


The picture height and width is set to 293.
The vertical spacing between the pictures height is set to 293 while the width is set to 28.
The horizontal spacing between the pictures height is set 935 while the width is set to 28.

---

Thanks for reading. Good luck!