A Somewhat Extensive Guide to BBCodes
Forum Index > PokéFarm > Guides >
What is a basic way to code an image as a background, with a box in the center for text? The box has some transparency to see through to the background. I can never get past this...
(Sorry it's a screenshot I can't copy paste I'm on mobile)
my code
Ok. I cleaned up your code a bit; you had some syntax problems. The main things here that make this work are the semitransparent background using the rgba notation, where the final value sets how see-through the color is. And then you need two levels of style-class, one for the outer background and one for the inner text area. I also set a minimum height on the background image so you can always see the important parts of the image. And I set the background image size to "cover", which makes the browser pick a size that fits best.
I can explain more if you have questions about anything specific. If possible, I suggest formatting your code similarly to how I have mine so you can see possible syntax problems more easily. Keep in mind that even with the white background the text may be hard to read if the text background is too transparent or if the image background is too busy. Wooloo in particular makes things hard because it has both white and black areas on it, so it's hard to pick good background/text colors to match. This might be fine for small amounts of text, but people may not want to read large paragraphs in this way.
Samples
This is some short text that's in a box.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam luctus ligula eget vehicula ultrices. Cras et eros placerat, mattis justo ut, volutpat elit. Nulla risus augue, viverra eu nisi vitae, elementum dapibus arcu. Integer non pulvinar tellus. Praesent ut varius nisl, sed dapibus sapien. Fusce et dignissim purus. Nam nec scelerisque odio. Vivamus eget nisl at metus luctus hendrerit. Morbi rhoncus, nisl ac porta semper, augue lectus eleifend enim, at semper libero mauris vitae nunc. Pellentesque maximus eros eu commodo faucibus. Aenean ultricies interdum auctor. Nunc hendrerit pharetra enim, ac molestie nisi ultricies et. Praesent semper elit vel felis viverra, in laoreet augue aliquam.
Code
[sc=base][sc=text]This is some short text that's in a box. [/sc][/sc]
[style]
.base {
background: url("https://cdn.vox-cdn.com/uploads/chorus_image/image/65732902/wooloo.0.jpg") center center no-repeat;
background-size: cover;
border: solid white 3px;
min-height: 200px;
}
.text {
background-color: rgba(255,255,255,0.8);
color: black;
border-radius: 10px;
padding: 10px;
width: 80%;
margin: 15px auto;
}
[/style]
This makes a bit more sense, the way you explained it is very helpful, thank you. I can see some of my mistakes already, but now I know! Thank you very much!
Is there a way to make the hidebox titles a certain color every time in a template? I'd like to change it into white since I can't really read the black against purple and I'm too lazy to add the color tags every time TT_TT;
thingy
NO PMS.Maybe when PMs are organizable I'll find an actual signature :/
What’s the code for it?
(It might be the same issue I was having in which case you might have to add “ color: white;” to the “th” block)
❝ About Deandra ❞
Deandra - 19 - PMs welcome - MHA fan -
Wing drawing ^ made by me - PFP credit Hawks on Amino
Currently hunting Scatterbug: 4989H/9A/59S/0M
code
[style].template {
.top {background-color: white; border-radius:15px; box-shadow:none; border:3px solid #463971; text-align:left; color:black; min-height:150px; padding:5px; text-align:justify; word-spacing:5px; color:black; font-size:10pt;}
.main {background-color:white; border-radius:15px; box-shadow:none; border:3px solid #463971;height:auto; color:black; padding:5px; font-size:10pt; }
.bg {background:url('https://i.imgur.com/0ieOsSH.jpg'); border-radius:15px; repeat:repeat-y;}
.bottom {background-color:white; border:3px solid #463971; border-radius:15px; color:white; font-size:10pt; text-align:right; padding-right:8px; }
a:link {color:black; text-decoration-style:dashed; transition:all .6s; }
a:visited {color:#564088; }
A:hover {text-shadow:2px 2px 2px #8868D7; color:#463971; letter-spacing:2px; }
A:active {color:#564088; }
h1 {font-size:20pt;}
h2 {font-size:18pt;}
h3 {font-size:16pt;}
h1, h2, h3 {background:url('https://i.imgur.com/0ieOsSH.jpg'); background-size:100%; color:white; font-family:"sweet pea";}
B {color:#463971; font-family:"sweet pea"; font-size:13pt; }
I {color:#8868D7; }
U {text-decoration-style:wavy; text-decoration-color:#8868D7; }
.tooltip_content {border:2px solid #463971; background:white; color:black;}
span.bbcode_tooltip {border-bottom:1px dotted black;}
table {margin:auto; border:none; box-shadow:none; }
th {border:2px solid #463971; padding:4px; background:linear-gradient(180deg, #8868D7, #564088); color:white;}
td {border:2px solid #463971; padding:4px; text-align:center; transition:all .6s; }
td:hover {background:#8868D7; color:white; }
.panel {border:none; border-radius:0px; background:none; box-shadow:none;
&>h3 {box-shadow:none; border-radius:0px; }
&>div {box-shadow:none; border-radius:0px; color:black; border:2px solid #463971; } }
.expbar { border:2px solid #463971; border-radius:0px; background-color:#8868D7; box-shadow:none; &>div {border-right:none; background-color:#564088; } }
ul {list-style: circle; }
ol {list-style:lower-roman; }
@font-face { font-family: "sweet pea"; src: url('https://dl.dropboxusercontent.com/s/djpkl58kejckcb5/Sweet%20Pea_2.ttf?dl=0'); format("truetype");}}
[/style]
[sc=template][sc=bg][sc=top][h3]header[/h3]
things[/sc]
[sc=main]CONTENTS HERE[/sc]
[sc=bottom][url=https://pokefarm.com/forum/post/3668856]credits[/url][/sc][/sc][/sc]
beans
hi
Yep^^
Where should I put it in the code?
since you already have a panel section, you’ll just need to add the ‘a’ stuff!
here’s the full code; i’ve set the color to purple for now!
code
[style].template {
.top {background-color: white; border-radius:15px; box-shadow:none; border:3px solid #463971; text-align:left; color:black; min-height:150px; padding:5px; text-align:justify; word-spacing:5px; color:black; font-size:10pt;}
.main {background-color:white; border-radius:15px; box-shadow:none; border:3px solid #463971;height:auto; color:black; padding:5px; font-size:10pt; }
.bg {background:url('https://i.imgur.com/0ieOsSH.jpg'); border-radius:15px; repeat:repeat-y;}
.bottom {background-color:white; border:3px solid #463971; border-radius:15px; color:white; font-size:10pt; text-align:right; padding-right:8px; }
a:link {color:black; text-decoration-style:dashed; transition:all .6s; }
a:visited {color:#564088; }
A:hover {text-shadow:2px 2px 2px #8868D7; color:#463971; letter-spacing:2px; }
A:active {color:#564088; }
h1 {font-size:20pt;}
h2 {font-size:18pt;}
h3 {font-size:16pt;}
h1, h2, h3 {background:url('https://i.imgur.com/0ieOsSH.jpg'); background-size:100%; color:white; font-family:"sweet pea";}
B {color:#463971; font-family:"sweet pea"; font-size:13pt; }
I {color:#8868D7; }
U {text-decoration-style:wavy; text-decoration-color:#8868D7; }
.tooltip_content {border:2px solid #463971; background:white; color:black;}
span.bbcode_tooltip {border-bottom:1px dotted black;}
table {margin:auto; border:none; box-shadow:none; }
th {border:2px solid #463971; padding:4px; background:linear-gradient(180deg, #8868D7, #564088); color:white;}
td {border:2px solid #463971; padding:4px; text-align:center; transition:all .6s; }
td:hover {background:#8868D7; color:white; }
.panel {border:none; border-radius:0px; background:none; box-shadow:none;
&>h3 {box-shadow:none; border-radius:0px; }
&>a {color: purple;}
&>div {box-shadow:none; border-radius:0px; color:black; border:2px solid #463971; } }
.expbar { border:2px solid #463971; border-radius:0px; background-color:#8868D7; box-shadow:none; &>div {border-right:none; background-color:#564088; } }
ul {list-style: circle; }
ol {list-style:lower-roman; }
@font-face { font-family: "sweet pea"; src: url('https://dl.dropboxusercontent.com/s/djpkl58kejckcb5/Sweet%20Pea_2.ttf?dl=0'); format("truetype");}}
[/style]
[sc=template][sc=bg][sc=top][h3]header[/h3]
things[/sc]
[sc=main]CONTENTS HERE[/sc]
[sc=bottom][url=https://pokefarm.com/forum/post/3668856]credits[/url][/sc][/sc][/sc]
Is there a way to get the [pkmn=] code for XD001? [pkmn=XD001] just generates the standard Lugia minisprite, as seen below, and [pkmn=Lugia/XD001] doesn't register as valid.
- Shops
- Best Melans
- A Christmas Bee, for Melan Luck
Cannot post: Please log in to post