Trombone Geek
KNIFE
yeah I caught that when I was looking back and trying to get div images as the slide title backgrounds lol
Which I actually got to work which was awesome
-
When posting, please be aware that artistic nudity is still nudity and not allowed under RpNation rules. Please edit your pictures accordingly!
Remember to credit artists when using work not your own.
Tutorial BBCode Assistance Thread
- Thread starter StoneWolf18
- Start date
Which I actually got to work which was awesome
Trombone Geek
KNIFE
While I'm here, is there a way to make accordion slide titles and the text box background underneath that transparent?
Amerikia1126
Occasionally Active
That there is. Put a visibility: hidden around the accordion itself, and a visibility: visible around every element you want shown. The grey box is merely there to show that the accordionness is hidden.
[div=background: rgba(200,200,200,.3);][div=visibility: hidden;][accordion=100%|bcenter]{slide=[div=visibility:visible;]boop[/div]|open}[div=visibility:visible;]boopity boop[/div]{/slide}[/accordion][/div][/div]
Comrade in the Shade
prophet of a future not my own
While copying and pasting to and from Google Sheets, my BBCode gets messed up (e.g. a ton more "[/tab]"s or "[/imagefloat]"s seem to spawn out of nowhere). Even when I make sure that there is an open and close to all the BBCode in a page, it sometimes messes up.
Question: is it Google Sheets? Chrome? Am I just a super noob?
Question: is it Google Sheets? Chrome? Am I just a super noob?
Alteras
The Sleepy One
are you using rich text editor? there's a button at the top right corner that looks like [o-] that is better at keeping BBcode clean.
Comrade in the Shade
prophet of a future not my own
I'll give it a go. Thanks!
Church418
Peace is a lie, There is only Passion
StoneWolf18
Hey Brother, I want to put a picture as a background with a decent sized, scrollable, box in the middle to detail lore and maybe some tab groups for other things. You know, to set the mood and environment for an RP, instead of a standard white background.
Also, how would I add some flare to the box in the middle? Maybe color the tabs and give the scrollable box some color as well.
It sounds simple, but for some reason I can't get it right, lol. Thanks ahead of time.
StoneWolf18
Within the Depths of a Dream
Hey! Have you check out the Bbcode Guide? If you have/when you do and you still have questions, lemme know!
Hey Brother, I want to put a picture as a background with a decent sized, scrollable, box in the middle to detail lore and maybe some tab groups for other things. You know, to set the mood and environment for an RP, instead of a standard white background.
Also, how would I add some flare to the box in the middle? Maybe color the tabs and give the scrollable box some color as well.
It sounds simple, but for some reason I can't get it right, lol. Thanks ahead of time.
Megeara
Member
hey how do you make tags when creating a thread. sorry I'm new.BBCode Assistance ThreadWelcome to a small thread for any and all BBCode needs! Just post the problem you're having below and I'll try my best to either solve it or pester someone who knows a bit more than me for you to take a look (@Musician hue.)
Please make sure to also check the threadmarks to see if your question has been answered before you ask!
This thread is NOT for asking for code templates. Please look elsewhere to have code written for you.
Purity
Nebulous Member
Right, quick question.
Is it possible to set a maximum and a minimum for accordion sizes? I'm trying to make sure that my accordions always fit in size with my picture, no matter what size the actual browser window is at.
EDIT: Yeah, that was pretty simple. Just captured everything in a centerblock and restricted size from there.
Is it possible to set a maximum and a minimum for accordion sizes? I'm trying to make sure that my accordions always fit in size with my picture, no matter what size the actual browser window is at.
EDIT: Yeah, that was pretty simple. Just captured everything in a centerblock and restricted size from there.
Last edited:
pioca
softie
hello all.
in my attempt to code i came across an obstacle. i can't align the div box with the image (+ the japanese character) with the bigger div box (profile, about). i tried to look for whatever let the other small div box align with the bigger one, but now i give up. please send help. draft and code are down there. (beware: it's messy and 99% assumed to not be suited for mobile) thanks!
in my attempt to code i came across an obstacle. i can't align the div box with the image (+ the japanese character) with the bigger div box (profile, about). i tried to look for whatever let the other small div box align with the bigger one, but now i give up. please send help. draft and code are down there. (beware: it's messy and 99% assumed to not be suited for mobile) thanks!
Code:
[div=
width: 85%;
margin: auto auto;]
[div=
height: 264px;
width: 198px;
display: inline-block;
vertical-align: top;
background-color: #EDE8EC;
margin: 10px;
background-image: url(https://image.ibb.co/cgs3dG/sdasdsad.png);
border-bottom: 13px solid rgba(87,73,89,0.6);]
[div=
height: 50px;
width: 50px;
background-color: #574959;
border: 1px solid #574959;
border-radius: 50%;
-index: -1;
overflow: hidden;
position: relative;
display: block;
margin: auto auto;
margin-top:210px;
font-family: Cambria;
line-height: 0.65;]
[CENTER]雷[/CENTER]
[/div][/div][/div][div=
width: 85%;
margin: auto auto;][div=
display: inline-block;
height: 160px;
width: 198px;
vertical-align: top;
background-color: #fff;
margin: 10px;][div=
padding: 5px;
color: #373737;
text-align: center;
font-family: Cambria;
font-size: 0.7em;]RAI SHINOHARA
[div=border-top: 2px solid rgba(87,73,89,0.3);][/div]
[div=
letter-spacing: 4px;][div=border-left: 2px solid rgba(87,73,89,0.5); border-left-width: 4px; border-radius: 12px; background: #F7F5FF;]like 1
[/div]
[div=border-right: 2px solid rgba(87,73,89,0.5); border-right-width: 4px; border-radius: 12px; background: #F7F5FF;]like 2[/div]
[div=border-left: 2px solid rgba(87,73,89,0.5); border-left-width: 4px; border-radius: 12px; background: #F7F5FF;]like 3[/div]
[div=border-right: 2px solid rgba(87,73,89,0.5); border-right-width: 4px; border-radius: 12px; background: #F7F5FF;]like 4[/div][/div][/div][/div][div=
display: inline-block;
width: 430px;
vertical-align: top;
background-color: #fff;
margin: 10px;][div=
padding: 9px;
color: #373737;
text-align: justify;
font-family: Cambria;][fa]fa-star fa-spin[/fa] PROFILE[div=border-top: 2px solid rgba(87,73,89,0.5);][/div]
[div=
width: 100%;
margin: auto auto;][div=
display: inline-block;
margin: 5px;
width: 42%;
vertical-align: top;
text-align: left;
font-family: Cambria;
font-size: 0.8em;]NAME: ...
DATE OF BIRTH: ...
OCCUPATION: ...
LOCATION: ...[/div][div=
display: inline-block;
margin: 5px;
width: 42%;
vertical-align: top;
text-align: left;
font-family: Cambria;
font-size: 0.8em;]AGE: 24
STATUS: ...
GENDER: ...
HOMETOWN: ... [/div][/div]
[fa]fa-star fa-spin[/fa] ABOUT
[div=border-bottom: 2px solid rgba(87,73,89,0.5);][/div]
[div=
font-family: Cambria;
font-size: 0.7em;
color: #373737;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis eleifend dui. Nullam interdum, tellus vel consequat interdum, metus dui faucibus sapien, nec ultricies elit ante at elit. Proin tristique dui non risus gravida, ut molestie erat scelerisque. Etiam id consequat lorem, in tempor odio. Morbi rutrum pulvinar ante, sit amet pulvinar tortor fermentum et. Vestibulum sapien velit, mollis in fringilla accumsan, blandit quis neque.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc sit amet odio enim. Donec nec erat diam. Aliquam erat volutpat. Nam nec nulla eu elit maximus pretium. In auctor orci quis lacinia eleifend. Cras porta facilisis eros, sed varius lacus ultrices non.
Praesent et erat purus. Duis urna turpis, aliquam ut lectus ut, sodales congue magna. Praesent lacinia aliquam arcu, ut faucibus ex gravida sit amet. Phasellus aliquet ex sed dapibus sollicitudin. Pellentesque eu dapibus sem, in porta lorem. Vivamus fringilla pulvinar finibus. Vestibulum non molestie purus. Nulla mattis lobortis nunc, nec suscipit arcu ultrices quis.
Aenean feugiat accumsan imperdiet. Morbi ornare turpis ac felis varius, id finibus magna ultrices. Nulla aliquam rhoncus diam non tempor. Aliquam erat volutpat. Vestibulum rhoncus urna eget lorem dictum accumsan eu nec ante. Mauris sollicitudin leo sed ligula ultricies interdum. Nam vehicula quam ut ornare commodo.[/div]
[/div][/div]
[/div]
[/bg]
Fable
₮ⱧɆ ₥Ɏ₮Ⱨ, ₮ⱧɆ ⱠɆ₲Ɇ₦Đ, ₮ⱧɆ ₣₳฿ⱠɆ
Hmm, not too sure what you are trying to align.. maybe it is just your resolution?
pioca
softie
trying to get that bigger box (on the right) to go up there so it's horizontally aligned with the div box with the image. i might be using terms wrong,,, sorry if that's the case!
Fable
₮ⱧɆ ₥Ɏ₮Ⱨ, ₮ⱧɆ ⱠɆ₲Ɇ₦Đ, ₮ⱧɆ ₣₳฿ⱠɆ
Like this?
RAI SHINOHARA
like 1
like 2
like 3
like 4
PROFILE
ABOUT
NAME: ...
DATE OF BIRTH: ...
OCCUPATION: ...
LOCATION: ...
DATE OF BIRTH: ...
OCCUPATION: ...
LOCATION: ...
AGE: 24
STATUS: ...
GENDER: ...
HOMETOWN: ...
STATUS: ...
GENDER: ...
HOMETOWN: ...
ABOUT
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis eleifend dui. Nullam interdum, tellus vel consequat interdum, metus dui faucibus sapien, nec ultricies elit ante at elit. Proin tristique dui non risus gravida, ut molestie erat scelerisque. Etiam id consequat lorem, in tempor odio. Morbi rutrum pulvinar ante, sit amet pulvinar tortor fermentum et. Vestibulum sapien velit, mollis in fringilla accumsan, blandit quis neque.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc sit amet odio enim. Donec nec erat diam. Aliquam erat volutpat. Nam nec nulla eu elit maximus pretium. In auctor orci quis lacinia eleifend. Cras porta facilisis eros, sed varius lacus ultrices non.
Praesent et erat purus. Duis urna turpis, aliquam ut lectus ut, sodales congue magna. Praesent lacinia aliquam arcu, ut faucibus ex gravida sit amet. Phasellus aliquet ex sed dapibus sollicitudin. Pellentesque eu dapibus sem, in porta lorem. Vivamus fringilla pulvinar finibus. Vestibulum non molestie purus. Nulla mattis lobortis nunc, nec suscipit arcu ultrices quis.
Aenean feugiat accumsan imperdiet. Morbi ornare turpis ac felis varius, id finibus magna ultrices. Nulla aliquam rhoncus diam non tempor. Aliquam erat volutpat. Vestibulum rhoncus urna eget lorem dictum accumsan eu nec ante. Mauris sollicitudin leo sed ligula ultricies interdum. Nam vehicula quam ut ornare commodo.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc sit amet odio enim. Donec nec erat diam. Aliquam erat volutpat. Nam nec nulla eu elit maximus pretium. In auctor orci quis lacinia eleifend. Cras porta facilisis eros, sed varius lacus ultrices non.
Praesent et erat purus. Duis urna turpis, aliquam ut lectus ut, sodales congue magna. Praesent lacinia aliquam arcu, ut faucibus ex gravida sit amet. Phasellus aliquet ex sed dapibus sollicitudin. Pellentesque eu dapibus sem, in porta lorem. Vivamus fringilla pulvinar finibus. Vestibulum non molestie purus. Nulla mattis lobortis nunc, nec suscipit arcu ultrices quis.
Aenean feugiat accumsan imperdiet. Morbi ornare turpis ac felis varius, id finibus magna ultrices. Nulla aliquam rhoncus diam non tempor. Aliquam erat volutpat. Vestibulum rhoncus urna eget lorem dictum accumsan eu nec ante. Mauris sollicitudin leo sed ligula ultricies interdum. Nam vehicula quam ut ornare commodo.
pioca
softie
my hero.
like that! thank you.
Fable
₮ⱧɆ ₥Ɏ₮Ⱨ, ₮ⱧɆ ⱠɆ₲Ɇ₦Đ, ₮ⱧɆ ₣₳฿ⱠɆ
Lovely code btw ;3
my hero.
like that! thank you.
Loraenys
The First of Her Name
Does anyone have any recommendations on how to make this even the slightest bit mobile friendly? I have a lot of people wanting to join my role play but some of them are only on mobile and can't see half of it.
The Fort is a zombie apocalypse roleplay based on the popular world of The Walking Dead. The Fort is based around a small community of about 25 survivors, and after one month since the breakout of the zombies the group has found its way aboard The Yankee Freedom, a ferry boat that once shuttled Key West tourists to Fort Jefferson in the Dry Tortugas. The boat currently has enough fuel to make it around 200 miles, and Fort Jefferson is 70 miles out from the Keys. Meaning once they make it to the Fort, the next run for supplies boat fuel will be their top priority, other than not dying of course.
Food will no longer be a problem once they make it to the Fort, as long as no one has an allergy to fish of course. While fresh water could be, considering the the Dry Tortugas are exactly that, dry. No fresh water can be found there, making the ability to boil water a top priority. The group is currently being lead by Emmett Reid, a former Marine Sergeant, who with his skills and leader like qualities he very quickly fell into the role as soon as the group began to look to him for direction. It was his idea to come to the Fort, but is he making the right decision or sending the group to a watery grave?
Welcome to The Fort
The Fort is a zombie apocalypse roleplay based on the popular world of The Walking Dead. The Fort is based around a small community of about 25 survivors, and after one month since the breakout of the zombies the group has found its way aboard The Yankee Freedom, a ferry boat that once shuttled Key West tourists to Fort Jefferson in the Dry Tortugas. The boat currently has enough fuel to make it around 200 miles, and Fort Jefferson is 70 miles out from the Keys. Meaning once they make it to the Fort, the next run for supplies boat fuel will be their top priority, other than not dying of course.
Food will no longer be a problem once they make it to the Fort, as long as no one has an allergy to fish of course. While fresh water could be, considering the the Dry Tortugas are exactly that, dry. No fresh water can be found there, making the ability to boil water a top priority. The group is currently being lead by Emmett Reid, a former Marine Sergeant, who with his skills and leader like qualities he very quickly fell into the role as soon as the group began to look to him for direction. It was his idea to come to the Fort, but is he making the right decision or sending the group to a watery grave?
Alteras
The Sleepy One
You could set the width of the encompassing div to 100%; make the divs inside it have a width of calc(650/655 * 100%) and calc(500/655 * 100%) respectively; and set the max-width of the large one to 655px
You could probably take advantage of flexboxes and their flex-shrink ability instead, to allow the text to take up 100% width when on a small screen. I can explain if you want.
Regardless, its a very good looking code, what you have already.
Loraenys
The First of Her Name
I’m completely self taught so I’m kinda lost when it comes to what things are properly called unfortunately T.T I just see things and figure out what they do.
Could you possibly explain it a little bit more for me. I appreciate the help in general so much! & thank you! I wish I could do more with it but I’m still in a trial and error part of learning since my old specialty was HTML/CSS.
Alteras
The Sleepy One
No worries, we're still in the realm of CSS, just a very updated one. Took me a while to get back into it as well. I'll take it that you know what max-width and padding and stuff are. Calc() can now be used in CSS where numerical values are accepted, stuff like lengths and sizes... just those really are the most applicable. I have a more extensive guide on its usage at CSS Variables and Calc() that you can look at (shameless plug XD). As for Flexboxes, they are a recent addition to CSS that allows for the priority and automatic sizing and placing of elements in respect to page sizes and more user defined functions. It's most applicable function that can be used for in RPN is its ability to resize its elements and have space between elements without any individual and defined property specified. It is widely supported, so there's no problems there, just that it takes quite a while to understand it entirely. Only recently was I able to make full use of it on RPN.
Loraenys
The First of Her Name
Thank you so much! I’m going to try again tomorrow! I’ll check out your guide for sure! Do you mind if I pm you if I get stuck? Thank you again!
Alteras
The Sleepy One
No problem!
fluffinator09
Otherworldly Being
It seems the text in my image float won't wrap. And I think the BBCode Guide is a bit messed up so it doesn't exactly help. Anyone got any solutions?
StoneWolf18
Within the Depths of a Dream
The BBBcode code guide isn't exactly up to date, we're working on that, however.
Mind providing your code?
fluffinator09
Otherworldly Being
Code:
Hello! Welcome to the Army Forge! The Army Forge is a forum roleplay that centers around a group of three to five players, where the players make a fantasy army, then control and maintain it around the land of Garandos. The three to five players work together to try and conquer the whole land.
[imagefloat=right][IMG]https://i.imgur.com/AOTszFr.jpg[/IMG][/imagefloat][/tab]
