• 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

Something like this?



Air
Fixed
Light-blue // Silver
Saturday
Saturn // Uranus
Leo // Sagittarius
20-January // 18-February
T r a i t s

Strengths: Progressive, original, independent, humanitarian.

Weaknesses: Runs from emotional expression, temperamental, uncompromising, aloof.

Likes: Fun with friends, helping others, fighting for causes, intellectual conversation, a good listener.

Dislikes: Limitations, broken promises, being lonely, dull or boring situations, people who disagree with them.


Code:
[row][font=Silla Slab][size=2]

[div=position: relative; width: 100%; height: 100px; overflow: hidden; background-color: white; padding: 10px;][div=width: 100%; padding-right: 150px; height: 100%; overflow-y: scroll; color: gray; font-size: 0.9em; font-align: justify;][column=span3][div=width: 180px;]Air
Fixed
Light-blue // Silver
Saturday
Saturn // Uranus
Leo // Sagittarius
20-January // 18-February[/div][/column]
[column=span5][div=width: 180px;][size=5]T r a i t s[/size]
Strengths: Progressive, original, independent, humanitarian.

Weaknesses: Runs from emotional expression, temperamental, uncompromising, aloof.

Likes: Fun with friends, helping others, fighting for causes, intellectual conversation, a good listener.

Dislikes: Limitations, broken promises, being lonely, dull or boring situations, people who disagree with them.[/div][/column][/div][/div]
[/size][/font][/row][font=Silla Slab][size=2][/size][/font]

ah. almost. i think i can tinker with the code and get it to how i'd like. if i have anymore question, would it be alright if i sent you a pm? i don't want to clog this thread ^^'
 
