Page 1 of 2

Guide to a Website Like Factbook

PostPosted: Mon Apr 10, 2017 5:18 pm
by Emerstari

Emerstari's Guide to a Website like Factbook

Original Template by Herrebrugh, Edited Template by Emerstari

Plenty of factbooks are just a few paragraphs, don't contain that much information, or are not pleasant to look at. This template developed by Herrebrugh and edited by myself will solve all of that. The factbook will catch the eye and is more than adequate at holding information. This guide is also very simple, there are only three steps. Though sure, there are other similar guides to creating factbooks that look like websites but why not give this one a chance? And before the guide begins, I have to quote Ponderosa:
Disclaimer: This guide is designed for the game side factbooks, found on your nation page. Some codes and templates do not work well on forum side factbooks, and will not work at all on sites like IIWiki. If you have any questions, please submit them in the thread here. I prefer not to receive telegrams with questions.
Contents
Step One: The First Banner
Step Two: Remainder of the Home Page
Step Three: Other tabs
Examples



Making the Home Page

The Banner
The homepage is without a doubt the most important part of the website factbooks as it is the first one people will see. As such the banner is also very important. It is the first thing people will see on the homepage.

Code: Select all
[align=center][background-block=#COLOR ONE]
[background=#COLOR TWO][color=#COLOR TWO]|[/color] [color=#COLOR ONE]Home[/color] [color=#COLOR TWO]|[/color][/background] [url=http://www.nationstates.net/page=dispatch/id=FACTBOOK URL][color=#COLOR TWO]FACTBOOK NAME[/color][/url] [color=#COLOR ONE]|[/color] [url=http://www.nationstates.net/page=dispatch/id=FACTBOOK URL][color=#COLOR TWO]FACTBOOK NAME[/color][/url] [color=#COLOR ONE]|[/color] [url=http://www.nationstates.net/page=dispatch/id=FACTBOOK URL][color=#COLOR TWO]FACTBOOK NAME[/color][/url] [color=#COLOR ONE]|[/color] [url=http://www.nationstates.net/page=dispatch/id=FACTBOOK URL][color=#COLOR TWO]FACTBOOK NAME[/color][/url] [color=#COLOR ONE]|[/color][/background-block]
[background-block=#COLOR TWO][color=#COLOR TWO]´[/color][/background-block]
[background-block=#COLOR TWO][img]IMAGE URL (900 x 200 for best results)[/img]
[color=#COLOR TWO]´[/color]
[/background-block][/align]

Instructions
  1. Code the Banner and add or subtract as many tabs as you need (Later you will need to make a dispatch for each)
  2. Pick two colors such as red and dark red
  3. Find an image to go with the banner
Raw
Code: Select all
[align=right][img]https://media.discordapp.net/attachments/306960464137420821/422872779554160640/ev7xRaI.png?width=150&height=65[/img][/align]
[floatright][url=https://www.nationstates.net/nation=factbook_puppet_of_emerstari/detail=factbook/id=743494]Versioun Emerstarian[/url][tab=4][/tab][/floatright]
[align=center][background-block=#800000]
[background=#c83737][color=#c83737]|[/color] [color=#800000]Home[/color] [color=#c83737]|[/color][/background] [url=http://www.nationstates.net/page=dispatch/id=741317][color=#c83737]General Facts and Information[/color][/url] [color=#800000]|[/color] [url=http://www.nationstates.net/page=dispatch/id=741337][color=#c83737]Visit Emerstari[/color][/url] [color=#800000]|[/color] [url=http://www.nationstates.net/page=dispatch/id=741469][color=#c83737]Government[/color][/url] [color=#800000]|[/color] [url=http://www.nationstates.net/page=dispatch/id=741572][color=#c83737]EmerNews[/color][/url] [color=#800000]|[/color][/background-block]
[background-block=#c83737][color=#c83737]´[/color][/background-block]
[background-block=#c83737][img]http://i.imgur.com/jVMBdKq.jpg[/img]
[color=#c83737]´[/color]
[/background-block][/align]

Regular
Image

If you saw the image in the upper right corner and said, "I wonder if I could do that?" If you did, you can find the instructions below. You can also make the factbook available in different languages if you wish to do so, I will have the code below, as well. However, I took those out of the code from earlier for the sake of simplicity. Note that these go before the banner's main code.
Code: Select all
[align=right][img]IMAGE[/img][/align]
[floatright][url=FACTBOOK IN THAT LANGUAGE]LANGUAGE[/url][tab=4][/tab][/floatright]


Remainder of the Main Page
So far all of this has just been about the banner of the homepage but now we're finishing up the homepage and will teach you how to make other pages in the subsequent steps.

Code: Select all
[font=FONT][size=SIZE]Welcome[/size][/font]

PARAGRAPH ABOUT THE FACTBOOK

Feel free to click on the tabs at the top of your screen:

"NAME OF PAGE" (DESCRIPTION OF PAGE);
"NAME OF PAGE" (DESCRIPTION OF PAGE);
"NAME OF PAGE" (DESCRIPTION OF PAGE);
"NAME OF PAGE" (DESCRIPTION OF PAGE).

[font=FONT][size=SIZE]NATION - YEAR[/size][/font]
[b]DATE 1[/b] - RECENT EVENT 1
[b]DATE 2[/b] - RECENT EVENT 2
[b]DATE 3[/b] - RECENT EVENT 3
[b]DATE 4[/b] - RECENT EVENT 4
[b]DATE 5[/b] - RECENT EVENT 5
[b]DATE 6[/b] - RECENT EVENT 6
[b]DATE 7[/b] - RECENT EVENT 7
[b]DATE 8[/b] - RECENT EVENT 8
[b]DATE 9[/b] - RECENT EVENT 9
[hr]
[font=sitka heading]Original Template by: [nation]Herrebrugh[/nation][floatright]Guide Found Here:
https://forum.nationstates.net/viewtopic.php?f=23&t=408860[/floatright]
Guide and Edited Template by: [nation]Emerstari[/nation][/font]

Instructions
  1. Code all of it
  2. Fill in the blanks

Another optional addition is to fill in the blank space on the right side of the page. There are many ways you can do this but below will be an example and two possible ideas. Note that this would be below the banner code but prior to the body of the homepage.
- Your nation's national anthem (As Herrebrugh and I did)
- Basic information about your nation such as its leader or the date it was founded
Code: Select all
[floatright][box][font=FONT][/font][/box][/floatright]



Other Tabs


Making Other Tabs
This step depends on whether you decide to have two tabs or fifteen. It is easy to do but also easy to mess up at the same time, so read carefully.

Code: Select all
[align=center][background-block=#COLOR ONE]
[color=#COLOR TWO]|[/color] [url=http://www.nationstates.net/page=dispatch/id=FACTBOOK URL][color=#COLOR TWO]Home[/color][/url] [color=#COLOR TWO]|[/color] [background=#COLOR TWO][color=#COLOR ONE]FACTBOOK NAME[/color][/background] [color=#COLOR ONE]|[/color] [url=http://www.nationstates.net/page=dispatch/id=FACTBOOK URL][color=#COLOR TWO]FACTBOOK NAME[/color][/url] [color=#COLOR ONE]|[/color] [url=http://www.nationstates.net/page=dispatch/id=FACTBOOK URL][color=#COLOR TWO]FACTBOOK NAME[/color][/url] [color=#COLOR ONE]|[/color] [url=http://www.nationstates.net/page=dispatch/id=FACTBOOK URL][color=#COLOR TWO]FACTBOOK NAME[/color][/url] [color=#COLOR ONE]|[/color][/background-block]
[background-block=#COLOR TWO][color=#COLOR TWO]´[/color][/background-block]
[background-block=#COLOR TWO][img]IMAGE URL (900 x 200 for best results)[/img]
[color=#COLOR TWO]´[/color]
[/background-block][/align]

Instructions
  1. Create a new factbook for the tab
  2. Code the banner
  3. Find an image for the banner
  4. Make the body

As you can see the area where the tabs are, the tab called "Home" looks different than it did on the homepage's banner. As this is a different factbook, there is a link to home. You take the link away when it is that tab's factbook. I know that is sounds a little complicated but it should be very simple to change it so I will let you learn how to change it yourself.


Examples


Tagged!

PostPosted: Wed Apr 12, 2017 3:49 pm
by TURTLESHROOM II
Tagged! Dude, this is incredible, I would really like to make a Factbook like this some day.

PostPosted: Wed Apr 12, 2017 3:57 pm
by Emerstari
TURTLESHROOM II wrote:Tagged! Dude, this is incredible, I would really like to make a Factbook like this some day.


Thanks! If you have any questions you can ask me on this thread, I prefer not to receive telegrams. Or, you can contact the original template creator, Herrebrugh.

PostPosted: Sat Jun 02, 2018 5:50 am
by The Kazakh Autonomous Soviet Republic
Wow! :clap:
This is one of the best factbooks I've seen.
I've made one and tagged you too.
Please see and please give any suggestions to improve it.

My factbook - https://www.nationstates.net/nation=the ... id=1037883

:)

PostPosted: Sat Jun 02, 2018 6:04 am
by Asahi
wow looking nice! I want to use this code for my factbook informations

PostPosted: Mon Jun 04, 2018 3:50 pm
by Khataiy
Tag

PostPosted: Mon Jun 04, 2018 6:48 pm
by Ankuran
Looks super nice. Definitely saving this for things to play around with later.

PostPosted: Mon Jun 04, 2018 9:35 pm
by Old Beringia
This is an incredible guide. Very well put together. I'm surprised this didn't get more attention.

PostPosted: Mon Jun 04, 2018 9:37 pm
by Kyrusia
Old Beringia wrote:This is an incredible guide. Very well put together. I'm surprised this didn't get more attention.

It was added to the Welcome Thread; hopefully, now it will.

Speaking of: well done, Emerstari.

PostPosted: Tue Jun 05, 2018 8:50 pm
by The Void Territories
Saving this for later use! Very cool!

PostPosted: Thu Aug 02, 2018 2:53 pm
by Emerstari
I haven't been on the forum for awhile so didn't see all of this though I edited the guide so it should be neater and easier to follow. I also edited the template slightly to, in my opinion, make it look a little better. Thanks for all the compliments!
Kyrusia wrote:
Old Beringia wrote:This is an incredible guide. Very well put together. I'm surprised this didn't get more attention.

It was added to the Welcome Thread; hopefully, now it will.

Speaking of: well done, Emerstari.

And thank you for adding it to the Welcome Thread, Kyrusia, it was incredible seeing it there.

PostPosted: Wed Jan 09, 2019 6:03 pm
by Epic Fail
Thanks for making this! super useful

PostPosted: Mon Jan 14, 2019 10:16 am
by Hystaria
So these are in our fact books or?

PostPosted: Tue Jan 15, 2019 11:18 am
by Silver Commonwealth
Thanks! Helped me a lot to revamp my facbooks. ^.^

PostPosted: Mon Jul 13, 2020 12:25 pm
by Romextly
tag

Wow

PostPosted: Mon Jan 11, 2021 11:03 am
by Sierra Grand
This
is
just
beautiful

PostPosted: Sun Jul 11, 2021 2:50 pm
by Nigeriao Kingdom
Emerstari wrote:
Emerstari's Guide to a Website like Factbook

Original Template by Herrebrugh, Edited Template by Emerstari

Plenty of factbooks are just a few paragraphs, don't contain that much information, or are not pleasant to look at. This template developed by Herrebrugh and edited by myself will solve all of that. The factbook will catch the eye and is more than adequate at holding information. This guide is also very simple, there are only three steps. Though sure, there are other similar guides to creating factbooks that look like websites but why not give this one a chance? And before the guide begins, I have to quote Ponderosa:
Disclaimer: This guide is designed for the game side factbooks, found on your nation page. Some codes and templates do not work well on forum side factbooks, and will not work at all on sites like IIWiki. If you have any questions, please submit them in the thread here. I prefer not to receive telegrams with questions.
Contents
Step One: The First Banner
Step Two: Remainder of the Home Page
Step Three: Other tabs
Examples



Making the Home Page

The Banner
The homepage is without a doubt the most important part of the website factbooks as it is the first one people will see. As such the banner is also very important. It is the first thing people will see on the homepage.

Code: Select all
[align=center][background-block=#COLOR ONE]
[background=#COLOR TWO][color=#COLOR TWO]|[/color] [color=#COLOR ONE]Home[/color] [color=#COLOR TWO]|[/color][/background] [url=http://www.nationstates.net/page=dispatch/id=FACTBOOK URL][color=#COLOR TWO]FACTBOOK NAME[/color][/url] [color=#COLOR ONE]|[/color] [url=http://www.nationstates.net/page=dispatch/id=FACTBOOK URL][color=#COLOR TWO]FACTBOOK NAME[/color][/url] [color=#COLOR ONE]|[/color] [url=http://www.nationstates.net/page=dispatch/id=FACTBOOK URL][color=#COLOR TWO]FACTBOOK NAME[/color][/url] [color=#COLOR ONE]|[/color] [url=http://www.nationstates.net/page=dispatch/id=FACTBOOK URL][color=#COLOR TWO]FACTBOOK NAME[/color][/url] [color=#COLOR ONE]|[/color][/background-block]
[background-block=#COLOR TWO][color=#COLOR TWO]´[/color][/background-block]
[background-block=#COLOR TWO]([url=IMAGE URL (900 x 200 for best results)]Image[/url])
[color=#COLOR TWO]´[/color]
[/background-block][/align]

Instructions
  1. Code the Banner and add or subtract as many tabs as you need (Later you will need to make a dispatch for each)
  2. Pick two colors such as red and dark red
  3. Find an image to go with the banner
Raw
Code: Select all
[align=right]([url=https://media.discordapp.net/attachments/306960464137420821/422872779554160640/ev7xRaI.png?width=150&height=65]Image[/url])[/align]
[floatright][url=https://www.nationstates.net/nation=factbook_puppet_of_emerstari/detail=factbook/id=743494]Versioun Emerstarian[/url][tab=4][/tab][/floatright]
[align=center][background-block=#800000]
[background=#c83737][color=#c83737]|[/color] [color=#800000]Home[/color] [color=#c83737]|[/color][/background] [url=http://www.nationstates.net/page=dispatch/id=741317][color=#c83737]General Facts and Information[/color][/url] [color=#800000]|[/color] [url=http://www.nationstates.net/page=dispatch/id=741337][color=#c83737]Visit Emerstari[/color][/url] [color=#800000]|[/color] [url=http://www.nationstates.net/page=dispatch/id=741469][color=#c83737]Government[/color][/url] [color=#800000]|[/color] [url=http://www.nationstates.net/page=dispatch/id=741572][color=#c83737]EmerNews[/color][/url] [color=#800000]|[/color][/background-block]
[background-block=#c83737][color=#c83737]´[/color][/background-block]
[background-block=#c83737]([url=http://i.imgur.com/jVMBdKq.jpg]Image[/url])
[color=#c83737]´[/color]
[/background-block][/align]

Regular
(Image)

If you saw the image in the upper right corner and said, "I wonder if I could do that?" If you did, you can find the instructions below. You can also make the factbook available in different languages if you wish to do so, I will have the code below, as well. However, I took those out of the code from earlier for the sake of simplicity. Note that these go before the banner's main code.
Code: Select all
[align=right]([url=IMAGE]Image[/url])[/align]
[floatright][url=FACTBOOK IN THAT LANGUAGE]LANGUAGE[/url][tab=4][/tab][/floatright]


Remainder of the Main Page
So far all of this has just been about the banner of the homepage but now we're finishing up the homepage and will teach you how to make other pages in the subsequent steps.

Code: Select all
[font=FONT][size=SIZE]Welcome[/size][/font]

PARAGRAPH ABOUT THE FACTBOOK

Feel free to click on the tabs at the top of your screen:

"NAME OF PAGE" (DESCRIPTION OF PAGE);
"NAME OF PAGE" (DESCRIPTION OF PAGE);
"NAME OF PAGE" (DESCRIPTION OF PAGE);
"NAME OF PAGE" (DESCRIPTION OF PAGE).

[font=FONT][size=SIZE]NATION - YEAR[/size][/font]
[b]DATE 1[/b] - RECENT EVENT 1
[b]DATE 2[/b] - RECENT EVENT 2
[b]DATE 3[/b] - RECENT EVENT 3
[b]DATE 4[/b] - RECENT EVENT 4
[b]DATE 5[/b] - RECENT EVENT 5
[b]DATE 6[/b] - RECENT EVENT 6
[b]DATE 7[/b] - RECENT EVENT 7
[b]DATE 8[/b] - RECENT EVENT 8
[b]DATE 9[/b] - RECENT EVENT 9
[hr]
[font=sitka heading]Original Template by: [nation]Herrebrugh[/nation][floatright]Guide Found Here:
https://forum.nationstates.net/viewtopic.php?f=23&t=408860[/floatright]
Guide and Edited Template by: [nation]Emerstari[/nation][/font]

Instructions
  1. Code all of it
  2. Fill in the blanks

Another optional addition is to fill in the blank space on the right side of the page. There are many ways you can do this but below will be an example and two possible ideas. Note that this would be below the banner code but prior to the body of the homepage.
- Your nation's national anthem (As Herrebrugh and I did)
- Basic information about your nation such as its leader or the date it was founded
Code: Select all
[floatright][box][font=FONT][/font][/box][/floatright]



Other Tabs


Making Other Tabs
This step depends on whether you decide to have two tabs or fifteen. It is easy to do but also easy to mess up at the same time, so read carefully.

Code: Select all
[align=center][background-block=#COLOR ONE]
[color=#COLOR TWO]|[/color] [url=http://www.nationstates.net/page=dispatch/id=FACTBOOK URL][color=#COLOR TWO]Home[/color][/url] [color=#COLOR TWO]|[/color] [background=#COLOR TWO][color=#COLOR ONE]FACTBOOK NAME[/color][/background] [color=#COLOR ONE]|[/color] [url=http://www.nationstates.net/page=dispatch/id=FACTBOOK URL][color=#COLOR TWO]FACTBOOK NAME[/color][/url] [color=#COLOR ONE]|[/color] [url=http://www.nationstates.net/page=dispatch/id=FACTBOOK URL][color=#COLOR TWO]FACTBOOK NAME[/color][/url] [color=#COLOR ONE]|[/color] [url=http://www.nationstates.net/page=dispatch/id=FACTBOOK URL][color=#COLOR TWO]FACTBOOK NAME[/color][/url] [color=#COLOR ONE]|[/color][/background-block]
[background-block=#COLOR TWO][color=#COLOR TWO]´[/color][/background-block]
[background-block=#COLOR TWO]([url=IMAGE URL (900 x 200 for best results)]Image[/url])
[color=#COLOR TWO]´[/color]
[/background-block][/align]

Instructions
  1. Create a new factbook for the tab
  2. Code the banner
  3. Find an image for the banner
  4. Make the body

As you can see the area where the tabs are, the tab called "Home" looks different than it did on the homepage's banner. As this is a different factbook, there is a link to home. You take the link away when it is that tab's factbook. I know that is sounds a little complicated but it should be very simple to change it so I will let you learn how to change it yourself.


Examples



This is terrible when I tried I did not work except from the home page

PostPosted: Wed Sep 07, 2022 4:27 pm
by North Macaronesa
I know this thread is long dead, but if you could answer this question that would be awesome!

In the banner, when I try to upload a 900 x 200 image (like recommended), it only takes up the middle portion of the banner, unlike the example. If you could troubleshoot this, that would be great! Thank you in advance!

Edit: I tried different crops for the photos (1200 x 300), but it still comes out like that.

PostPosted: Sun Sep 25, 2022 1:23 pm
by Emerstari
North Macaronesa wrote:I know this thread is long dead, but if you could answer this question that would be awesome!

In the banner, when I try to upload a 900 x 200 image (like recommended), it only takes up the middle portion of the banner, unlike the example. If you could troubleshoot this, that would be great! Thank you in advance!

Edit: I tried different crops for the photos (1200 x 300), but it still comes out like that.


I apologize that I don't really remember all the details of this guide anymore, but I'll do what I can to help. If it's not too much trouble, you can send over the code, and I can play around with it. Hopefully we'll see what's the matter.

PostPosted: Mon May 29, 2023 4:23 pm
by Casodium
Tag.

PostPosted: Mon May 29, 2023 4:25 pm
by Wizlandia
Tagged.

PostPosted: Mon May 29, 2023 4:28 pm
by Senscaria
Tagged.

PostPosted: Mon May 29, 2023 4:28 pm
by DutchFormosa
Also tagged.

PostPosted: Wed May 31, 2023 9:25 pm
by Bagiyagaram
Tag.

PostPosted: Fri Nov 17, 2023 1:50 pm
by Kaskalma
https://www.nationstates.net/nation=kas ... id=1802517

I’m currently working on this, it’s largely inspired by gov.uk and us.gov, I also got some help from great altera. The only question I have is where to go from here. I don’t know what the rest of the page should look like. I’d like it to be functional, yet simultaneously good looking and fairly unique. Any ideas?