Jump to content

[MYBB] MyCode Troubles


Orion
 Share

Recommended Posts

Hiya! 

I would like these codes to correctly parse into BBCode to offer a fantastic way for my members to create post templates like back on SMF. On SMF we used BBCode With Style, a fantastic plugin allowing post customization. Now with our switch to MyBB, I would like to make sure those templates transfer over just fine.

Now I have tried a few methods already. The div style codes provided herehere, and here have offered little to no luck, as seen above. (I even received help from the amazing @isoldehn on MyBB)

For example, one of our codes would be:

 

[div style="background: url(https://i.imgur.com/x55X7cN.gif); max-width: 700px; height: 300px;"][/div][div style="background: linear-gradient(transparent, #28282a); max-width: 700px; text-align: justify; height: 200px; align: center; margin-top: -200px;"][/div][div style="background: linear-gradient(#28282a, #171719); max-width: 700px; text-align: justify; height: auto;"][div style="background-color: #b2b2b4; max-width: 650px; text-align: justify; border: 1px #310506 solid; padding: 10px; color: #171719;"]
This box is expanding as you type further. The gradient from the background rolls into the photo.

[/div]
[div style="background: 0; max-width: 650px; text-align: justify; padding: 3px; font-size: 10pt; color: #b2b2b4; font-family: georgia; text-align: center;"]information can go here[/div][/div]
None
Select All

 

 and would have the output of this. Meanwhile, when MyCode is presented with the div style code above, it instead comes out like this. As you can see, the code is broken. One problem is that any mention of an image or a background seems to break the code, along with having another div style nested within another one. 
 
 
 
