CIT Forum Index

Support => Tutorials and Guides => Forum Guides => Topic started by: Cherry on 31 01, 2014, 02:48:17 pm

Title: Cherry's subboard designing guide
Post by: Cherry on 31 01, 2014, 02:48:17 pm
(http://i.imgur.com/iIyhTQx.png)
Last updated: 31st of January, 2014


Heya reader,

as you might know, my name is Cherry. One of my passions is design and over the past few months people asked me how to make their subboard 'complete'. This can be making it look as one piece, a design that flows through out the entire board with things like a colour scheme and a recurring logo, as well as making sure that everything is in the right place.

And I know this can be a bit hard. So, I would like to help you organise it a bit. This guide is for everyone who plans to have a subboard in the future, or already has one but isn't quite sure how to style it.



(http://i.imgur.com/7yrL9XU.png)


(http://i.imgur.com/NI6xEx8.png)

Before you begin designing, there are a few things that you should do to keep track of what you're doing.



(http://i.imgur.com/MF6Y9mT.png)

Creating an unique style isn't as hard as you think. Sure, you can look at other people their work and use it as an example, but don't take it too far.

I always start with writing down fonts I like and try them out. For example I write down "Header" and check which header really fits me, my group and my members.
(http://i.imgur.com/ecG5aIW.png)

Above are a few fonts that might have caught your eye. I've written their names below them. But of course, here are the links for people who'd like to have them.
Show content
(http://i.imgur.com/zJ39vem.png) - Arual (http://www.dafont.com/arual.font?text=Cherry%27s+designing+guide)
(http://i.imgur.com/aW5CXy4.png) - Aubrey (http://www.dafont.com/aubrey.font?text=Cherry%27s+designing+guide)
(http://i.imgur.com/wRIgjJe.png) - Be there soon (http://www.dafont.com/be-there-soon.font?text=Cherry%27s+designing+guide)
(http://i.imgur.com/M6QTh8D.png) - Café & brewery (http://www.dafont.com/cafe-brewery.font?text=Cherry%27s+designing+guide)
(http://i.imgur.com/j0Cci8F.png) - Channel (http://www.dafont.com/channel.font?text=Cherry%27s+designing+guide)
(http://i.imgur.com/8hJ3UMW.png) - Disco Diva (http://www.dafont.com/disco-diva.font?text=Cherry%27s+designing+guide)
(http://i.imgur.com/yucpBzh.png) - Jellyka Saint-Andrew's Queen (http://www.dafont.com/jellyka-saint-andrews-queen.font?text=Cherry%27s+designing+guide)
(http://i.imgur.com/KSWU8mY.png) - Bonus (http://www.dafont.com/bonus.font?text=Cherry%27s+designing+guide)


There might be no font written above that you like. In that case you can try a free website like Dafont (http://dafont.com[/url). It has many fonts that are free and good to use. Once you've mildly got an idea what you should do with fonts, you should pick a general style that most of your topics will be in. The most popular one at the moment is the table style as can be seen here (http://i.imgur.com/sTcOF8E.png). Many people think that this is hard to make, but I personally find it very easy! I always use this format

Code: [Select]
[img]LINK TO YOUR IMAGE HERE[/img]
OPTIONAL SLOGAN HERE
[hr]
[table]

[tr]
[td]
This is the left colomn
[/td]
[td]                                                        [/td]
[td]
This is the middle colomn!
[/td]
[td]                                                        [/td]
[td]
This is the right colomn!
[/td][/tr][/table]

Things for at the bottom which shouldn't be in a table

As you can see: the more tables, the more colomns! When you first press the table button above you'll have an odd format like:

[table ]
[tr ]
[td ][ /td]
[ /tr]
[ /table]

This can be extremely confusing when you don't know what to do. Basically, to get a colomn you keep the table and /table, these are what define the whole thing. Then to get your first colomn you write [ tr ], without spaced of course, and [ td ]. After this you fill your first colomn with whatever you want! When you want a second colomn, write [ /td ] and then
again for the new one. And then the list goes on. Of course, you may also copy it from my code and then replace the text with yours and if you prefer, add colomns or remove them ;)

But there are more things in life as tabled topics. Normal ones will do just fine as well. You can mix it up by using the BBcode buttons above. You can add subtexts or things on the
right.
Whatever you want! You're the artist here and you are the one who decides what should happen next.



To be updated
Title: Re: Cherry's subboard designing guide
Post by: BoDy on 31 01, 2014, 02:55:16 pm
This's epic :')
Title: Re: Cherry's subboard designing guide
Post by: Cherry on 31 01, 2014, 02:59:13 pm
This's epic :')

I r epic hh
Title: Re: Cherry's subboard designing guide
Post by: Bl3nd on 31 01, 2014, 03:00:50 pm
So, I shouldn't take others opinion? :'(
Title: Re: Cherry's subboard designing guide
Post by: Cherry on 31 01, 2014, 03:16:29 pm
There are also some cool things that are used when making a roster or something, [abbr=text here]TEXT[/abbr] and the result is TEXT. (Move your mouse to the text). Add it if you want, but it's complicated.

I'm adding it later, this topic is faaaaaaaaaaaar from done ;)
Title: Re: Cherry's subboard designing guide
Post by: Kaka on 31 01, 2014, 03:17:09 pm
 :-* :-* :-* :-* :-* :-* :-* :-* :-* :-* :-* :-* :-* :-* :-* :-* :-* :-* :-* :-* :-* :-* :-* :-* :-* :-* :-* :-* :-* :-* :-* :-* :-*
Title: Re: Cherry's subboard designing guide
Post by: Cherry on 31 01, 2014, 03:21:11 pm
:-* :-* :-* :-* :-* :-* :-* :-* :-* :-* :-* :-* :-* :-* :-* :-* :-* :-* :-* :-* :-* :-* :-* :-* :-* :-* :-* :-* :-* :-* :-* :-* :-*

Best avatar ever  :-* :-* :-* :-* :-* :-* :-* :-*
Title: Re: Cherry's subboard designing guide
Post by: VazZ on 31 01, 2014, 03:21:52 pm
gud guyd
Title: Re: Cherry's subboard designing guide
Post by: Cherry on 31 01, 2014, 03:27:16 pm
I feel so at home
Title: Re: Cherry's subboard designing guide
Post by: Kaka on 31 01, 2014, 03:28:32 pm
I feel so at home
Nice signature hh
Title: Re: Cherry's subboard designing guide
Post by: Cherry on 31 01, 2014, 03:29:37 pm
Nice signature hh

Hh, thanks

/me flips hair

 :-* :-*
Title: Re: Cherry's subboard designing guide
Post by: Cherry on 31 01, 2014, 03:35:58 pm
Good job, I was looking for those fonts,  :-*.

 :-* :-* Fonts are everything, tbh. When I lost my harddisk I lost thousands of fonts. Only have like 300 now  :fp:
Title: Re: Cherry's subboard designing guide
Post by: Pilovali on 01 02, 2014, 11:53:58 am
Epic topic, dear Cherry.
I don't like you profile pic because you na-aapt Kaka and Vazz.
Title: Re: Cherry's subboard designing guide
Post by: Pilovali on 01 02, 2014, 01:23:34 pm
I want a double cheeseburger, with medium french fries, large coke, and sour sausages.
+1
Title: Re: Cherry's subboard designing guide
Post by: Cherry on 01 02, 2014, 08:49:57 pm
Ok, and a milkshake as well? I like vanilla milkshake :-[
Title: Re: Cherry's subboard designing guide
Post by: Claire on 02 02, 2014, 12:23:27 pm
Awesome tutorial!  :D

The only thing bothered me about simpleportal is this shit only providing 10 default fonts and all of them are like boring office style (Like Times New Roman, Arial, blabla). As you say, font is everything. :( Yes, we can use custom fonts as images to replace headers or whatever, but the paragraph is still remain "normal". And normal isn't good.

Plus, most people use Windows and its default ClearType system is a piece of shit. The paragraph looks horrible on all browsers, especially Firefox. (That's why I use Mac except for playing games) It'd be good if we can use Roboto Light 300 for normal paragraph as it is already good even without ClearType. Maybe you as a staff can suggest it to be added? hh :P

I personally use Gimp & Inkscape over the elitist Adobe products. There are so many features that we barely use on Photoshop/Illustrator and those features are the only things that make it expensive. As a "person who design", Gimp is better because it provides wider use of extensions, smaller file size as result, and effective features. I can only see Adobe products are perfect only for company use. (As they need further technical support, more functions, and Adobe has that.) :P Just saying that because it's a waste to spend +$600 for an application that you don't really need that much, and piracy is bad. Very bad..

For making BBcode table, it's always been confusing if you're not used with codes (even with Notepad++ help) This BBcode table generator (http://www.teamopolis.com/tools/bbcode-table-generator.aspx) is pretty cool though. :P
Title: Re: Cherry's subboard designing guide
Post by: Cherry on 02 02, 2014, 12:39:02 pm
I like normal though. And piracy is good. Pirate FTW!
Title: Re: Cherry's subboard designing guide
Post by: Claire on 02 02, 2014, 12:47:26 pm
:Okay:
Show content
(http://static.fjcdn.com/pictures/support_8b0338_454635.jpg)
(http://www.dailygossip.org/media/posts/3507-400x285.jpg)
Title: Re: Cherry's subboard designing guide
Post by: Ghost05 on 02 02, 2014, 01:04:17 pm
OMG this is ( ͡° ͜ʖ ͡°)ing AWESOME!!
Title: Re: Cherry's subboard designing guide
Post by: Cherry on 02 02, 2014, 03:14:47 pm
OMG this is ( ͡° ͜ʖ ͡°)ing AWESOME!!


Keep calm and ( ‾ʖ̫‾) on
Title: Re: Cherry's subboard designing guide
Post by: VazZ on 03 02, 2014, 11:28:21 pm
AHAHHAHA so funny AHAHHAHA

(http://i.imgur.com/hSLhTVW.png)
Title: Re: Cherry's subboard designing guide
Post by: Cherry on 04 02, 2014, 12:59:40 am
Hahahahah
Title: Re: Cherry's subboard designing guide
Post by: VazZ on 04 02, 2014, 01:03:35 am
Keep
Calm
And
Lenny
On
Title: Re: Cherry's subboard designing guide
Post by: Cherry on 29 12, 2014, 01:25:05 am
Unlocked because I occasionally go here when I need a perfect table format  (◔◡◔) <3
Title: Re: Cherry's subboard designing guide
Post by: KakCraft on 29 12, 2014, 09:38:47 am
Unlocked because I occasionally go here when I need a perfect table format  (◔◡◔) <3

lmao
Title: Re: Cherry's subboard designing guide
Post by: Dredd on 01 02, 2015, 06:08:19 pm
I want a double cheeseburger, with medium french fries, large coke, and sour sausages.

Lel, nice guide cherry
Title: Re: Cherry's subboard designing guide
Post by: guest38431 on 06 04, 2015, 12:20:28 pm
Nice guide , it really helped me designing a topic, thanks
Title: Re: Cherry's subboard designing guide
Post by: iMeMPlayZ on 29 03, 2017, 12:41:21 pm
helpfull guide  :thumb:
Title: Re: Cherry's subboard designing guide
Post by: Cherry on 29 03, 2017, 01:07:16 pm
I should update this.
Title: Re: Cherry's subboard designing guide
Post by: Rexion on 29 03, 2017, 03:16:01 pm
I should update this.

Yes it will be better you can put the some designing website and even adding video or written tutorial of designing subboards.
Title: Re: Cherry's subboard designing guide
Post by: MakO on 07 09, 2017, 02:45:55 pm
You can also add [nobbc][/nobbc] in
part instead of adding space so for example
[table]
[tr]
[Td]
[/table]
Title: Re: Cherry's subboard designing guide
Post by: iShadow on 18 09, 2017, 02:04:15 pm
Thank you for this guide, Cherry, I will use something from your guide. I remember, when I was newbie and didn't understand what to do here xD
Alot of topics and such things that I didn't understand and ignore... My biggest shame was when I apply for Hobos in Russian language with incorrect format... There were a good times xD
Title: Re: Cherry's subboard designing guide
Post by: Iron_Heart on 17 01, 2018, 09:30:23 am
I just want to know uses of some BB codes
thx in advance
table
and td
and tr
Title: Re: Cherry's subboard designing guide
Post by: Thunder on 21 04, 2020, 11:02:09 am

MY GUIDE
Boards/Topics:
First, you should know how to use this panel very well
Show content
(https://i.imgur.com/yy7lOJp.png)
, and this is a guide to explain the purpose of all tools in the panel and how to use it "click here (https://cit.gg/index.php?topic=273627.msg4051227#msg4051227)".
Second, after knowing the purpose for all tools in the panel, then you can use them without looking at the panel by using the direct commands and tags and to know it you should visit this guide "click here (https://cit.gg/index.php?topic=211019.msg3129716#msg3129716)".

How to design a topics ?
  • You should design a logo for the topic and put it in the upper section in the topic, if you design for group, then you should know the official color for the group and use it in the logo and text...etc.
  • Choose the fonts that you will use in the logo and topic, you can see the preview of all fonts in the following sites
    Fonts for topic: Here (https://www.hostinger.com/tutorials/best-html-web-fonts)
    Fonts for logo: Here (http://wavian.com/font-list.html#top)
  • You can make a texture under the main logo to make the visitors the purpose of the topic.
    For example: You can type on the texture "Homepage".
    Try to use a small shadow under the text and strokes around it.
  • You can use glow effect in the main titles in the topic, you can use shadow too in the whole text or in the first letter only.
Adding image or hyperlink are easy processes, so let's learn how to design something professional like tables:
Show content
There is two kind of tables in BB codes.

First kind is like that
Show content
https://cit.gg/index.php?topic=348881.0
>
Show content
(https://i.pilo.ovh/images/huPx7.png)
As you see everything is straight and each section is next to the other section (Organised Table)

First kind of tables: (ORGANIZED)
It content many row codes
because you don't add all the information in the first section with the head title of the section.
the column information stated in a rows
If you are making a table about vehicles and you want to add the information about the section of planes, then you will make a new row to add them not with the head title section (Planes).
General Code:
Code: [Select]
[table]
[tr]
[td]Cars[/td]
[td]     [/td]
[td]Planes[/td]
[td]     [/td]
[td]Heavy Vehicles[/td]
[td]     [/td]
[td]Boats[/td]
[/tr][tr][td][hr][/td][td]     [/td][td][hr][/td][td]     [/td][td][hr][/td][td]     [/td][td][hr][/td][td][/tr]
[tr]
[td]Fast: Banshee[/td]
[td]     [/td]
[td]Fast: Hydra[/td]
[td]     [/td]
[td]Fast: DFT-900[/td]
[td]     [/td]
[td]Fast: Refeer
& Dinghy[/td]
[/tr][tr][td][hr][/td][td]     [/td][td][hr][/td][td]     [/td][td][hr][/td][td]     [/td][td][hr][/td][td][/tr]
[tr]
[td]Heavy: Infernus[/td]
[td]     [/td]
[td]Pilot Job: Shamal
& Andromada[/td]
[td]     [/td]
[td]Trucker job: DFT-900[/td]
[td]     [/td]
[td]Fisherman job: Dinghy[/td]
[/tr][tr][td][hr][/td][td]     [/td][td][hr][/td][td]     [/td][td][hr][/td][td]     [/td][td][hr][/td][td][/tr]
[/table]

Preview:
(https://i.pilo.ovh/images/hu9yO.png)

The second kind of tables:
The column information stated in the same column.
General Code:
Code: [Select]
[table]
[tr]
[td]Cars[hr]
Fast: Banshee[hr]
Heavy: Infernus[hr][/td]
[td]     [/td]
[td]Planes[hr]
Fast: Hydra[hr]
Pilot Job: Shamal
& Andromada[hr][/td]
[td]     [/td]
[td]Heavy Vehicles[hr]
Fast: DFT-900[hr]
Trucker Job: DFT-900[hr][/td]
[td]     [/td]
[td]Boats[hr]
Fast: Refeer
& Dinghy[hr]
Fisherman Job: Dinghy[hr][/td]
[td]     [/td]
[/tr]
[/table]

Preview:
(https://i.pilo.ovh/images/huiPK.png)


Let's design a topic NOW?!
For example I will design a homepage for a squad, so I must collect some info about the squad:
Step 1: Squad Name, Color, Original Founder, Current Founders, Current Leaders, Skins Shaders, Car Shaders, Motto, Discord.
Show content
The Information that I collected:
Name: Imperials
Original Founder: ThunDer
Current Founder: ThunDer
Current Leaders: LawLiet, Sultan
Motto: Give Me More
Color: 255 164 175
Skin Shaders: N/A
Car Shaders: N/A
Discord: Soon.

Step 2: Design a logo and use squad color
Show content
(https://c.top4top.io/p_1478ih5ai2.png)

Step 3: Designing

The Design:
Show content
(https://b.top4top.io/p_1478vjjrr1.png)
(https://c.top4top.io/p_1478ih5ai2.png)
(https://j.top4top.io/p_1478axona1.png)

INFORMATION:
  • Full Name: Imperials
  • Original Founder: ThunDer
  • Current Founders: ThunDer
  • Current Leaders: Sultan, LawLiet
  • Motto: Give Me More
  • Color: 255 164 175
  • Skin Shaders: N/A
  • Car Shaders: N/A
  • Discord: https://discord.gg/wgVQTt

History
We were playing with each others in CIT server and we have the same thoughts about creating our own group, then we started the project and chose "Imperials" to be name of our squad, we developed the group step by step with the original founder which is ThunDer, he chose us to be leaders for Imperials, we are called Sultan and LawLiet, we are loyal for the group and we will do our best for our Commander.


Official Video
(https://www.shorouknews.com/uploadedimages/Other/original/youtubee.jpg)
(https://e.top4top.io/p_1478e2eiu1.png)

The Code:
Show content
[center][img width=500 height=98]https://b.top4top.io/p_1478vjjrr1.png[/img]
[img width=500 height=500]https://c.top4top.io/p_1478ih5ai2.png[/img]
[img width=700 height=148]https://j.top4top.io/p_1478axona1.png[/img][/center]
[hr][size=20pt][font=trebuchet ms][glow=red,3,300][color=#ffa4af]I[/color]NFORMATION:[/glow][/font][/size][hr]
[list]
[li][font=trebuchet ms][b][size=12pt]Full Name:[/size][/b][/font] Imperials[/li]
[li][font=trebuchet ms][b][size=12pt]Original Founder:[/size][/b][/font] ThunDer[/li]
[li][font=trebuchet ms][b][size=12pt]Current Founders:[/size][/b][/font] ThunDer[/li]
[li][font=trebuchet ms][b][size=12pt]Current Leaders:[/size][/b][/font] Sultan, LawLiet[/li]
[li][font=trebuchet ms][b][size=12pt]Motto:[/size][/b][/font] Give Me More[/li]
[li][font=trebuchet ms][b][size=12pt]Color:[/size][/b][/font] [color=red]255[/color] [color=green]164[/color] [color=blue]175[/color][/li]
[li][font=trebuchet ms][b][size=12pt]Skin Shaders:[/size][/b][/font] N/A[/li]
[li][font=trebuchet ms][b][size=12pt]Car Shaders:[/size][/b][/font] N/A[/li]
[li][font=trebuchet ms][b][size=12pt]Discord:[/size][/b][/font] https://discord.gg/wgVQTt[/li][/list]
[center][hr][size=20pt][font=trebuchet ms][glow=red,3,300][color=#ffa4af]H[/color]istory[/glow][/font][/size][hr]
We were playing with each others in CIT server and we have the same thoughts about creating our own group, then we started the project and chose "Imperials" to be name of our squad, we developed the group step by step with the original founder which is ThunDer, he chose us to be leaders for Imperials, we are called Sultan and LawLiet, we are loyal for the group and we will do our best for our Commander.
[/center]

[center][hr][size=20pt][font=trebuchet ms][glow=red,3,300][color=#ffa4af]O[/color]fficial [color=#ffa4af]V[/color]ideo[/glow][/font][/size][hr]
[img width=700 height=394]https://www.shorouknews.com/uploadedimages/Other/original/youtubee.jpg[/img]
[img width=415 height=98]https://e.top4top.io/p_1478e2eiu1.png[/img][/center]

logo shape and style depends on the name or the text that you will type on it.
- Strong word like Imperials: Strong and powerful logo
- Normal word Like Diversity: Normal logo, the text will take 70% of the logo size, creativity 20%.
- Weak or random word: Random logo, text and some shapes.
@Cherry, You can add this guide as second section.