(Hope it's okay to post here)

Is there a way to fiddle around with the bbc so that the in-line spoilers ( hey ) don't show anything when hovered over? (So basically you retain giant black bars over the text)
Or some other way to get this effect (it has to be in-line tho)?

All the things I tried ended up backfiring in some way of ill use to my purposes xD
 
(Hope it's okay to post here)

Is there a way to fiddle around with the bbc so that the in-line spoilers ( hey ) don't show anything when hovered over? (So basically you retain giant black bars over the text)
Or some other way to get this effect (it has to be in-line tho)?

All the things I tried ended up backfiring in some way of ill use to my purposes xD

You basically want redacted text? However, if someone were to highlight over the inline spoiler, they could still read it.
 
(Hope it's okay to post here)

Is there a way to fiddle around with the bbc so that the in-line spoilers ([inlinespoiler=] hey [/inlinespoiler] ) don't show anything when hovered over? (So basically you retain giant black bars over the text)
Or some other way to get this effect (it has to be in-line tho)?

All the things I tried ended up backfiring in some way of ill use to my purposes xD

La la la
YOU CANNOT READ ME
la la la

This what you mean? (even hilight doesnt reveal it)
 
You basically want redacted text? However, if someone were to highlight over the inline spoiler, they could still read it.

Yea, I just want the look of redacted text. Highlighting isn't an issue. It's more of an aesthetic thing, where the hover-over becomes distracting.
Or using any other method.

Amerikia1126 Amerikia1126

Wait I think you might have got it xD
What did you use there? I'll try and implement

Also thanks both for your time. :3
 
Yea, I just want the look of redacted text. Highlighting isn't an issue. It's more of an aesthetic thing, where the hover-over becomes distracting.
Or using any other method.

Amerikia1126 Amerikia1126

Wait I think you might have got it xD
What did you use there? I'll try and implement

Also thanks both for your time. :3
here's the code

La la la [div=display:inline; background:#333333;][div=display: inline; visibility:hidden;]YOU CANNOT READ ME[/div][/div] la la la
 
i asked for help from a mod and tried out what they suggested with this code but i couldn't get it to work (im not the best at bbcode lmao). what i'm trying to do is get the bottom two boxes centered, but they won't align. any help would be appreciated


stormfaze.regular.png

[ EXCLUSION ZONE: DANGER AHEAD ]
-



stormfaze.regular.png

2ocrv0K.jpg

Info


stormfaze.regular.png

2ocrv0K.jpg

Info



Code:
[div=background:url(https://i.imgur.com/UjZyY29.jpg);background-size:cover;padding:20px;][border=1px solid #7a7a7a][bg=#000000]
[CENTER][IMG]http://txt-dynamic.static.1001fonts.net/txt/dHRmLjM2LmVkZWRlZC5RU0JUSUZRZ1VpQlBJRllndzRRZ1RDQkVJRVVnVWlCTy4wAAAAAAAA/stormfaze.regular.png[/IMG]
[FONT=Rajdhani][SIZE=6][COLOR=rgb(191, 191, 191)][B][ EXCLUSION ZONE: [/B]DANGER AHEAD ][/COLOR][/SIZE][/FONT]
[/CENTER]
[DIV=height: 300px;
width: 300px;
background:URL(https://i.imgur.com/GEPDj5c.jpg);
background-size: cover;
border:5px solid black;
border-radius:50%;
margin:5px;
padding:0px;
margin:auto;][DIV=border-right: 2px solid black;
border-left: 2px solid lightgray;
border-top: 2px solid lightgray;
border-bottom: 2px solid lightgray;
height: 300px;
width: 300px;
position:relative;
left:-8px;
top:-7px;
margin:0px;
padding:5px;
border-radius:50%;
color:transparent;
animation: fa-spin 3s linear infinite;
transform-origin: 50%;]-[/DIV][/DIV]

[row][column=span3][div=background-color:black;
height:440px;
max-width:500px;
padding:10px;][div=background-color:#7a7a7a;
height:15px;
max-width:310px;
color:#fff;
padding:4px;
position:relative;
left:20%;]
[/div][div=background-color:black;
border:1px solid #7a7a7a;
max-width:300px;
height:370px;
font-size:10px;
color:lightgrey;
padding:10px;
position:relative;
left:20%;][div=position: relative;
max-width: 300px;
height: 350px;
overflow: hidden;
background-color:black;
padding:10px;][div=width: 100%;
padding-right: 145px;
height: 100%;
overflow-y: scroll;
font-align: justify;
font-width: bold;][IMG]http://txt-dynamic.static.1001fonts.net/txt/dHRmLjM2LmVkZWRlZC5VMVJQUTB0SVQweE5MQ0F4T1Rnei4wAAAAAAAAAAAA/stormfaze.regular.png[/IMG]
[IMG]https://i.imgur.com/2ocrv0K.jpg[/IMG]
[FONT=Rajdhani][COLOR=rgb(191, 191, 191)]Info[/COLOR][/FONT]
[/div][/div][/div][/div]
[/column][column=span3][div=background-color:black;
height:440px;
max-width:500px;
padding:10px;][div=background-color:#7a7a7a;
height:15px;
max-width:310px;
color:#fff;
padding:4px;
position:relative;
left:20%;]
[/div][div=background-color:black;
border:1px solid #7a7a7a;
max-width:300px;
height:370px;
font-size:10px;
color:lightgrey;
padding:10px;
position:relative;
left:20%;][div=position: relative;
max-width: 300px;
height: 350px;
overflow: hidden;
background-color:black;
padding:10px;][div=width: 100%;
padding-right: 145px;
height: 100%;
overflow-y: scroll;
font-align: justify;
font-width: bold;][IMG]http://txt-dynamic.static.1001fonts.net/txt/dHRmLjM2LmVkZWRlZC5VMVJQUTB0SVQweE5MQ0F4T1Rnei4wAAAAAAAAAAAA/stormfaze.regular.png[/IMG]
[IMG]https://i.imgur.com/2ocrv0K.jpg[/IMG]
[FONT=Rajdhani][COLOR=#bfbfbf]Info[/COLOR][/FONT][/div][/div][/div][/div][/column][/row]

[/bg][/border][/div]
 
Last edited:
i asked for help from a mod and tried out what they suggested with this code but i couldn't get it to work. what i'm trying to do is get the bottom two boxes centered, but they won't align. any help would be appreciated

Woah, that's a nice-looking design there.

What I would recommend is to get a div, put a width to and center it, then use columns / floated divs to make two halves inside of it. For example:
textext
content
Code:
[div=max-width: 800px; margin: 0 auto;][row][column=span4][div=background: blue;]textext[/div][/column][column=span4][div=background: red;]content[/div][/column][/row][/div]
 
Can someone help me? I can't get rid of this picture that seems nonexistent in the code....

tumblr_oof77hxKtu1w16jjko2_400.png

Click​

overflow
code by pasta


Code:
[centerblock=70][row][column=span6]
[div=background:url('https://image.ibb.co/jbgwz5/giphy.gif');background-size:cover; border:#E6B665 double 6px; #000000;padding:6px;][centerblock=100][border=0px solid white][accordion=100%|bcenter|]
{slide=100|bcenter|[bg=white][IMG]https://68.media.tumblr.com/01b6c81c5a679825c1ddb59aa9b1a64f/tumblr_oof77hxKtu1w16jjko2_400.png[/IMG]
[CENTER]
[CENTER]Click[/CENTER]
[/CENTER]
[/bg]}
overflow
{/slide}[/accordion][/border][/centerblock][/div]
[CENTER][SIZE=2]code by pasta [/SIZE][/CENTER]
[/column]
[CENTER][/CENTER]
[/row][/centerblock][row]
[/row]
[code]
[/Spoiler]
 
Can someone help me? I can't get rid of this picture that seems nonexistent in the code....

tumblr_oof77hxKtu1w16jjko2_400.png

Click​

overflow
code by pasta


Code:
[centerblock=70][row][column=span6]
[div=background:url('https://image.ibb.co/jbgwz5/giphy.gif');background-size:cover; border:#E6B665 double 6px; #000000;padding:6px;][centerblock=100][border=0px solid white][accordion=100%|bcenter|]
{slide=100|bcenter|[bg=white][IMG]https://68.media.tumblr.com/01b6c81c5a679825c1ddb59aa9b1a64f/tumblr_oof77hxKtu1w16jjko2_400.png[/IMG]
[CENTER]
[CENTER]Click[/CENTER]
[/CENTER]
[/bg]}
overflow
{/slide}[/accordion][/border][/centerblock][/div]
[CENTER][SIZE=2]code by pasta [/SIZE][/CENTER]
[/column]
[CENTER][/CENTER]
[/row][/centerblock][row]
[/row]
[code]
[/Spoiler]
The picture in the accordion slide?
 
no the picture I want is this
fullsizeoutput_61.jpg
Trying to clear things up here, I'm having difficulty understanding. You want to remove a picture that you can't find in the code, which is either the boy or the gif.
Then you want to replace that picture with your picture.

I'm assuming you want to replace the picture of the boy with your picture.

As a side note, it appears that you have the rich text editor enabled, which may explain you not being able to see the image in the code (I think the rich text editor shows pictures rather than the url, one picture is in a div tag). It also explains the redundant code in your spoiler. Try viewing the code in the bbcode editor if you aren't already.

Anyway, here's what I think you want.

Version with the boy replaced:

fullsizeoutput_61.jpg

Click​

overflow

code by pasta
[centerblock=70][row][column=span6]
[div=background:url('https://image.ibb.co/jbgwz5/giphy.gif');background-size:cover; border:#E6B665 double 6px; #000000;padding:6px;][centerblock=100][border=0px solid white][accordion=100%|bcenter|]
{slide=100|bcenter|[bg=white][IMG]https://image.ibb.co/kU8Vra/fullsizeoutput_61.jpg[/IMG]
[CENTER]Click[/CENTER][/bg]}
overflow
{/slide}[/accordion][/border][/centerblock][/div]
[CENTER][SIZE=2]code by pasta [/SIZE][/CENTER]
[/column][/row][/centerblock]

Version with the gif replaced:

tumblr_oof77hxKtu1w16jjko2_400.png

Click​

overflow

code by pasta
[centerblock=70][row][column=span6]
[div=background:url('https://image.ibb.co/kU8Vra/fullsizeoutput_61.jpg');background-size:cover; border:#E6B665 double 6px; #000000;padding:6px;][centerblock=100][border=0px solid white][accordion=100%|bcenter|]
{slide=100|bcenter|[bg=white][IMG]https://68.media.tumblr.com/01b6c81c5a679825c1ddb59aa9b1a64f/tumblr_oof77hxKtu1w16jjko2_400.png[/IMG]
[CENTER]Click[/CENTER][/bg]}
overflow
{/slide}[/accordion][/border][/centerblock][/div]
[CENTER][SIZE=2]code by pasta [/SIZE][/CENTER]
[/column][/row][/centerblock]
 
Trying to clear things up here, I'm having difficulty understanding. You want to remove a picture that you can't find in the code, which is either the boy or the gif.
Then you want to replace that picture with your picture.

I'm assuming you want to replace the picture of the boy with your picture.

As a side note, it appears that you have the rich text editor enabled, which may explain you not being able to see the image in the code (I think the rich text editor shows pictures rather than the url, one picture is in a div tag). It also explains the redundant code in your spoiler. Try viewing the code in the bbcode editor if you aren't already.

Anyway, here's what I think you want.

Version with the boy replaced:

fullsizeoutput_61.jpg

Click​

overflow

code by pasta
[centerblock=70][row][column=span6]
[div=background:url('https://image.ibb.co/jbgwz5/giphy.gif');background-size:cover; border:#E6B665 double 6px; #000000;padding:6px;][centerblock=100][border=0px solid white][accordion=100%|bcenter|]
{slide=100|bcenter|[bg=white][IMG]https://image.ibb.co/kU8Vra/fullsizeoutput_61.jpg[/IMG]
[CENTER]Click[/CENTER][/bg]}
overflow
{/slide}[/accordion][/border][/centerblock][/div]
[CENTER][SIZE=2]code by pasta [/SIZE][/CENTER]
[/column][/row][/centerblock]

Version with the gif replaced:

tumblr_oof77hxKtu1w16jjko2_400.png

Click​

overflow

code by pasta
[centerblock=70][row][column=span6]
[div=background:url('https://image.ibb.co/kU8Vra/fullsizeoutput_61.jpg');background-size:cover; border:#E6B665 double 6px; #000000;padding:6px;][centerblock=100][border=0px solid white][accordion=100%|bcenter|]
{slide=100|bcenter|[bg=white][IMG]https://68.media.tumblr.com/01b6c81c5a679825c1ddb59aa9b1a64f/tumblr_oof77hxKtu1w16jjko2_400.png[/IMG]
[CENTER]Click[/CENTER][/bg]}
overflow
{/slide}[/accordion][/border][/centerblock][/div]
[CENTER][SIZE=2]code by pasta [/SIZE][/CENTER]
[/column][/row][/centerblock]
OMG thank you!!!! you somehow figured it out!!!
I did want the boy replaced, so thank you so much!
 
this has probably been answered already... haa

i'm assuming it's created with divs, but i was wondering how to make a background with an underlying "shadow"
 
How do you make the side-bar-things BIGGER?

By side bar, I mean these:
Strength: 19
Dexterity: 12
Constitution: 14
Intelligence: 17
Wisdom: 8
Charisma: 11
 
I tried putting div images inside an accordion slide when it opens, and I've got a bit of an issue. A small one. Just that the div image isn't completely filling the slide.

it's kinda blocky coding, nowhere near as smooth as most codes.. I plan on putting more effort in when I make an actual character sheet haha

Anyways here it is:



c1dbbc4d823bc8bbb9f2329aa2935d77.jpg


And watch me fall
through this hole of my creation
and into the sea


oh god please
text
x
x
x
x
x
x
x
x
x
x
x
x
x

don't let this be the end
text
x
x
x
x
x
x
x
x
x
x
xx
for my soul
text
x
x
x
x
x
x
x
x
x
x
x


 
Last edited:
I tried putting div images inside an accordion slide when it opens, and I've got a bit of an issue. A small one. Just that the div image isn't completely filling the slide.

it's kinda blocky coding, nowhere near as smooth as most codes.. I plan on putting more effort in when I make an actual character sheet haha

Anyways here it is:



c1dbbc4d823bc8bbb9f2329aa2935d77.jpg


And watch me fall
through this hole of my creation
and into the sea


oh god please
text
x
x
x
x
x
x
x
x
x
x
x
x
x
don't let this be the end


text
x
x
x
x
x
x
x
x
x
x
xx
for my soul


text
x
x
x
x
x
x
x
x
x
x
x



If you mean the space at the top, remove the whitespace in that part of your code. Reduces readability but removes that space too. As for the space at the sides, adding a "margin:-10px;" to the end of the div tag there seems to work. Also, you typoed padding as pagging.
 

Users who are viewing this thread

Back
Top