BBCode Help

Status
Not open for further replies.
Just, centered?
 
@Tribulation

As far as I'm aware you can't manipulate encadre's. What exactly do you mean by text-box tho, cause if you want it transparent, you have to use DIVS and like EJ said, use the opacity tag!
 
Code: 
 [div=background-image:url(http://i1237.photobucket.com/albums/ff477/TakashiKien/samurai-1.jpg); height: auto; width:100%; margin; auto auto; background-repeat:repeat-y; background-attachment: fixed;]
[solid=#191919][/solid]
[/LEFT]
[div=background-image:url(http://i1237.photobucket.com/albums/ff477/TakashiKien/samurai-1.jpg); height: auto; width:100%; margin; auto auto; background-repeat:repeat-y; background-attachment: fixed;]

[div=background-image:url(http://i1237.photobucket.com/albums/ff477/TakashiKien/samurai-1.jpg); height: auto; width:100%; margin; auto auto; background-repeat:repeat-y; background-attachment: fixed;][/coding]

-Can't get the image to fit the screen.

-As for the "text-box" It's a visual that sits in front of the background image, but can have a slider depending how much info you input into it.

Nydanna's Newbie attempt at coding stuff

-This is Nydanna's work. But see how the middle of the page is boxed in? It has those large square field set things. I want to make it transparent, with a slider about that size and have the fonts glow so they stand out but you can still see the full image behind the words.

Does that make any more sense?

@rissa​
 
Last edited:
@Tribulation

Do you have the RTE on?

Basically, for recreating Nydanna's code you'd need two DIVS "nested" within each other. The outer DIV would be "wider/taller" than the DIV within that one! The second DIV would contain your opacity code and text.
 




Y3Cwhir.gif

lsdjflksajdflksjdf;ijasoflasjfdlksjdf
sf;djalsjdflkajsdflas
df[a;sjdfikasdflsjkdf




Something like this; except I want the WHOLE image, that one's cut off from the original, and the name at the top?
 
And nonrepeating. LOL!
 




Y3Cwhir.gif

lsdjflksajdflksjdf;ijasoflasjfdlksjdf
sf;djalsjdflkajsdflas
df[a;sjdfikasdflsjkdf
 
Tribulation said:




Y3Cwhir.gif

lsdjflksajdflksjdf;ijasoflasjfdlksjdf
sf;djalsjdflkajsdflas
df[a;sjdfikasdflsjkdf
Click to expand...

I'm on mobile, so I can't go into depth, but it'll work essentially the same way as the other code you had help with a while back. If you use those principles, just adding in the transparency aspect, you should be good.

Might considering using a test thread, so you can practice there :)
 
Code: 
[code]
[div=background:url(http://i1237.photobucket.com/albums/ff477/TakashiKien/samurai-1.jpg); background-size: 90%;]

[justify][IMG]https://i.imgur.com/er28ZO5.gif[/IMG][/justify]

[div=margin: auto; width: 90%; background: white; opacity: 0.7; color: black; padding: 40px;]

[center]lsdjflksajdflksjdf;ijasoflasjfdlksjdf
sf;djalsjdflkajsdflas
df[a;sjdfikasdflsjkdf[/center][/div]

[/div]




er28ZO5.gif



lsdjflksajdflksjdf;ijasoflasjfdlksjdf
sf;djalsjdflkajsdflas
df[a;sjdfikasdflsjkdf​


 
Still, can't see the whole picture; can anyone else?
 
@Tribulation I can see the picture repeating, but that's probably cause I'm on mobile. Try setting the background-size of the div with the image to either cover or contain. Here's a reference to what values you can have on background-size and what they do [link]

To make it such that the background image doesn't repeat, just set background-repeat to no-repeat.
 
This is as much as I could do, but I still can't get the whole image to show up in the background, nor move the black box up towards the top of the image.

Code: 
[div=background:url(http://i1237.photobucket.com/albums/ff477/TakashiKien/samurai-1.jpg); background-size: cover;]


[div=margin: auto; width: 80%; background: #43464B; opacity: 0.7; color: white; padding: 20px;]


[CENTER][IMG]https://s-media-cache-ak0.pinimg.com/originals/ba/38/64/ba38640fda92880bd98ebdf7259d1380.gif[/IMG]

[shadow=#3E0068] lsdjflksajdflksjdf;ijasoflasjfdlksjdf
sf;djalsjdflkajsdflas
df[a;sjdfikasdflsjkdf[/shadow][/CENTER]
[shadow=#200035]
[/shadow][/div]

[/div]

@darkflames13 @firejay1 @Cairo @rissa @Elle Joyner
 
Last edited:
Tribulation said:
This is as much as I could do, but I still can't get the whole image to show up in the background
Click to expand...
That's cause the height of the div isn't enough to support the dimensions of the background image. Try setting a height for the outermost div, like say maybe... 500px or so. Just fiddle around with the value till your satisfied with the result.

Tribulation said:
nor move the black box up towards the top of the image.
Click to expand...
I'm not sure too sure of what exactly you want it to look like, but it you want the inner box to be flush against the top of the outer box with the background image, then just remove the linebreaks between them.

Also, just a quick note to add, if you want a place to fiddle around with codes, please do it in the test chambers. This thread is a place to seek help with bbcodes, not a place to for individuals to post their experiments with codes. n__n
 
  • Thank You
Reactions: rissa
darkflames13 said:
That causes the height of the div isn't enough to support the dimensions of the background image. Try setting a height for the outermost div, like say maybe... 500px or so. Just fiddle around with the value till you're satisfied with the result.

I'm not sure too sure of what exactly you want it to look like, but if you want the inner box to be flush with the top of the outer box with the background image, then just remove the line breaks between them.
Click to expand...

I tried adding height perimeters; not sure if I added it to the right place or not; I think it was something like this:

Code: 
[div=margin: auto; width: 80%; height: cover; background: #43464B; opacity: 0.7; color: white; padding: 20px;]

Ultimately, I'd like the whole picture, not just half of it. And the black, transparent margin box to cover most of the image; not obscuring the background image, but having shadowed words hovering over it that are legible.

* Edit, I did away with the above code because I realized I was putting it in the wrong location. That said:

Code: 
[div=background:url(http://i1237.photobucket.com/albums/ff477/TakashiKien/samurai-1.jpg); background-size: 600px;]
Show's the entire picture, though I'm no convinced it will be 'long' enough to stretch the length of the character profile; it also has two images side by side. 700px is large but it doesn't show the entire image.

darkflames13 said:
Also, just a quick note to add, if you want a place to fiddle around with codes, please do it in the test chambers. This thread is a place to seek help with bbcodes, not a place to for individuals to post their experiments with codes. n__n
Click to expand...

Uhm, I do? Character Sheet Set-up see? This forum is to ask for help with BBCoding, which is what I've been doing.
 
Last edited:
@Tribulation My apologies then. It just seemed like you didn't have one based off your previous posts in the thread n_n

As I've mentioned, you add a height value to the outermost div (the one with the background image added to it). Although having a height set to the inner div (the black transparent one) should also be a viable solution since the outer div would just increase in size to accommodate the size of the inner div.

Cover isn't an acceptable value for the height property, unfortunately. The height property only accepts length values such as for example, like I said previously, 500px. A length value consists of an integer followed by a unit. Another example of a length value would be 80%. px and % are only some of the units that can be used, but they're the most commonly used ones.
 
Apology accepted; though I probably did look like I was cluttering the forum. I'm just trying to understand all this, but with having had a stroke, my mind kind derps on me so, I need to be guided.

Also, you asked what I wanted? @espoir post was very reminiscent of what I wanted. And one you corrected, I believe.

Code: 
[div=
height:670px;
width:456px;
background:url(https://cdn.nickpic.host/images/IUejhm.jpg);
padding:15px;
border: 1px solid;
margin-left: 10px;
margin-right: 10px;
border-radius:5px;
display:inline-block;][div="margin:1em; display:inline-block; border-radius: 4px; width: 32px; height: 32px; box-shadow: 0 0 2px 1px #00345E;"][div="opacity: 0.125; width: 32px; height: 32px; overflow: hidden;"][div="position: absolute; top: -134px; left: 0;"][media=youtube]KxYrQcycDMM[/media][/div][/div][/div][div=display:inline-block;
font-family: abel;
font-size:20px;
color: #00345E;]I N D I G O C H I L D ▽ ▲ ▽ ▲[/div]
[div=
background-color: #000000;
text-align: justify;
border-top: 1px solid black;
border-bottom: 1px solid black;
padding:7px;
overflow-y: scroll;
width: 430px;
height: 570px;
margin-left:5px;
margin-right:8px;
opacity: 0.5;
font-size: 11px;
font-family:Lato;]
Ut nunc neque, tincidunt a risus ut, viverra lacinia nulla. Suspendisse id ante id diam posuere rutrum. Nullam egestas arcu vitae neque bibendum tincidunt. Vestibulum rutrum arcu vitae blandit varius. Fusce blandit justo ultricies, suscipit nulla luctus, varius urna. Morbi facilisis laoreet neque, luctus euismod nunc pulvinar ac. Aenean ut risus et tellus pharetra interdum. Etiam fermentum dignissim nisl in euismod. Donec ac commodo metus. Aliquam erat volutpat. In sapien tellus, pretium ac semper ut, volutpat nec leo. Aliquam consectetur malesuada justo, tristique accumsan lorem fringilla id. Vivamus tristique ipsum nec sapien pulvinar, vitae auctor mi varius.

[/div][/div]

@darkflames13
 
Last edited:
Maybe a bit wider to accommodate the image I wanted to use. With the gif set at the very top, like a title; the text would be shadowed with this color so it'd be legible.

I tried using the template but replacing the background, it didn't work out so well. It made two images, one above the other. So, I'd need something a bit bigger.

Code: 
[div=height:541px; width:800px; background:url(http://i1237.photobucket.com/albums/ff477/TakashiKien/samurai-1.jpg);

It made the image, but the transparent block with the scroll was too narrow. >.o
 
Last edited:
@darkflames13, @rissa,

Okay, so with a bit of coaching from @espoir and a lot of f***ing frustration--this is what I have come up with.

Questions:​
  1. How can I move the [||]T. A..K.E.S.H.I /|\ Y.U.U.T.A[||] more to the middle?
  2. I saw a page of symbols and such; where can I find that page?
Code: 
[div=
height:541px;
width:800px;
background:url(http://i1237.photobucket.com/albums/ff477/TakashiKien/samurai-1.jpg);
border: 1px solid;
margin-left: 10px;
margin-right: 10px;
border-radius:5px;
display:inline-block;][div="margin:1em; display:inline-block; border-radius: 4px; width: 32px; height: 32px; box-shadow: 0 0 2px 1px #00345E;"][div="opacity: 0.125; width: 32px; height: 32px; overflow: hidden;"][div="position: absolute; top: -134px; left: 0;"][media=youtube]IUiAcXLb2eg[/media][/div][/div][/div] [div=display:inline-block;
font-family: abel;
font-size:20px;
color: Black;] [||]T. A..K.E.S.H.I /|\ Y.U.U.T.A[||] [/div]
[div=
background-color: #000000;
text-align: justify;
border-top: 1px solid black;
border-bottom: 1px solid black;
padding:7px;
overflow-y: scroll;
width: 770px;
height: 460px;
margin-left:5px;
margin-right:8px;
opacity: 0.5;
font-size: 18px;
font-family:Lato;]
[CENTER][IMG]https://s-media-cache-ak0.pinimg.com/originals/8d/36/e8/8d36e8dd30fa0224c2b681cfda13e659.gif[/IMG][/CENTER]
[shadow=#000000] Ut nunc neque, tincidunt a risus ut, viverra lacinia nulla. Suspendisse id ante id diam posuere rutrum. Nullam egestas arcu vitae neque bibendum tincidunt. Vestibulum rutrum arcu vitae blandit varius. Fusce blandit justo ultricies, suscipit nulla luctus, varius urna. Morbi facilisis laoreet neque, luctus euismod nunc pulvinar ac. Aenean ut risus et tellus pharetra interdum. Etiam fermentum dignissim nisl in euismod. Donec ac commodo metus. Aliquam erat volutpat. In sapien tellus, pretium ac semper ut, volutpat nec leo. Aliquam consectetur malesuada justo, tristique accumsan lorem fringilla id. Vivamus tristique ipsum nec sapien pulvinar, vitae auctor mi varius.

Ut nunc neque, tincidunt a risus ut, viverra lacinia nulla. Suspendisse id ante id diam posuere rutrum. Nullam egestas arcu vitae neque bibendum tincidunt. Vestibulum rutrum arcu vitae blandit varius. Fusce blandit justo ultricies, suscipit nulla luctus, varius urna. Morbi facilisis laoreet neque, luctus euismod nunc pulvinar ac. Aenean ut risus et tellus pharetra interdum. Etiam fermentum dignissim nisl in euismod. Donec ac commodo metus. Aliquam erat volutpat. In sapien tellus, pretium ac semper ut, volutpat nec leo. Aliquam consectetur malesuada justo, tristique accumsan lorem fringilla id. Vivamus tristique ipsum nec sapien pulvinar, vitae auctor mi varius.

Ut nunc neque, tincidunt a risus ut, viverra lacinia nulla. Suspendisse id ante id diam posuere rutrum. Nullam egestas arcu vitae neque bibendum tincidunt. Vestibulum rutrum arcu vitae blandit varius. Fusce blandit justo ultricies, suscipit nulla luctus, varius urna. Morbi facilisis laoreet neque, luctus euismod nunc pulvinar ac. Aenean ut risus et tellus pharetra interdum. Etiam fermentum dignissim nisl in euismod. Donec ac commodo metus. Aliquam erat volutpat. In sapien tellus, pretium ac semper ut, volutpat nec leo. Aliquam consectetur malesuada justo, tristique accumsan lorem fringilla id. Vivamus tristique ipsum nec sapien pulvinar, vitae auctor mi varius.

[/shadow]

[||]T. A..K.E.S.H.I /|\ Y.U.U.T.A[||]


8d36e8dd30fa0224c2b681cfda13e659.gif
Ut nunc neque, tincidunt a risus ut, viverra lacinia nulla. Suspendisse id ante id diam posuere rutrum. Nullam egestas arcu vitae neque bibendum tincidunt. Vestibulum rutrum arcu vitae blandit varius. Fusce blandit justo ultricies, suscipit nulla luctus, varius urna. Morbi facilisis laoreet neque, luctus euismod nunc pulvinar ac. Aenean ut risus et tellus pharetra interdum. Etiam fermentum dignissim nisl in euismod. Donec ac commodo metus. Aliquam erat volutpat. In sapien tellus, pretium ac semper ut, volutpat nec leo. Aliquam consectetur malesuada justo, tristique accumsan lorem fringilla id. Vivamus tristique ipsum nec sapien pulvinar, vitae auctor mi varius.[

Ut nunc neque, tincidunt a risus ut, viverra lacinia nulla. Suspendisse id ante id diam posuere rutrum. Nullam egestas arcu vitae neque bibendum tincidunt. Vestibulum rutrum arcu vitae blandit varius. Fusce blandit justo ultricies, suscipit nulla luctus, varius urna. Morbi facilisis laoreet neque, luctus euismod nunc pulvinar ac. Aenean ut risus et tellus pharetra interdum. Etiam fermentum dignissim nisl in euismod. Donec ac commodo metus. Aliquam erat volutpat. In sapien tellus, pretium ac semper ut, volutpat nec leo. Aliquam consectetur malesuada justo, tristique accumsan lorem fringilla id. Vivamus tristique ipsum nec sapien pulvinar, vitae auctor mi varius.

Ut nunc neque, tincidunt a risus ut, viverra lacinia nulla. Suspendisse id ante id diam posuere rutrum. Nullam egestas arcu vitae neque bibendum tincidunt. Vestibulum rutrum arcu vitae blandit varius. Fusce blandit justo ultricies, suscipit nulla luctus, varius urna. Morbi facilisis laoreet neque, luctus euismod nunc pulvinar ac. Aenean ut risus et tellus pharetra interdum. Etiam fermentum dignissim nisl in euismod. Donec ac commodo metus. Aliquam erat volutpat. In sapien tellus, pretium ac semper ut, volutpat nec leo. Aliquam consectetur malesuada justo, tristique accumsan lorem fringilla id. Vivamus tristique ipsum nec sapien pulvinar, vitae auctor mi varius.

 
Last edited:
Oh, I forgot to add; I noticed that 100% default zoom for the browser, so I changed it to about 87%. I can see the WHOLE image.

@espoir mentioned that it might be a resolution issue?
 
You need to put a margin: auto auto; tag on the name to move it to the center (or try text-align: center;) Gonna have to play around and see which works better. As for the symbols, there are several sites around - just google 'copy paste symbols' and see what comes up.

As for why you can't see the whole image - a lot of time this has to do with how big it is (resolution) OR how much content you have written in the form. If you only have enough content to fill a small space, that's all you're gonna get otherwise.

And would you mind not tagging Cairo ? I mentioned to you before, she was in this thread looking for help, not looking to OFFER help.
 
  • Like
Reactions: Tribulation and espoir
Status
Not open for further replies.
Top Bottom
Back