|
|
Post by suolainensilakka on Jan 24, 2022 19:50:35 GMT 1
hi. jingles onto the floor like a miserable little jester. i wanna get started on making my more "official" posts (like art project showcases or commission ads) look actually presentable/nice BUT the problem is that i don't have a ton of practice with forum post formatting yet and would appreciate any help or tips yall could offer!! my experiences with BBCode are somewhat limited (i've mucked around with it on my artfight profile before and also looked at some flight rising bio templates occasionally, but not much), so while i do know the basic gist of it, i'm not suuuuper familiar with it quite yet!
also, if any of yall have links to resources like page graphics and such (dividers, lil icons, stamps, et cetera) i'd love to see those too!! :]
|
|
|
|
Post by astraldreams on Jan 24, 2022 22:56:34 GMT 1
BBCode is pretty versatile, so there's a lot you can do with it. Generally what I find very helpful when considering layout designs is focused on what you want, before focusing on what you can do- so instead of starting immediately on the forum itself and trying to make something that looks nice, think in advance of how you want it to look like, ideally even draw up a sketch or even make a mockup with your tool of choice (something that is easy and intuitive for you to use already).
Once you have a general idea/outline, you can consider things more specifically, for example- this text needs to be centered and next to an image, the image needs to be 200px high, and both of those things should be on a black background. Then you can actually try and see how that would work in BBCode, and have more specific questions if you are struggling. This is especially helpful if you are very visual about perceiving things, and struggle to translate the basic text of BBCode into what it will eventually look like.
At its basic form, BBCode allows you to apply effects to the contents of your post. Another thing that can make it easier is to write out all content first, and then apply formatting to everything afterwards, instead of switching back and forth. Again, this is just helpful for you to know where exactly you are at.
All of that being said, now onto BBCode itself- when you say you have some experience, how much do you know about it? I don't want to bore you with the basics if you already know them, also don't want to jump into more advanced stuff if you don't have the basics. Do you know how to apply tags, what they are, and how they work? Do you know what parameters are and how to apply them?
|
|
|
|
Post by Nachtkern on Jan 24, 2022 23:00:00 GMT 1
CCing cowboy and sincerelybii in here. You are the resident animals who know where to find pictures and images on the internet, I think? |
|
cowboy
Bud
YEE, AND I'M ONLY SAYIN THIS ONCE, HAW
Posts: 34
|
Post by cowboy on Jan 27, 2022 0:23:32 GMT 1
hihi!!!!! this is mostly going to be BBcode tips rather than a full guide on all the formatting. there is a more detailed/thorough formatting guide you can find here, which i believe was actually written by noroi ? not all of it will apply to the nightforum at the moment because, to my knowledge, we've yet to add special html shortcuts and plugins, but it's good reference to have on hand. anyhow, i hope this helps!
ABOUT BBCODE.
- because bbcode is based on html, it uses a lot of brackets and such. however, it doesn't use "<p>" to indicate paragraph breaks like raw html will, so bbcode WILL read all your paragraph breaks manually. this means that it's not as easy to separate brackets into individual lines to keep track of what's happening in different sections of your code. for example:
[div align="center"]
[font face="comic sans ms" size="1"]
hi guys
[ul]
[li]
list item
[/li]
[li]
list item...2!
[/li]
[/ul]
see how easy it is to distinguish which section is which? makes it really easy to tell if you're missing any brackets! however, it turns into this:
which doesn't look very good at all because of the added spaces...as such, your code without extra paragraph breaks will look something like this, which can get very messy if you're making more complex formatted posts, especially with tables:[div align="center"][font face="comic sans ms" size="1"]hi guys
[ul][li]list item[/li][li]list item...2![/li][/ul] | |
i mitigate this by including all the spaces while i'm working on a post, this way i can see everything that's happening. once i'm ready to post, i delete the extra spaces and check how it looks! you can also work on your bbcode in a separate text document using notepad++ or your computer's notepad app, but you won't be able to preview how things look until you paste it into the forum post editor. - when making links in bbcode, it will actually reset the font to default. you can fix this by manually changing the font again inside the brackets:
[a href="url"][font face="font name"]text[/font][/a] - my evil trick is that if i see coding that i really like, i'll use "quote" on the post. this pulls up the post editor and actually basically copy-pastes all their BBcode into your editor. i use this to peer into what coding people are using and see how they did what they did! this is actually how i learned to align images using tables
- honestly, when it comes to aligning text boxes and images in general, tables are going to be your go-to. while you can align big bodies of text using div align, if you want multiple bodies of text next to each other, tables are going to be your best friend!
- when making tables, the 'tr' tag indicates a row. you can have a one-row table. 'td' will indicate cells within a table. if you want your table to have a header, such as a table of contents, you can use the 'tr' tag at the start for the header row, and 'th' to indicate the different cells in the header. here's an example:
[table][tbody][tr][th]heading1[/th][th]this is heading 2[/th][/tr][tr][td]#[/td][td]content[/td][/tr][tr][td]##[/td][td]content2[/td][/tr][/tbody][/table] | |
- you can put tables within tables. do with this information what you will
- thus far there isn't really a way to manually adjust the width of table cells using BBcode, the cells automatically adjust by the content within them, so the only way to do that manually would be if we had a plugin of some sort that let us use like. raw html?
- in addition, there isnt yet a way to change the background colour of your posts. if you want a block of text or a specific section to stand out, you can use the 'quote' code. this puts your text in a block with the opposite post-colour-type of the surrounding post, alternating as thread quote-replies do. theoretically you can like, keep doing this.
- because of the limited colour selection for backgrounds, if you want to colour your text, you need to be mindful of what background it's going to be on. while most colours will work fine enough on our main off-white background, options are slightly more limited for green backgrounds
- even though you can customise what font you're using, there are only a few options built into the site because these are fonts that everyone is guaranteed to have. this assures that anybody viewing your posts will see them appear correctly!
- ever notice how all my posts are in
homestuck font courier new? if you go to the settings tab of your profile editor, you can find an option to set bbcode to your default. if you do this, it will give you the option to input your default code. using this, i put in the font face code so that my post editor would automatically add the code for courier new font, which means every post i make will default to bold courier new text unless i manually specify otherwise. if you want all your posts to appear a certain way you can put the code in for that appearance and leave a blank space so you'll see where to start adding text whenever you make a post!
ABOUT IMAGES.
- ok honestly? html was really huge on deviantart for custom profile pages, even though that's gone because of the eclipse update. i got most of my html knowledge from this era and i hardly held onto any of it. however! there are still remnants of this era all over the site. you can search "f2u profile" on deviantart and you're bound to come across headers, dividers, and aesthetic images to input into your codes. always remember to link back to the source whether it's on the image or in a footer at the end of the post!
- you can make images link back to the source like so (raw code on the left, output on the right):
[a href="https://nightcorner.freeforums.net/user/1"][img src="https://cdn.discordapp.com/attachments/620331244739100673/933084620218568754/banner_welcome.png" style="maxwidth="200px;"][/a] | |
- with the way bbcode is on the nightforum right now, it's not very easy to align an image and overlay it with your text. using a table will help! tables are kind of a pain in the neck to use at first because of how easily they can break but, like other BBcode formatting codes, it becomes muscle memory over time tbh. here's a quick example of an image aligned to the left of text:
[table][tbody][tr][td][img src="https://cdn.discordapp.com/attachments/805319271521189900/932323664630784110/unknown.png" style="maxwidth:150px;"][/td][td]text goes here, formatting does work within these guys. you can't stick a font over a whole section of a table, it's either the whole thing or individual cells. i tried once to put a font over just the cells under the title section and it broke my formatting LOL[/td][/tr][/tbody][/table] | |
note the use of 'maxwidth' in the image code. this determines, of course, the maximum width of the image. you can pick a measurement in pixels or %, displaying an image at half size ("maxwidth:50%;")or a perfect 200 pixel width. doing so is important to prevent high-res images from taking up a whole page if you're using them as borders/pagedolls/etc, and you can even technically use them to specify how much space you want a table cell to take up!
there's a very small chance that i take the information i've put in this and make a thread formatting tips masterpost, or i may just come back to edit this post if i think of new things, but for now this is basically like. everything i can think of! i hope it helps, have fun decorating!
|
|
sincerelybii
Sprout
one step closer to devouring your ethernet cable
Posts: 75
|
Post by sincerelybii on Jan 27, 2022 4:18:15 GMT 1
HELP I wrote a whole thing for this that I forgot to hit post on KHAFKHKFSHHKLSF but kris got p much everything!
|
|
|
|
Post by fayeris on Jan 27, 2022 20:56:36 GMT 1
regarding funky little graphics and pixels and whatnot, i’ve found that deviantart is a great source for those!! even in the year of our lord 2022!!! lots of dA artists make really nice free-to-use avatars, dividers, pagedolls, etc and put them in their galleries for download. i’ve used some for my artfight profiles the last couple of years. (apologies if you already knew that and this was unhelpful :sadcowboy:)
|
|
lupin
Bud
boy enjoyer
Posts: 16
|
Post by lupin on Apr 1, 2022 23:20:17 GMT 1
in addition, there isnt yet a way to change the background colour of your posts. i have fantastic news for you :) the html style attribute works on div tags! and like 90% of css properties! i would kill for raw html though, only limitation ive noticed with these is that it does NOT like positional properties. no grids or flexbox or anything, presumably so you cant like. position: absolute; height: 100vh; z-index: 1000; on things floats & margin: auto; do work though. kind of, ive gotten text to float but it absolutely despises floating 2 divs. and god forbid if you want to float 2 sets of elements edit: been toying with some stuff and found out that you can use the style attribute on tables as well!!!! so yes you can set specific widths!
| Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. |
for those less css inclined, im using min-width to specify this! basically, because we dont want the table to grow or shrink depending on content--we just want it to take up whatever amount of space we set, we say we want a 'minimum' (min) width |
|
|
|
Post by Nachtkern on Apr 2, 2022 11:02:13 GMT 1
I'm pretty sure that we (we as in, me and the other admin) can create custom BBCode tags, so we probably should be able to create tags for setting background color to make things easier for users - this has been my first time setting up a forum though, so I haven't quite gotten that far LMAO. But I have been meaning to, and if there's other things that you think would be good to have in BBCode, I'd love to hear it. lupin the reason there's no raw html isn't necessarily just so you don't go too wild with post formatting, it's mainly because some HTML fields can be really vulnerable and allow users to interrupt or change aspects of a website's layout, which, while funny imo, can be used maliciously against the site or other users. Since we use a free host, it's not a decision we made ourselves, but it's the general reason most forums use BBCode tags in place of free HTML afaik. |
|
lupin
Bud
boy enjoyer
Posts: 16
|
Post by lupin on Apr 2, 2022 20:54:35 GMT 1
lupin the reason there's no raw html isn't necessarily just so you don't go too wild with post formatting, it's mainly because some HTML fields can be really vulnerable and allow users to interrupt or change aspects of a website's layout, which, while funny imo, can be used maliciously against the site or other users. Since we use a free host, it's not a decision we made ourselves, but it's the general reason most forums use BBCode tags in place of free HTML afaik. BAHSDXHASMN yeah im just being sillay, i dont ever to be able to use raw html!! bbcode is used mostly as a 'baby' html, for people who dont know what theyre doing. its very easy to sanitize inputs for html, and its easy to scrub only some html (this is how wysiwyg usually works!), the biggest issue is html accidentally escaping the bounds of a post and breaking the page. if you're someone dinking around with a bunch of divs, this is not hard to achieve. bbcode adds an extra layer of protection by scrubbing inputs and checking to see if the code is valid before its converted--meaning its physically impossible to do things like, asymmetrically nesting divs. security wise the only thing that you can stop with bbcode is injecting malicious js--no script tag, no javascript (but this has also been achieved by wysiwyg without using bbcode). i think people put bbcode on modern forum sites, because modern forum sites are nostalgia driven, and bbcode is a major factor in that nostalgia (i am not excluded from this lmao). bbcode is... from the 2000's internet, it's old, and code has gotten wayyyyy more secure over the years
re: custom tags :flushed: i would love positional stuff, specifically flexbox! you can mimic a grid layout w/ tables (even if its... so clunky) but you cant mimic flexbox</3 im assuming yall are able to define how the html parses + what css attributes are put on it?? i can code this for you i just. want it
|
|
|
|
Post by Nachtkern on Apr 3, 2022 11:43:04 GMT 1
re: custom tags :flushed: i would love positional stuff, specifically flexbox! you can mimic a grid layout w/ tables (even if its... so clunky) but you cant mimic flexbox</3 im assuming yall are able to define how the html parses + what css attributes are put on it?? i can code this for you i just. want it
which is mostly for our own reference so we have a place to keep track of things that have been requested! I know very basic stuff, but the other admin, @/astraldreams is our designated code wizard, and is the person who adds changes like that. I kind of assume he's able to figure that out by himself as well tbh, but you're absolutely welcome to offer your help n__n
|
|