Another example would be this as the original output with the code:
[center][div style="background: url(http://www.richrelevance.com/wp-content/uploads/2014/04/resopnsys-event-bg-700x200.png); max-width: 700px; height: 200px;"][div style="max-width: 800px; text-align: center; font-size: 60px; padding-top: 70px; color: #f5e7e7; font-family: georgia; opacity: 0.98;"][glow=#000,2,300][i][b]the berserkers ✪[/b][/i][/glow][/div][/div][div style="background: linear-gradient(transparent, #A41315); max-width: 700px; text-align: justify; height: 200px; align: center; margin-top: -200px;"][/div][div style="background: radial-gradient(ellipse closest-side, #310506, #A41315); max-width: 700px; text-align: justify; height: auto;"]

[center][div style="background-color: #310506; max-width: 650px; text-align: justify; opacity: 0.98; padding: 10px; color: #f5e7e7; font-family: georgia; font-size: 40px; opacity: 0.98; height: 50px;"][glow=#000,2,300][b][i]territory[/i][/b][/glow][/div][/center][center][div style="background-color: #f5e7e7; max-width: 650px; text-align: justify; border: 1px #310506 solid; opacity: 0.98; padding: 10px;"]
[/div][/center]

[center][div style="background-color: #f5e7e7; max-width: 650px; text-align: justify; border: 1px #310506 solid; opacity: 0.98; padding: 10px;"]

[/div][/center]

[/div]

But MyBB instead has this output.

 
Now how would I do this with MyCode or is there a plugin that could provide me this convenience? Any help would be appreciated. This is one thing I really need for my site and it's really starting to frustrate me. Is something not parsing correctly?

owner of some website ❤️

Link to comment
Share on other sites

Using one example from above, what have you put in the regular expression for your mycode and what have you put in the replacement?

 

And to ensure I know what you're expecting, do users only need to input their post? So there's no custom background images or anything like that? Or do you want them to be able to put in a custom background image and text?

  • Love 1

 

sig.png.30b42565d04d922988370bf14e1447bc.png

PSI: an Occult Investigations RP

Roleplay Architects: Grab a friend (or many friends!) and just write.

You can also find me at:

static-historicalrp.jpg  B8CB4x.png rpabutton.png

Link to comment
Share on other sites

Here is what I use for MyCode expressions!

 

So the code would need to be able use background images. Along with this, it can nest other div codes within it. For example... If the code was this:

//background box w/ image [div style="background: url(https://i.imgur.com/5EoGghW.png?1); width: 300px;"]

[div style="text-align: justify; color: #BD9476; width: 200px; background:white;"]
//for ic post information and text 
[/div]

[div style="text-align: justify; color: #BD9476; width: 200px; background:white;"]
//for more ooc information 
[/div]

[/div]

The output should be something like this! No added margins, padding, and such... but that's the general concept of things. 🙂

 

Custom background images and nesting seem to be what's messing up the code honestly, as it wants to parse the first [/div] from what I can tell.

owner of some website ❤️

Link to comment
Share on other sites

Thanks for the extra info! I'll test on my test forum in a bit. In the meantime, can you provide a link to one post where this isn't working properly?

  • Love 1

 

sig.png.30b42565d04d922988370bf14e1447bc.png

PSI: an Occult Investigations RP

Roleplay Architects: Grab a friend (or many friends!) and just write.

You can also find me at:

static-historicalrp.jpg  B8CB4x.png rpabutton.png

Link to comment
Share on other sites

Mycode on my site imitates yours:

 

Capture.PNG.6cd7ba46e524f26e83e783ff60093519.PNG

 

Have your users surround image urls with apostrophes. Example:

 

[div style="background-image:url('https://i.ibb.co/KjtcyCP/isaac-rect.png');padding:1%;text-shadow:0 0 5px white;"]Text here[/div]

 

Proof of it working here!

 

For nesting mycodes, I believe you need a plugin. This one in particular.

Edited by Kit the Human
  • Love 1

 

sig.png.30b42565d04d922988370bf14e1447bc.png

PSI: an Occult Investigations RP

Roleplay Architects: Grab a friend (or many friends!) and just write.

You can also find me at:

static-historicalrp.jpg  B8CB4x.png rpabutton.png

Link to comment
Share on other sites

Ah that works just fine, actually! It's a shame that I'm going to have to convert all our previous ones to add the quotes + centering but it's better than nothing! YourCode works just fine with it also. Thank you so much! <33333

Alternative question while I've got you on the line, so say I wanted to use a table code... How would I go about that? I've tried the basic td -> <td>, table ->  <table>, and tr -> <tr> conversions along with a few suggestions on MyBB. Also switched around my MyCode parsing orders to test it. No luck so far. Here's a few examples...

 

Let's start simple! One row, one table, and two data pieces (and a nested DIV code from above to separate data). Here's (TR IS SUPPOSED TO BE TD, SORRY) the regular output and then the code:
 

[center]

[table][tr][td][div style="height: 165px; overflow: auto; text-align: justify; font-family: impact; font-size:62px; text-align: center;  max-width: 200px; padding-right: 8px;"][img=https://i.imgur.com/0PR0W4d.gif][/div][/td][td][div style="font-family: arial; font-size: 12px; max-width: 300px;"]
[i]michael, the architect [s]angel[/s] demon[/i]
[abbr=hovering stuff]characters[/abbr] [b]-[/b] discord: discordname
[url=http://LINK.COM]toyhouse[/url] [b]-[/b] [url=http://LINK.COM]tumblr[/url] [b]-[/b] [url=http://LINK.COM]deviantart[/url]
[i]show: the good place[/i][/div][/td][/tr][/table]

[/center]

 

Another one w/ a few more complexities... Here is one with four images. Again, some div codes to split things up and to provide info for the four td codes.

[center][table][tr][td][div style="background-image:url(https://i.imgur.com/GamJfk2.gif); background-position: center; font-family: arial; border-radius: 128px; width: 100px; height: 100px; text-align: center; padding-top: 70px; text-shadow: 3px 3px 3px #000000; border: 2px #FFFFFF solid; font-size: 10px;"][color=white][b]BEN[/color][/div][/td]
[td][div style="background-image:url(https://i.imgur.com/VlQGBSG.gif); background-position: center; font-family: arial; border-radius: 128px; width: 100px; height: 100px; text-align: center; padding-top: 70px; text-shadow: 3px 3px 3px #000000; border: 2px #FFFFFF solid; font-size: 10px;"][color=white][b]WYATT[/color][/div][/td]
[td][div style="background-image:url(https://i.imgur.com/E1PdYvR.gif); background-position: center; font-family: arial; border-radius: 128px; width: 100px; height: 100px; text-align: center; padding-top: 70px; text-shadow: 3px 3px 3px #000000; border: 2px #FFFFFF solid; font-size: 10px;"][color=white][b]HUMAN[/color][/div][/td]
[td][div style="background-image:url(https://i.imgur.com/fha3UCH.gif); background-position: center; font-family: arial; border-radius: 128px; width: 100px; height: 100px; text-align: center; padding-top: 70px; text-shadow: 3px 3px 3px #000000; border: 2px #FFFFFF solid; font-size: 10px;"][color=white][b]DISASTER[/color][/div][/td][/tr][/table]
[div style="background: ; font-family: arial; color: #FFFFFF;"][abbr=hover stuff]characters[/abbr] [b]*[/b] discorduser [b]*[/b] owner[/div][/center]


And finally, the big daddy. This is it's output. 
 

[center][div style="background-color: #fff; max-width: 570px; padding-top: 10px; padding-bottom: 10px;"][div style="background-color: #000; max-width: 550px; height: 100px; text-align: left; padding-top: 50px; padding-left: 30px;"][color=white][size=36pt][i][b]BUCKINGHAM[/b][/i][/size][/color][/div][table][tr]
[td][div style="background-color: #fff; font-family: arial; font-size: 11px; max-width: 400px; height: 350px; padding: 20px; color: #000; overflow: auto;"]

TEXT HERE

[/div][div style="background-color: #444; font-family: arial; font-size: 11px; max-width: 400px; height: 50px; color: #fff; text-align: center; padding-top: 16px;"]tags - penned by @username[/div][/td]
[td][div style="background:url(http://www.unleashthefanboy.com/wp-content/uploads/2013/06/utffi1-150x400.png); font-family: arial; min-width: 150px; min-height: 400px;"][/div][/td][/tr][/table][/div][color=transparent][size=5pt]template by orion[/size][/color][/center]

 

So what I'm basically asking is how can I do this with MyCode successfully? 

owner of some website ❤️

Link to comment
Share on other sites

You don't need tables to do any of this!

 

Example #1

[twocol="background: url('https://i.ibb.co/KjtcyCP/isaac-rect.png'); padding: 5px; color: white; text-shadow: 0 0 5px black;"]
[div style="padding: 10px; background: rgba(0,0,0, .1); margin-right: 1px; border: 1px solid black;"]Hullo[/div]
[div style="background: rgba(0,0,0, .1); padding: 10px;border: 1px solid black;"]second[/div]
[/twocol]

Twocol regular expression

\[twocol="(.*?)"\](.*?)\[/twocol\]

Twocol replacement

<div class="two-col" style="$1">$2</div>

Make a new stylesheet

.two-col {
	display: flex;
	justify-content: center;
	align-items: center
}

.two-col > div,
.two-col > div + div {
	flex-grow: 2;
	flex-basis: 49%
}

That will handle two columns for users with minimal input from them.

 

Example #2

[div style="background: rgba(72,209,204, .2); padding: 5px; border: 1px solid rgba(0,0,0, .1); text-align: center;"]
[oneline style="background: transparent;"]
[div style="background: url('https://images.rpginitiative.com/uploads/monthly_2019_02/triggereded.thumb.png.28f2c0f6124dfaa38704a8e6f500abe7.png') no-repeat; border-radius: 100%; width: 100px; height: 100px; border: 2px solid white; position: relative; color: white;"]
[div style="position: absolute; bottom: 0; left: 1rem; text-shadow: 0 0 5px black;"]Name Here[/div]
[/div]
[div style="background: url('https://images.rpginitiative.com/uploads/monthly_2019_02/triggereded.thumb.png.28f2c0f6124dfaa38704a8e6f500abe7.png') no-repeat; border-radius: 100%; width: 100px; height: 100px; border: 2px solid white; position: relative; color: white;"]
[div style="position: absolute; bottom: 0; left: 1rem; text-shadow: 0 0 5px black;"]Name Here[/div]
[/div]
[div style="background: url('https://images.rpginitiative.com/uploads/monthly_2019_02/triggereded.thumb.png.28f2c0f6124dfaa38704a8e6f500abe7.png') no-repeat; border-radius: 100%; width: 100px; height: 100px; border: 2px solid white; position: relative; color: white;"]
[div style="position: absolute; bottom: 0; left: 1rem; text-shadow: 0 0 5px black;"]Name Here[/div]
[/div]
[div style="background: url('https://images.rpginitiative.com/uploads/monthly_2019_02/triggereded.thumb.png.28f2c0f6124dfaa38704a8e6f500abe7.png') no-repeat; border-radius: 100%; width: 100px; height: 100px; border: 2px solid white; position: relative; color: white;"]
[div style="position: absolute; bottom: 0; left: 1rem; text-shadow: 0 0 5px black;"]Name Here[/div]
[/div]
[/oneline]
[div style="color: white; text-shadow: 0 0 5px rgba(0,0,0, .5)"]Kit's Characters[/div]
[/div]

oneline regular expression

\[oneline style="(.*?)"\](.*?)\[/oneline\]

replacement

<div class="oneline" style="$1">$2</div>

CSS

.oneline {
	display: flex;
	justify-content: center;
	align-items: center
}

Again, it will manage one line with minimal input from users. But you also don't need additional bbcodes to pull this off:

Example

[div style="background: rgba(72,209,204, .2); padding: 5px; border: 1px solid rgba(0,0,0, .1); text-align: center;"]
[div style="display: flex; justify-content: center;"]
[div style="background: url('https://images.rpginitiative.com/uploads/monthly_2019_02/triggereded.thumb.png.28f2c0f6124dfaa38704a8e6f500abe7.png') no-repeat; border-radius: 100%; width: 100px; height: 100px; border: 2px solid white; position: relative; color: white;"]
[div style="position: absolute; bottom: 0; left: 1rem; text-shadow: 0 0 5px black;"]Name Here[/div]
[/div]
[div style="background: url('https://images.rpginitiative.com/uploads/monthly_2019_02/triggereded.thumb.png.28f2c0f6124dfaa38704a8e6f500abe7.png') no-repeat; border-radius: 100%; width: 100px; height: 100px; border: 2px solid white; position: relative; color: white;"]
[div style="position: absolute; bottom: 0; left: 1rem; text-shadow: 0 0 5px black;"]Name Here[/div]
[/div]
[div style="background: url('https://images.rpginitiative.com/uploads/monthly_2019_02/triggereded.thumb.png.28f2c0f6124dfaa38704a8e6f500abe7.png') no-repeat; border-radius: 100%; width: 100px; height: 100px; border: 2px solid white; position: relative; color: white;"]
[div style="position: absolute; bottom: 0; left: 1rem; text-shadow: 0 0 5px black;"]Name Here[/div]
[/div]
[div style="background: url('https://images.rpginitiative.com/uploads/monthly_2019_02/triggereded.thumb.png.28f2c0f6124dfaa38704a8e6f500abe7.png') no-repeat; border-radius: 100%; width: 100px; height: 100px; border: 2px solid white; position: relative; color: white;"]
[div style="position: absolute; bottom: 0; left: 1rem; text-shadow: 0 0 5px black;"]Name Here[/div]
[/div]
[/div]
[div style="color: white; text-shadow: 0 0 5px rgba(0,0,0, .5)"]Kit's Characters[/div]
[/div]

With a div style, you can do practically anything.

 

Example, only using div style.

[div style="background-color: #fff; max-width: 570px; padding: 10px 0;"]
[div style="background-color: #000; text-align: left; padding-top: 50px; padding-left: 30px; padding-top: 50px; color: white; font-size: 3rem; font-style: italic; line-height: .8;"]BUCKINGHAM[/div]
[div style="background: url('http://www.unleashthefanboy.com/wp-content/uploads/2013/06/utffi1-150x400.png') #fff; background-position: top right; background-repeat: no-repeat; position relative;"]
[div style="width: calc(100% - 150px); height: 350px; overflow: auto;"]
TEXT HERE
[/div]
[div style="background-color: #444; font-family: arial; font-size: 11px; max-width: calc(100% - 150px); color: #fff; text-align: center; padding: 16px 0;"]tags - penned by @username[/div]
[/div][/div]

For the sake of argument though:

Table

Regular Expression

\[table style="(.*?)"\](.*?)\[/table\]

Replacement

<table style="$1">$2</table>

Table Cell

Regular Expression

\[td\](.*?)\[/td\]

Replacement

<td>$1</td>

Table Row

Regular Expression

\[tr\](.*?)\[/tr\]

Replacement

<tr>$1</tr>

Making sure everything can be nested.

Example

[table style="background: grey;"]
[tr][td]Hi[/td][td]Hi[/td][/tr]
[tr][td]Hi[/td][td]Hi[/td][/tr]
[tr][td]Hi[/td][td]Hi[/td][/tr]
[/table]

Hope that helps!

 

If any of those codes don't work properly, do an inspect element on your test posts and make sure that there has been no entities copied over. This is what I mean. If that has happened to you, just type it out yourself.

  • Love 1

 

sig.png.30b42565d04d922988370bf14e1447bc.png

PSI: an Occult Investigations RP

Roleplay Architects: Grab a friend (or many friends!) and just write.

You can also find me at:

static-historicalrp.jpg  B8CB4x.png rpabutton.png

Link to comment
Share on other sites

Awesome! Works swell. ❤️ Two column and one line would make things a lot easier honestly! Especially with newer users...  And they work with flex and responsiveness which is EVEN BETTER.  Thank you!

 

I knew it worked without tables myself, but a lot of my members have already grown accustomed to using tables (rip, I'll sadly admit that I have grown to use them too on occasion). With a lot of posts to transfer and to edit, I figured I'd ask, as it'd definitely make our switch over easier.

 

So when it comes to tables, I found that for some reason the table data likes to hang outside of the post container, separate itself,and become blank space on the side. This does the same thing on all of the themes I have installed. Even the table/tr likes to! Might be a deeper problem... Any knowledge on that? 

owner of some website ❤️

Link to comment
Share on other sites

I need to see where this happening to hazard a guess! Sorry! It's fine for me.

 

Capture.PNG.1508ff6d0343da887065a7e36d8fde90.PNG

  • Love 1

 

sig.png.30b42565d04d922988370bf14e1447bc.png

PSI: an Occult Investigations RP

Roleplay Architects: Grab a friend (or many friends!) and just write.

You can also find me at:

static-historicalrp.jpg  B8CB4x.png rpabutton.png

Link to comment
Share on other sites

This is what it looks like with the YourCode deactivated. As you can see, it should belong within 'post_body scaleimages'.
Here is what it looks like when it is activated. Another image to show where it cuts off. 

 

owner of some website ❤️

Link to comment
Share on other sites

Switch it to the default theme and see if the issue persists. If it does not, its an error in your theme, something hasn't been opened or closed correctly.

 

If it does persist, you should check your replacement code for any errors. You should also try typing out the code manually, not using copy and paste.

 

As stated, I can not offer you any further help on this particular issue through screenshots. I need to inspect your code myself. Sorry!

  • Like 1

 

sig.png.30b42565d04d922988370bf14e1447bc.png

PSI: an Occult Investigations RP

Roleplay Architects: Grab a friend (or many friends!) and just write.

You can also find me at:

static-historicalrp.jpg  B8CB4x.png rpabutton.png

Link to comment
Share on other sites

Oddly enough, the error persists on every theme I’ve used so far lol. Looks like I’ve got to continue digging! Probably something deeper than I thought. Time to be Sherlock!

 

Thank you so so much, Kit! You’re a huge help 24/7! If you ever need anything, like graphics or even some advertisement/affiliates, I am most definitely open to assist you.❤️

  • You're Welcome 1

owner of some website ❤️

Link to comment
Share on other sites

No worries! Happy to help.

 

I just thought to add, if there's a plugin (like advanced account switcher) that has inserted a new block on every page, check that as well. I know that the account switcher is very heavily dependent on the rest of the header (& member welcome bit) remaining the same. It's often caused layout problems for me in the past.

  • Love 1

 

sig.png.30b42565d04d922988370bf14e1447bc.png

PSI: an Occult Investigations RP

Roleplay Architects: Grab a friend (or many friends!) and just write.

You can also find me at:

static-historicalrp.jpg  B8CB4x.png rpabutton.png

Link to comment
Share on other sites

Definitely will take a peek then since we are using that! 

owner of some website ❤️

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use, Guidelines and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.