RPG Roleplay

Hi! Sorry to bother you but i changed from ModernBB to AwesomeBB, can i ask you again for your support please?

I want to use the method posted by Razor in this topic:

https://help.forumotion.com/t163176-pet-roleplay-table

it doesn't work on AswesomeBB

Thank you a lot!

hello

i will tag @Razor12345 to look into it but keep in mind if you have changed the version to your forum probably all CSS codes and javascript will stop working cause each version has different elements

Hi skouliki!
Yes i know! I changed other scripts and css, but i can't figure out how to make @Razor12345 's solution works

I'll be able to do it next week

P.S. please specify how you modify fields in RPG profile - via AP or via the "Modify" button directly in the profile.
If through the Modify button - I found a bug there, because of which the picture is deleted when modifying the profile.

Hi Razor!
I wanna modify all by AP, users should not be able to change the Pic or others fields by profile, like you did for my last request on ModernBB

Thank you again!

UP!

Ok, i tried a lot and removed the button edit on profile, my last problem is that i can't make the image show up on post profile, i think it depends from this scrip:

Code:


          <script>
            window.addEventListener('DOMContentLoaded', function() {
              const users = document.querySelectorAll('.postprofile');
              users.forEach(item => {
              const address = item.querySelector('a[href$="rpgsheet"]');
                if (address) {
                  $.ajax({
                    url: address.href,
                    method: "GET",
                    data: 'image',
                    dataType: "html",
                    success: function (data) {
                      let div = document.createElement('div');
                      div.innerHTML = data;
                      let findElement = div.querySelector('div.column1 div.rpg_image img');
                    item.querySelector('.character__container .character__image').append(findElement);
                    },
                    error: function (xhr, status, error) {
                      console.log("AJAX request error:" + error);
                    },
                  });
                }
            });
          });
         
          </script>


I tried changing ".postprofile" with ".post-aside" with no success, just a "null" text

UP! I'm trying but still can't get it works

try with:

'.post-avatar-rph' or '.post-header'

To remove the ability to change a character's avatar:

1) AP - Display - Templates - Profile - rpg_sheet_edit

Find:

Code:

 <form action="{U_ADMIN_RPG}" method="post" name="post">
           
          <div class="block">
                <div class="block-header">
                    {L_AVATAR_PANEL}
                </div>

Replace by this:

Code:

<form action="{U_ADMIN_RPG}" method="post" name="post">
           
          <div class="block__rpg_image">
                <div class="block-header">
                    {L_AVATAR_PANEL}
                </div>

Find:

Code:

 <p style="text-align: center;">{POSTER_RANK}<br />{RPG_IMAGE}</p>

Replace by this:

Code:

<p style="text-align: center;">{POSTER_RANK}<br /><div class='rpg_image'>{RPG_IMAGE}</div></p>

Save. Publish.

2) AP - Display - Colors&CSS - CSS Stylesheet

Insert code:

Code:

.block__rpg_image {
  display: none;
}

.rpg_image {
  text-align: center;
}

Submit.

Result:





Upload a character image to the user's profile:

Only for PC:

1) AP - Display - Templates - General - viewtopic_body

Find:

Code:

{postrow.displayed.POSTER_RPG}

Before this code, insert this:

Code:

<div class='character__container'>
                                                  <div class='character__title'>Pet:</div>
                                                  <div class='character__image'></div>
                                          </div>

At the end of template, insert this code:

Code:

    <script>
    window.addEventListener('DOMContentLoaded', function() {
      const users = document.querySelectorAll('.post-body');
      users.forEach(item => {
      const address = item.querySelector('a[href$="rpgsheet"]');
        if (address) {
          $.ajax({
            url: address.href,
            method: "GET",
            data: 'image',
            dataType: "html",
            success: function (data) {
              let div = document.createElement('div');
              div.innerHTML = data;
              let findElement = div.querySelector('div.rpg-view p img');
            item.querySelector('.character__container .character__image').append(findElement);
            },
            error: function (xhr, status, error) {
              console.log("AJAX request error:" + error);
            },
          });
        }
    });
  });
 
  </script>

Save. Publish.

3) AP - Display - Colors&CSS - CSS Stylesheet

Insert this code:

Code:

.character__container {
    display: flex;
    justify-content: space-around;
    align-items: center;
}
 
.character__image {
    max-width: 100px;
    max-height: 100px;
}
 
.character__image img {
    width: 100%;
    height: 100%;
}

Submit

Result:

Hi Razor! Thanks for replay, I tried but It doesn't work for me, i didn't edit a lot in templates, and i even tried with not JavaScript activated





Viewtopic_body:







I can't understand what im doing wrong

Forum address?

In this code:

Code:

    <script>
    window.addEventListener('DOMContentLoaded', function() {
      const users = document.querySelectorAll('.post-body');
      users.forEach(item => {
      const address = item.querySelector('a[href$="rpgsheet"]');
        if (address) {
          $.ajax({
            url: address.href,
            method: "GET",
            data: 'image',
            dataType: "html",
            success: function (data) {
              let div = document.createElement('div');
              div.innerHTML = data;
              let findElement = div.querySelector('div.rpg-view p img');
            item.querySelector('.character__container .character__image').append(findElement);
            },
            error: function (xhr, status, error) {
              console.log("AJAX request error:" + error);
            },
          });
        }
    });
  });
 
  </script>

Try replace DOMContentLoaded with load:

Code:

    <script>
    window.addEventListener('load', function() {
      const users = document.querySelectorAll('.post-body');
      users.forEach(item => {
      const address = item.querySelector('a[href$="rpgsheet"]');
        if (address) {
          $.ajax({
            url: address.href,
            method: "GET",
            data: 'image',
            dataType: "html",
            success: function (data) {
              let div = document.createElement('div');
              div.innerHTML = data;
              let findElement = div.querySelector('div.rpg-view p img');
            item.querySelector('.character__container .character__image').append(findElement);
            },
            error: function (xhr, status, error) {
              console.log("AJAX request error:" + error);
            },
          });
        }
    });
  });
 
  </script>

Hi Razor!



Still the same, It doesn't show up

Razor, i tried again, maybe i had a problem on the other pc, but now it works!

https://imgur.com/reN1TqJ

Thank you man! I owe you a pizza!

I just have a little problem with text but i'll figure out how to solve