A Somewhat Extensive Guide to BBCodes
Forum Index > PokéFarm > Guides >
Where would be a good place to learn how to switch a pre-existing HTML layout code to a BBcode? O.o
I currently have a layout that I REALLY Like and the creator has given me permission to use it on PFQ ... The only problem is that it's HTML instead of BBCode and I have a very basic running knowledge of BBcode.
Just trying to figure this out!
Huffs in a low voice. Why must everything be so difficult?!
549/3,000 
Unfortunately most HTML isn’t usable on PFQ, as not all of the code can easily be transformed into BBCode, even with CSS. If you wanna PM me with the HTML in a hide box, I’d be glad to look through it and see what I can do.
Bullet Journal xx Freebies xx Send me a PM
Guides:
BBCode xx Templates xx CSS xx Styleclass
Avatar from pokesho (archive)
QUOTE originally posted by Niall
Unfortunately most HTML isn’t usable on PFQ, as not all of the code can easily be transformed into BBCode, even with CSS. If you wanna PM me with the HTML in a hide box, I’d be glad to look through it and see what I can do.
How do I get,for example an 80% wide hide box, to be aligned in the centre?
e.g
edit; Btw, I know I can just use the margin-left code with percentages, eg .panel {text-align: center; width: 60%;
&>div { background: white; color: black; border:1px solid black; text-align:center; margin-left: 15%;}} but I'm kinda hoping there's an easier way >.<
I want this to be in the middle
Not the text - the heading and the panel
aaa
QUOTE originally posted by Magikx
How do I get,for example an 80% wide hide box, to be aligned in the centre?
edit; Btw, I know I can just use the margin-left code with percentages but I'm kinda hoping there's an easier way >.<
margin: 0 auto;
to center it.
Code
.panel{
width: 80%;
margin: 0 auto;
}
text-align: center;
with .panel having a display of inline-block
if you really don't want to use margin, but there is a lot of extra code for something that could easily be done in less lines.
Code
.box {
text-align: center;
}
.box .panel {
width: 80%;
display: inline-block;
text-align: left;
}
PFP/BG/IMG from Golden Sun
Code Collection
Code Collection
Thank you! That helps a lot.
Also, can someone tell me why this code isn't working? (The hover part). It goes to the corner in my about me.
My timezone is GMT (server time or +1hr). Be respectful of that.
Field are mostly S+S. Sorry for the mess they are in.
Open to battle requests.
Hover For Click Policy!
I usually fully click back, however if you click less than a full party I return one click. I massclick back, unless I have a lot of people to clickback. If Pokerus, I party clickback. Sometimes I have school and only rarely come on.
Sorry
They/Them
ESTP
Leo
Slytherin
x16
I've played Pokemon Omega Ruby, Pokemon Y, Pokemon Moon, Pokemon Super Mystery Dungeon and Pokemon Go. Aiming to play a more original/old game in the future.
♥Anime
x16
I've played Pokemon Omega Ruby, Pokemon Y, Pokemon Moon, Pokemon Super Mystery Dungeon and Pokemon Go. Aiming to play a more original/old game in the future.
♥Anime∞ Assassination Classrooom ∞ Angel Beats ∞ Fairy Tail ∞ Your Lie in April ∞ Death Note ∞ Miss Kobyashi's Dragon Maid ∞
, Pokemon, Steven Universe, Harry Potter, Percy Jackson, HTTYD♥
Code
[sc=mainbodybg][img]https://pokefarm.com/upload/Magikx/rsz_3strawberryicon.png[/img][sc=strawbutton][accordion=1]
[a-section="[img]https://pokefarm.com/upload/Magikx/button1.png[/img]"]Content1[/a-section]
[a-section="[img]https://pokefarm.com/upload/Magikx/button2.png[/img]"]Content 2[/a-section]
[a-section="[img]https://pokefarm.com/upload/Magikx/button3.png[/img]"]Content 3[/a-section][/accordion][/sc][sc=notetaker]Credits[/sc][sc=hoveringstrawb][img]https://pokefarm.com/upload/Magikx/strawb.png[/img][/sc][/sc]
[style]
img[src*="rsz_3strawberryicon"] {
image-rendering: smooth;
width: 100px;
margin-left: 15px;
margin-top: 15px;
}
img[src*="button"] {
image-rendering: smooth;
width: 50px;
}
.mainbodybg {
border-radius: none;
padding: 2px;
background-color: white;
color: black;
font-family: courier;
width: 100%;
height: 400px;
font-size: 13px;
}
.strawbutton .panel { min-width: 50px; border:none;
&>h3 {
background-color:transparent;
border:0px solid transparent;
border-radius: 0px;
margin-left: 120px;
margin-top: -30px;
position:absolute; }
&>h3:nth-child(3) {
background-color:transparent;
margin-left: 180px;
margin-top:-30px; }
&>h3:nth-child(5) {
background-color:transparent;
margin-left: 240px;
margin-top:-30px;
float: left;}
&>h3 a { color: transparent;}
&>h3 span { color: transparent;}
&>div { background: rgba(0, 0, 0, 0.30); color:white; position:absolute; margin-top: 5px; margin-left: 15%; width: 60%; border:1px solid transparent; padding:10px; text-align:center; float: center;-moz-border-radius: 0px 0px; border-radius: 10px; }
}
.notetaker {
text-align: center;
margin-top: 275px;
margin-right: 2%;
font-family: calibri;
color: black;
font-size: 9.5px;
}
.tooltip_content {
background: #171717;
color: #fff;
border: 1px solid white;
border-radius: 0px;
font-size: 12px;
}
.hoveringstrawb{
display: in-line block;
position: absolute;
top: 0;
left: 0;
transition: all 1s;
}
.mainbodybg:hover .hoveringstrawb {
left: 300px;
}[/style]
Excuse me, but my image won't become larger,
Here's the image:
on Spriter's Resource
Edited by me!
The size is currently 28x27 px...
Here's the code
[style].img{width: 100px;}[/style]
[img]https://pokefarm.com/upload/Litten_Lover/Charmander_and_Bulbasaur_Fusion.png[/img]
Credit
on Spriter's Resource
Edited by me!Laura made my icon~
Remove the dot, since img is an already made class by PFQ. You need a dot for your own classes~ Others can explain it better
[style]img{width: 100px;}[/style]
[img]https://pokefarm.com/upload/Litten_Lover/Charmander_and_Bulbasaur_Fusion.png[/img]QUOTE originally posted by Magikx
Remove the dot, since img is an already made class by PFQ. You need a dot for your own classes~ Others can explain it better
[style]img{width: 100px;}[/style]
[img]https://pokefarm.com/upload/Litten_Lover/Charmander_and_Bulbasaur_Fusion.png[/img]Thank you so much!
Heya! I'm trying to make it so that my hide baxes are slightly smaler in width compared to their container! However, I come across the issue where the background of the empty space doesn't appear as the rest of the container's background! It looks like this: 
Hidebox code, Pleas elet me know if you need the whole code!
.panel { border: 2px ;
&>h3 {
&>a {color: #E8EBCC; }
color: #f6dfad;
background: #8CBEC2;
text-align: Center;
width: 90%;
border: solid 3px white;
margin: auto;
}
&>div {
color: #295C5E;
background: #D5DDE5;
text-align: center;
min-width: 98%;
}
/ 
‹𝟥 Cannot post: Please log in to post