Help how do you go about making your own layouts?

[Oldworld Chaotic]

With coding I know the basics; I can add links and centre text but beyond that I'm not very experienced. Hell, I couldn't figure out how to change the divide colours or anything on my own search so I've just been stuck with the rpn blue (which is fine aesthetically, but annoying that I don't have the know how to work around it).

So I'm sat here, scrolling through this BBCode Center and damn some of you guys are incredible. The things you make are absurd. But it's something I'd rather know how to do myself rather than using other people's work, ya know?

But how do you go about making them? Where does one even start?

Thanks in advance, I have a lot of time to kill and coding is definitely gonna help accomplish that.

 

[deer]

Hello there!
When it comes to BBCode, some of the codes aren't customisable. For example, the divide, tab, side, etc. codes aren't customisable. However, there's definitely a work-around it, for sure! You can use divs to accomplish what you'd like !

The code below should be the 'divide' code that you're looking for! The 'background-color' tag is where you can change the colour of your 'divider' and the 'height' is how "thick" you'd like to make the 'divide' line!

[div=line-height: 0; height: 2px; background-color: black;][/div]

The live preview of the "divider" using div

With the height at 2px:

With a height of 5px :

But! To answer your question in regards to how I go about making my own template and layouts, I tend to play around with my ideas in the Private Workshop Thread RPN has for us! I take inspiration from different templates from Tumblr, Pinterest, Jcink, Canva, and even Powerpoint templates! [ You can google like. . . . tumblr themes, etc. Or you can play on canva.com and look through the different templates they have on there and figure out what you like and don't like! ]
My thought process is as follows:

• Do I want to make a character sheet code? An interest check? An in-character code?
• And depending on my answer, I work from there! But, for me personally, I normally lean towards character sheet code since I tend to join group roleplays often !
• So, since I'm making a character sheet code, I then think. . . "Okay, how many images do I want? What kind of style would I want? Should my code be mobile-friendly?"
• At the same time, it also depends on the aesthetics that I like too. So, do I want a medium-sized code or a smaller-sized code? Do I want a wide code or a narrow code?
• Or, if I already have a character concept, I think of . . okay . . what kind of aesthetic do they have? Are they more of a pink person? A purple person? And then I'll look at colour palettes!
• Once I decide on how many images I want, what colour to go for, and the size of my code, it all comes together slowly!
• Next is. . . do I want scrolls? Do I want tabs? Accordions? And usually, for me, I tend to use these interchangeably! [ If I'm lazy, I'll just make yall scroll, but if I'm not, I'll section off the character sheet by what the GM wants and usually it's Basic, Appearance, Personality, Biography, Misc ! ]

So a lot of thought process goes into making the template that I like. But, my usual go-to size for my codes is max-width: 750px; margin: auto;! As for the colours, it depends if I want "minimalistic", "vibrant", and etc. depending on what "speaks" to me for my characters and my inspiration! Usually, everyone has their own style, preferences, and trademark and you can see it in their codes so it's always fun seeing what people create and what their "aesthetics" are!

I hope this sort of gives you an idea of how I code and maybe it could help you! If you want more examples and specific details to anything I mentioned, do let me know! < 3

 

[Oldworld Chaotic]

Hello there!
When it comes to BBCode, some of the codes aren't customisable. For example, the divide, tab, side, etc. codes aren't customisable. However, there's definitely a work-around it, for sure! You can use divs to accomplish what you'd like !

The code below should be the 'divide' code that you're looking for! The 'background-color' tag is where you can change the colour of your 'divider' and the 'height' is how "thick" you'd like to make the 'divide' line!

[div=line-height: 0; height: 2px; background-color: black;][/div]

The live preview of the "divider" using div

With the height at 2px:

With a height of 5px :

But! To answer your question in regards to how I go about making my own template and layouts, I tend to play around with my ideas in the Private Workshop Thread RPN has for us! I take inspiration from different templates from Tumblr, Pinterest, Jcink, Canva, and even Powerpoint templates! [ You can google like. . . . tumblr themes, etc. Or you can play on canva.com and look through the different templates they have on there and figure out what you like and don't like! ]
My thought process is as follows:

• Do I want to make a character sheet code? An interest check? An in-character code?
• And depending on my answer, I work from there! But, for me personally, I normally lean towards character sheet code since I tend to join group roleplays often !
• So, since I'm making a character sheet code, I then think. . . "Okay, how many images do I want? What kind of style would I want? Should my code be mobile-friendly?"
• At the same time, it also depends on the aesthetics that I like too. So, do I want a medium-sized code or a smaller-sized code? Do I want a wide code or a narrow code?
• Or, if I already have a character concept, I think of . . okay . . what kind of aesthetic do they have? Are they more of a pink person? A purple person? And then I'll look at colour palettes!
• Once I decide on how many images I want, what colour to go for, and the size of my code, it all comes together slowly!
• Next is. . . do I want scrolls? Do I want tabs? Accordions? And usually, for me, I tend to use these interchangeably! [ If I'm lazy, I'll just make yall scroll, but if I'm not, I'll section off the character sheet by what the GM wants and usually it's Basic, Appearance, Personality, Biography, Misc ! ]

So a lot of thought process goes into making the template that I like. But, my usual go-to size for my codes is max-width: 750px; margin: auto;! As for the colours, it depends if I want "minimalistic", "vibrant", and etc. depending on what "speaks" to me for my characters and my inspiration! Usually, everyone has their own style, preferences, and trademark and you can see it in their codes so it's always fun seeing what people create and what their "aesthetics" are!

I hope this sort of gives you an idea of how I code and maybe it could help you! If you want more examples and specific details to anything I mentioned, do let me know! < 3

Hey, Hi. Sorry I took so long to respond to this.

So, to start... Thank you? It's such a detailed and helpful response and I appreciate you taking the time to type it and explain stuff to me. The way you broke down steps is actually super handy? Like it definitely has the cogs turning a bit more. Since I want to make an interest check, I guess I want to change aesthetics slightly by fandom etc but I'll sit and mess about with some ideas on paper maybe to get the look down before diving into the code (nice to have a goal to work towards etc)

I might mess about with some code and see what I can come up with later but thanks again for the answer

 

[deer]

Its no problem at all! You’re so welcome and that makes me so happy to know that it helped! Yesss! I’ve been trying to get better at explaining my ideas and my thoughts so breaking it down that way is what I find more positive and easier to understand - especially via internet!

Oooh! A fandom and an interest check? That’s going to be so much fun! The first thing I thought of was Harry Potter? Since I’m a bit obsessed! You can certainly be inspired by the world itself and play around with ideas of how to code the interest check! So, if I wanted a Harry Potter RP, I don’t necessarily have to use images from the universe itself, but the colours? 100%!

There’s also the ability to use background images and so having that option is also a cool way to implement your ideas too if you want to jazz up your code as well! I sometimes notice that members like their layouts with a background image to get a feel for the vibe, theme, and etc. of the roleplay that they’re getting into as well!

• For example, a bio/cyberpunk roleplay could have a neon background image! A more dark, fantasy roleplay could have a darker background! Etc.

Also, that’s a brilliant idea! Drawing on paper a mock up of what kind of code you want to make is something I do as well ! I know some use Photoshop, Adobe XD, and etc. to figure out their design and layout so that’s an awesome start!

I’ll stop rambling now and can’t wait to see what you come up with ! < 3