BBCode Help

[Dark Country]

Can anyone help?

 

[Dark Country]

What weapon(s) they have should be added as 'required'.

I'm not sure what yer asking - we don't make codes for ya, we just help ya with yours!

Oh I see.

 

[Dark Country]

Well, I'm new relatively new to the coding scene; I know -[/i make italics the same format goes for bold bu more complex coding is hard for me but at the same time Id like to make a sophisticated char sheet.

 

[Dark Country]

So you know who makes character sheets for free or fun?

 

[rissa]

So you know who makes character sheets for free or fun?

Nope, but feel free to browse through Media Shops and the Testing Chambers.

 

[Dark Country]

What weapon(s) they have should be added as 'required'.

I'm not sure what yer asking - we don't make codes for ya, we just help ya with yours!

Oh I see.

I was asking for a specialized code that could set up a Character sheet and its accompanying page. since I really don't know how ti set all that up.

 

[Nemopedia]

What weapon(s) they have should be added as 'required'.

I'm not sure what yer asking - we don't make codes for ya, we just help ya with yours!

Oh I see.

I was asking for a specialized code that could set up a Character sheet and its accompanying page. since I really don't know how ti set all that up.

What Rissa means is that she doesn't know any places where you can ask for your template to be converted into CSS, but that you can browse the 'Media Shops & Requests' forum, under 'Community Connections' (scroll down a little for that) to see if there are any shops that are open for a code request. There are always a few members who are happy to receive such a request.

Or you can also try to figure it out yourself by looking at the 'Divtionary' or look at other codes made by members in the 'Coding Lab' (this sub-forum). This thread is solely meant for those who are stuck at coding and need a little help working them out. Not to request an entire new sheet from.

 

[Astroblaze]

hey! so I'm working out some details in my profile template to make it mobile-friendly. this is what I have so far of the header:

〔

NAME/ALIAS

〕

[div=background-color: #fff; max-width: 800px !important; margin: 5px; border: 1px solid #fff; border-radius: 30px;][div=display: flex; flex-wrap: nowrap; justify-content: space-between;][div=flex: 0.1; margin: -5px; align-self: stretch; align-content: stretch; font-size: 45px; color: black;]〔[/div][div=flex:1; padding: 5px; margin: 5px; font-size: 30px; text-align: center; color: black;][font=Josefin Sans][b]NAME/ALIAS[/b][/font][/div][div=flex: 0.1; margin: -5px; align-self: stretch; align-content: stretch; font-size: 45px; color: black;]〕[/div][/div][/div]

what I'm trying to do is to get those little framing bits to line up with the left and right edges of the box respectively so that the name text will wrap inside them without them moving -- just stretching to match the height of the box. I've looked at a few divbox and flexbox tutorials and references and what I have so far seems like it should be correct, but it's not only not doing that, but the frames aren't even symmetrical with respect to the edge. anyone able to correct whatever I'm not doing? also I'm suspecting I have some bits of code in there that aren't doing squat so if those could get picked out and tossed that would help as well, just to clean it up

if it helps, I attempted to draw what I'm shooting for -- it's a bit scribbly, hope it's legible ^^"


and in the meantime I'm trying to pick out a font that will look kinda techno to match the intended feel of the whole template, but I don't have donator status so I can't use the fancy ones. any recommendations out of the basic set with formatting I could combine to make it look right? (I have Courier New as the stats box so I don't want to use that)

UPDATE EDIT: figured out some of it by temporarily adding small borders to each flexbox so I could see what each piece was doing, plus added a gradiant I initially wanted but wasn't sure how to do until I stumbled upon it and changed the font, again by accidental discovery

〔

NAME/ALIAS

〕

