EASY TUTORIALS: Code and Images
Jul 29, 2016 19:20:48 GMT -5
mermaids, ℬⒾᵀᵀ℈ℛ𝚂ᵚᴱᴱ𝔗 ℞ℇℳᶤИᶤ𝕊¢ᘿղςꂅ, and 59 more like this
Post by Brownie on Jul 29, 2016 19:20:48 GMT -5
Hello, and welcome to this little tutorial on how to transfer WCF HTML coding to the WRPF BBCode. It's actually a lot simpler than it may seem, and it's not a huge jump in coding! We'll all get the hang of it quickly, don't worry! This tutorial will cover the basics of how to transfer already made codes from the WCF here, and will also note some of the possible limitations of BBCode as well as how to make new code entirely in BBCode.
As a side note, I used to run a few premade code pages (of which this was one of the codes). ALL of those premade codes will be coming to the new forum within the next few days! Woooo
As a side note, I used to run a few premade code pages (of which this was one of the codes). ALL of those premade codes will be coming to the new forum within the next few days! Woooo
TUTORIAL #1: How to transfer code to the new forums
1. Copy the old code. Go into the <> tab of the WCF, and copy all of the code within.
2. Paste into msword/gdocs. Or any other writing software of your choosing, as long as it supports a find and replace option/tool
3. Use find and replace to change:
< to [
> to ]
4. Copy your new code.
5. Go into the reply section. You cannot put code into the 'quick reply'. The reply will be in the upper right corner.
6. Click the BBCode tab. This is located next to preview in the bottom right.
7. Paste code here.
8. Click the Preview tab. Your code should be working!
FAQ's
I'll be putting things here as I discover some of the limitations, but here are a few that I've already experienced / know to be true:
PROBLEM- Scrollboxes do not work. At least, not straight from HTML with this method.
SOLUTION - The HTML code overflow: scroll does not work, but changing it to overflow: auto creates scrollboxes in BBC
PROBLEM - Graphics widths are skewed
SOLUTION - This is only because the post widths are different pixels, these forums are much wider. Therefore, images may appear side-by-side or too big/small for the box. This can only really be fixed by resizing. (more on resizing graphics below)
PROBLEM - Emotes/gremlins will not backspace
SOLUTION - Go into BBCode and they'll be in their pre-autofill form. Delete them there and they'll disappear. AND/OR disable gremlins through options.
1. Copy the old code. Go into the <> tab of the WCF, and copy all of the code within.
2. Paste into msword/gdocs. Or any other writing software of your choosing, as long as it supports a find and replace option/tool
3. Use find and replace to change:
< to [
> to ]
4. Copy your new code.
5. Go into the reply section. You cannot put code into the 'quick reply'. The reply will be in the upper right corner.
6. Click the BBCode tab. This is located next to preview in the bottom right.
7. Paste code here.
8. Click the Preview tab. Your code should be working!
FAQ's
I'll be putting things here as I discover some of the limitations, but here are a few that I've already experienced / know to be true:
PROBLEM- Scrollboxes do not work. At least, not straight from HTML with this method.
SOLUTION - The HTML code overflow: scroll does not work, but changing it to overflow: auto creates scrollboxes in BBC
PROBLEM - Graphics widths are skewed
SOLUTION - This is only because the post widths are different pixels, these forums are much wider. Therefore, images may appear side-by-side or too big/small for the box. This can only really be fixed by resizing. (more on resizing graphics below)
PROBLEM - Emotes/gremlins will not backspace
SOLUTION - Go into BBCode and they'll be in their pre-autofill form. Delete them there and they'll disappear. AND/OR disable gremlins through options.
EASY TUTORIAL #2: How to upload and manipulate images
There's been lots of questions lately on how to upload and manipulate images here on the forums. It's not the same as on the old forums, and can be quite a challenge if you've never uploaded your own images before. But no worries! The process is actually very simple, and I can teach you how to correctly upload images to the site within a few easy steps!
1. Find an image. Make sure it's something that adheres to the forum rules!
2. Open imgur.com Imgur is a fast and easy website that allows you to upload photos and receive image source links that are compatible with coding--and the forums! You can also use other sites, such as photobucket or tinypic, but after using many others, I've found Imgur to be the fastest, safest, and most reliable option out there.
3. There are several ways to upload your image to imgur. First click on the 'new post' button in the top left corner. Then you can either:
i. Upload from files. Save the image to your computer. Put it somewhere you can get back to. Click browse, find the picture you want, and hit okay.
ii. Copy and paste. You can copy the image, then just paste it down in the white box in the middle of the screen.
iii. Drag and drop. If you have two browsers open, you can drag and drop the image onto imgur's site and it will upload automatically.
4. Your image is now uploaded to imgur! To the top side of your image is a [...] Symbol. Copy the BBCode link[ /img]. Do NOT copy the raw link on the side of the screen! That one WILL NOT WORK.
5. Come to the forums. Paste the link where you want the image to go. This could be on a post or even in your signature!
6. At the end of the link, add .PNG if it isn't there already. Your image will not show up if you don't do this.
7. Around your image, make sure there are tags [ img] LINK HERE[/ img] (with no spaces) around the img.
8. Your image is now in your post!
FAQ:
PROBLEM: My image is too big/too small!
SOLUTION: Go into the BBCode for the image. There will be a tag called "max-width:100%;" Change the percent to alter the size of the image.
Alternatively, you may also change the width and height by pixels. Add a tag {width="000" height="000"} after the img and before the src.
PROBLEM: My image won't center right.
SOLUTION: Add a [ p style="text-align:center;"] tag before it (either with span or paragraph) and [/ p] after the image. This will center the image. Thanks to » ѕнαdσω ⚔️ for this solution!
There's been lots of questions lately on how to upload and manipulate images here on the forums. It's not the same as on the old forums, and can be quite a challenge if you've never uploaded your own images before. But no worries! The process is actually very simple, and I can teach you how to correctly upload images to the site within a few easy steps!
1. Find an image. Make sure it's something that adheres to the forum rules!
2. Open imgur.com Imgur is a fast and easy website that allows you to upload photos and receive image source links that are compatible with coding--and the forums! You can also use other sites, such as photobucket or tinypic, but after using many others, I've found Imgur to be the fastest, safest, and most reliable option out there.
3. There are several ways to upload your image to imgur. First click on the 'new post' button in the top left corner. Then you can either:
i. Upload from files. Save the image to your computer. Put it somewhere you can get back to. Click browse, find the picture you want, and hit okay.
ii. Copy and paste. You can copy the image, then just paste it down in the white box in the middle of the screen.
iii. Drag and drop. If you have two browsers open, you can drag and drop the image onto imgur's site and it will upload automatically.
4. Your image is now uploaded to imgur! To the top side of your image is a [...] Symbol. Copy the BBCode link[ /img]. Do NOT copy the raw link on the side of the screen! That one WILL NOT WORK.
5. Come to the forums. Paste the link where you want the image to go. This could be on a post or even in your signature!
6. At the end of the link, add .PNG if it isn't there already. Your image will not show up if you don't do this.
7. Around your image, make sure there are tags [ img] LINK HERE[/ img] (with no spaces) around the img.
8. Your image is now in your post!
FAQ:
PROBLEM: My image is too big/too small!
SOLUTION: Go into the BBCode for the image. There will be a tag called "max-width:100%;" Change the percent to alter the size of the image.
Alternatively, you may also change the width and height by pixels. Add a tag {width="000" height="000"} after the img and before the src.
PROBLEM: My image won't center right.
SOLUTION: Add a [ p style="text-align:center;"] tag before it (either with span or paragraph) and [/ p] after the image. This will center the image. Thanks to » ѕнαdσω ⚔️ for this solution!