[div=background:radial-gradient(#fff, #fff, #94f9f9); max-width: 800px !important; margin: 5px; border: 1px solid #94f9f9; border-radius: 30px;][div=display: flex; flex-wrap: nowrap; text-align: center; color: black;][div=flex: 0.1; font-size: 50px;]〔[/div][div=flex:1; padding: 5px; margin: 5px 0px 5px 0px; font-size: 30px;][FONT=Handlee][b]NAME/ALIAS[/b][/FONT][/div][div=flex: 0.1; font-size: 50px;]〕[/div][/div][/div]

still can't get those frames to stretch to match the (fluctuating) height of the container tho. I've taken some looks around and it seems like that might not be possible :( but if anyone knows otherwise please help! at the very least I'd like the frames to stay vertically centered no matter the number of lines in the name

 

[Nemopedia]

hey! so I'm working out some details in my profile template to make it mobile-friendly. this is what I have so far of the header:

〔

NAME/ALIAS

〕

[div=background-color: #fff; max-width: 800px !important; margin: 5px; border: 1px solid #fff; border-radius: 30px;][div=display: flex; flex-wrap: nowrap; justify-content: space-between;][div=flex: 0.1; margin: -5px; align-self: stretch; align-content: stretch; font-size: 45px; color: black;]〔[/div][div=flex:1; padding: 5px; margin: 5px; font-size: 30px; text-align: center; color: black;][font=Josefin Sans][b]NAME/ALIAS[/b][/font][/div][div=flex: 0.1; margin: -5px; align-self: stretch; align-content: stretch; font-size: 45px; color: black;]〕[/div][/div][/div]

what I'm trying to do is to get those little framing bits to line up with the left and right edges of the box respectively so that the name text will wrap inside them without them moving -- just stretching to match the height of the box. I've looked at a few divbox and flexbox tutorials and references and what I have so far seems like it should be correct, but it's not only not doing that, but the frames aren't even symmetrical with respect to the edge. anyone able to correct whatever I'm not doing? also I'm suspecting I have some bits of code in there that aren't doing squat so if those could get picked out and tossed that would help as well, just to clean it up

if it helps, I attempted to draw what I'm shooting for -- it's a bit scribbly, hope it's legible ^^"
View attachment 181960

and in the meantime I'm trying to pick out a font that will look kinda techno to match the intended feel of the whole template, but I don't have donator status so I can't use the fancy ones. any recommendations out of the basic set with formatting I could combine to make it look right? (I have Courier New as the stats box so I don't want to use that)

UPDATE EDIT: figured out some of it by temporarily adding small borders to each flexbox so I could see what each piece was doing, plus added a gradiant I initially wanted but wasn't sure how to do until I stumbled upon it and changed the font, again by accidental discovery

〔

NAME/ALIAS

〕

[div=background:radial-gradient(#fff, #fff, #94f9f9); max-width: 800px !important; margin: 5px; border: 1px solid #94f9f9; border-radius: 30px;][div=display: flex; flex-wrap: nowrap; text-align: center; color: black;][div=flex: 0.1; font-size: 50px;]〔[/div][div=flex:1; padding: 5px; margin: 5px 0px 5px 0px; font-size: 30px;][FONT=Handlee][b]NAME/ALIAS[/b][/FONT][/div][div=flex: 0.1; font-size: 50px;]〕[/div][/div][/div]

still can't get those frames to stretch to match the (fluctuating) height of the container tho. I've taken some looks around and it seems like that might not be possible :( but if anyone knows otherwise please help! at the very least I'd like the frames to stay vertically centered no matter the number of lines in the name

Sorry for the late response! Anyway, looking at your question the first thought that came up was to use the font-size:(calc). However, after testing it myself I have found that the formula doesn't work anymore, so I had to do some research on responsive texts and how to create them. From there I have found the next best solution, I suppose.

Solution

〔

Esteban Rodriguez Julio / Shamalamalam dingdong

〕

〔

Name / Alias

〕

guide I used: Font size relative to the user's screen resolution?

What I did was switch out your font-size to a viewport (v) rather than pixels (px). Read the discussion I linked above for more information since it certainly is useful for when you want to create responsive texts! Hope that helps!

[div=background:radial-gradient(#fff, #fff, #94f9f9); max-width: 800px !important; margin: 5px; border: 1px solid #94f9f9; border-radius: 30px;][div=display: flex; flex-wrap: nowrap; text-align: center; color: black;][div=flex: 0.1; font-size: 10vmax; ]〔[/div][div=flex:1; padding: 8% 0% 12% 0%; font-size: 4vmin;][FONT=Handlee][b] NAME / ALIAS [/b][/FONT][/div][div=flex: 0.1; font-size: 10vmax; height: 100%;]〕[/div][/div][/div]

 

[Astroblaze]

hey! so I'm working out some details in my profile template to make it mobile-friendly. this is what I have so far of the header:

〔

NAME/ALIAS

〕

[div=background:radial-gradient(#fff, #fff, #94f9f9); max-width: 800px !important; margin: 5px; border: 1px solid #94f9f9; border-radius: 30px;][div=display: flex; flex-wrap: nowrap; text-align: center; color: black;][div=flex: 0.1; font-size: 50px;]〔[/div][div=flex:1; padding: 5px; margin: 5px 0px 5px 0px; font-size: 30px;][FONT=Handlee][b]NAME/ALIAS[/b][/FONT][/div][div=flex: 0.1; font-size: 50px;]〕[/div][/div][/div]

what I'm trying to do is to get those little framing bits to line up with the left and right edges of the box respectively so that the name text will wrap inside them without them moving -- just stretching to match the height of the box. I've looked at a few divbox and flexbox tutorials and references and what I have so far seems like it should be correct, but it's still not doing what I want. at the very least I'd like the frames to stay vertically centered no matter the number of lines in the name

if it helps, I attempted to draw what I'm shooting for -- it's a bit scribbly, hope it's legible ^^"
View attachment 181960

Sorry for the late response! Anyway, looking at your question the first thought that came up was to use the font-size:(calc). However, after testing it myself I have found that the formula doesn't work anymore, so I had to do some research on responsive texts and how to create them. From there I have found the next best solution, I suppose.

Solution

〔

Name / Alias

〕

[div=background:radial-gradient(#fff, #fff, #94f9f9); max-width: 800px !important; margin: 5px; border: 1px solid #94f9f9; border-radius: 30px;][div=display: flex; flex-wrap: nowrap; text-align: center; color: black;][div=flex: 0.1; font-size: 10vmax; ]〔[/div][div=flex:1; padding: 8% 0% 12% 0%; font-size: 4vmin;][FONT=Handlee][b] NAME / ALIAS [/b][/FONT][/div][div=flex: 0.1; font-size: 10vmax; height: 100%;]〕[/div][/div][/div]

guide I used: Font size relative to the user's screen resolution?

What I did was switch out your font-size to a viewport (v) rather than pixels (px). Read the discussion I linked above for more information since it certainly is useful for when you want to create responsive texts! Hope that helps!

Thanks so much for the reply! I was starting to think no one was ever going to answer this ;^; it's still not doing what I want tho -- comparing your code to mine, it's now stuck at a height that's obnoxiously huge on larger screens so still not adapting to screen size :( I'm wondering now tho if it might work better actually to stick the frame in the background itself, as a transparent image over the gradient. not sure if it'd let me layer backgrounds like that tho. maybe I'm just left with discarding the frames altogether :/ thanks for giving your feedback tho!

 

[Absyinthe_Artica]

Hello there! I was wondering if anyone knew a thing or two about anchors and could help me with my layout?
So here is a screenshot of the basic layout:

Screenshot

The bottom div should be in the same spot as the right one. and I want it so that when I click on the links in the left navigation box it switches to the div with the corresponding anchor. Is there any way to go about this?

 

[darkmaster006]

Hello! So I was wondering if anyone had made or knew how to make a simple code similar to this one:

Fandom - Adrift and Afloat, a Pokémon Adventure

"That would certainly be an amazing thing, for sure!" Jun said, redundantly. It didn't help that she was too excited to think of the proper words to use. Jin chuckled lightly, she felt happy that Blue had been able to take part in the conversation again. As a matter of fact, Jin was overjoyed...

www.rpnation.com

I've copied the code to here, but it does not work, I guess they are different BBCode Systems? Any help is appreciated!

 

[Lillian Gray]

Any way to force something in a small div to align itself on the bottom of a larger div?

 

[Hitomebore]

Hi, I've simple question, why I can't use font outside of those Iwaku provides? I read that only specific type of member can use google font, but I also saw regular members using different type of fonts.
I've tried using font=fontname but no hope :(
Thank you!

 

[Lillian Gray]

Hi, I've simple question, why I can't use font outside of those Iwaku provides? I read that only specific type of member can use google font, but I also saw regular members using different type of fonts.
I've tried using font=fontname but no hope :(
Thank you!

Hello!

From what I know only donating members can use Google fonts and they are case sensitive. So you must spell them exactly as they appear!

Im not sure if regular members have access to other fonts though. Apologies.

 

[Nemopedia]

Hi, I've simple question, why I can't use font outside of those Iwaku provides? I read that only specific type of member can use google font, but I also saw regular members using different type of fonts.
I've tried using font=fontname but no hope :(
Thank you!

Lillian is right. Google fonts are only available to donators or volunteers. You can also find the answer in the FAQ (found under the tab: help).

RESOURCE - Frequently Asked Questions

FREQUENTLY ASKED QUESTIONS Newbie Questions Avatars and Profile Settings Customization Iwaku Policies Getting Assistance Site Errors General Iwaku Questions Inbox Conversations Notifications Post and Thread Options Social Interaction BBCode Roleplay Questions Sexual Content Creative Content...

www.iwakuroleplay.com

Any way to force something in a small div to align itself on the bottom of a larger div?

Not sure what you exactly mean? What I usually do is set an exact height for the main div (e.g: px) and then make the smaller one relative (e.g: %). If you mean to have them meet and be equal: try to delete some white spaces between the closing tags. Enters matter.

Hello! So I was wondering if anyone had made or knew how to make a simple code similar to this one:

Fandom - Adrift and Afloat, a Pokémon Adventure

"That would certainly be an amazing thing, for sure!" Jun said, redundantly. It didn't help that she was too excited to think of the proper words to use. Jin chuckled lightly, she felt happy that Blue had been able to take part in the conversation again. As a matter of fact, Jin was overjoyed...

www.rpnation.com

I've copied the code to here, but it does not work, I guess they are different BBCode Systems? Any help is appreciated!

Not familiar with RPnation, but I'm guessing there is indeed a different code system. Check out the BBCode help sheet Iwaku has (found under the tab: Help) to see what your corresponding codes are:

BB codes

The list of BB codes you can use to spice up the look of your messages. This page shows a list of all BB codes that are available.

www.iwakuroleplay.com

If you want to try CSS check out the divtionary sheet pinned in this forum.

Hello there! I was wondering if anyone knew a thing or two about anchors and could help me with my layout?
So here is a screenshot of the basic layout:

Screenshot

The bottom div should be in the same spot as the right one. and I want it so that when I click on the links in the left navigation box it switches to the div with the corresponding anchor. Is there any way to go about this?

I can't get a good idea of what you are trying but it sounds like tabs/slides? Check out the BBCode sheet of Iwaku (linked above but can also be found under the tab: Help) because that seems to be what you are trying.

 

[Hitomebore]

@Lillian Gray @Nemopedia duly noted, thank you! Maybe when I saw regular member using google font bcs they just hide their donating status, I think we can iirc.

 

[Loveless]

So, since tabs are a bit wonky right now (there's still an annoying margin by the right, it's a current bug that I've already called attention to in the right thread), I've been trying out the accordions... Anyone would like to walk me through how to style these? I haven't been able to locate any guides as to how these work exactly and as an original RPN user, my successes have been... limited : P

This is the guide I'd normally follow: Tutorial - Stylizing Accordions (RPN)

Aaaand this is how far I managed to get things going: RESOURCE - TESTING Coding Resources of the Loveless

How much of that guide is accomplishable on Iwaku? How would I go about doing it? The items I'm mostly interested in are getting rid of the borders/invisible borders and adding colors to the background of the slider headers, not just the text, but the whole thing.

Thank you for your time~!

 

[Nemopedia]

So, since tabs are a bit wonky right now (there's still an annoying margin by the right, it's a current bug that I've already called attention to in the right thread), I've been trying out the accordions... Anyone would like to walk me through how to style these? I haven't been able to locate any guides as to how these work exactly and as an original RPN user, my successes have been... limited : P

This is the guide I'd normally follow: Tutorial - Stylizing Accordions (RPN)

Aaaand this is how far I managed to get things going: RESOURCE - TESTING Coding Resources of the Loveless

How much of that guide is accomplishable on Iwaku? How would I go about doing it? The items I'm mostly interested in are getting rid of the borders/invisible borders and adding colors to the background of the slider headers, not just the text, but the whole thing.

Thank you for your time~!

Been a while since I played with the accordions. What I recall from the accordion master (@rissa) is that you add in a negative margin-left and a positive padding-right. I think the number used was (-)6 before the update and an annoying margin was added like you mentioned. Try to play around with those numbers and see how they work. Maybe you can even work something with a z-index and the pointer-event, like some do with the music player?

 

[Loveless]

So, since tabs are a bit wonky right now (there's still an annoying margin by the right, it's a current bug that I've already called attention to in the right thread), I've been trying out the accordions... Anyone would like to walk me through how to style these? I haven't been able to locate any guides as to how these work exactly and as an original RPN user, my successes have been... limited : P

This is the guide I'd normally follow: Tutorial - Stylizing Accordions (RPN)

Aaaand this is how far I managed to get things going: RESOURCE - TESTING Coding Resources of the Loveless

How much of that guide is accomplishable on Iwaku? How would I go about doing it? The items I'm mostly interested in are getting rid of the borders/invisible borders and adding colors to the background of the slider headers, not just the text, but the whole thing.

Thank you for your time~!

Been a while since I played with the accordions. What I recall from the accordion master (@rissa) is that you add in a negative margin-left and a positive padding-right. I think the number used was (-)6 before the update and an annoying margin was added like you mentioned. Try to play around with those numbers and see how they work. Maybe you can even work something with a z-index and the pointer-event, like some do with the music player?

Okay so, at first I didn't get what you were talking about... I got it confused with the tabs (since they're also having a margin issue lately), but then I explored a bit and found out this post: Link by darkflames13 and after playing with that code, I finally understood what you meant, so now:



This is what I've ended up with and I don't think we're going to get any better. They high-key look like USB flash drives lmao, I can live with this XD

Thanks for help! I shall add this information to my code quirks table for future reference now~