Little problems with the RPG features (bars,boards etc)

Hello everyone,

Long ago, I tried to configure a little bit rpg features of my RP forum, trying to have some fancy and original things. That ended up giving me something pretty cool : http://prntscr.com/p2ah6p

But, because there is always a but... there is this thing I can't fix, it should be pretty easy, but can't get my hand on. See the board at the right, how could I get it up, I know the process to do so for most of the case, but here, days I am trying without finding out

Secondo : see the bars in the left, they look fine right ? Actually they do, but only when they are half full or more (more or less), under that, it's all blurred, because the picture used is "crushed" ? I don't know if there is any solution for this, might not have any, but if they would be one, I'd love to hear it ! What I understand of it : I'd need to make a code, that would load the picture used for the bar, part by part, instead of loading it fully, but yeah I don't know how to code that at all, so if anyone can help

Some links so you can check what's wrong or not :

- The caracter sheet of Geralt, where the bar is well displayed (mostly for the board upping thing I suppose) : http://continentem.forumactif.com/u3rpg
- The caracter sheet where the bars isn't displayed well : http://continentem.forumactif.com/u96rpg

You might need an account to check those links, feel free to create one ! And tell me if I forgot anything, or if I can do anything to help you to help me !

You might need an account to check those links, feel free to create one ! And tell me if I forgot anything, or if I can do anything to help you to help me !

Why don't you try to provide us a test account instead? Sorry but I didn't see anything wrong in guest view

Didn't thought about that, here it is :

Username: Guest
Password: guest123

I'm not understand this at all. Could you please explain more details?

Secondo : see the bars in the left, they look fine right ? Actually they do, but only when they are half full or more (more or less), under that, it's all blurred, because the picture used is "crushed"

See that : http://prntscr.com/p2ay7a

When the bars are half full or more, they are fine, they look good, but under that, it looks very bad, blurry and all !

X = Bad
~ = Ok
V = Good

hi

i dont think its blurry, it is just the image
try to change the image to a solid color

Here is the picture : https://2img.net/image.noelshack.com/fichiers/2018/36/2/1536091664-magie7.png

That's what I use, and what I want. Solid color isn't fine for me. What I need, I think, would be a code that make the forum use this picture progressively, instead of utilizing it fully for the bar... I don't know if I am understandable here

Maybe if you redesign the image where the black/gray areas were not on the right side.

is this a better result for you ?


in order to have this result, you must style every image using the object fit element as below

Code:


<img src="https://image.noelshack.com/fichiers/2018/36/2/1536091220-barre-aard.png" width="40" height="12" alt="1/5" style="
    object-fit: cover;
">


skouliki wrote:is this a better result for you ?


in order to have this result, you must style every image using the object fit element as below

Code:


<img src="https://image.noelshack.com/fichiers/2018/36/2/1536091220-barre-aard.png" width="40" height="12" alt="1/5" style="
    object-fit: cover;
">


That's indeed a better result ! But I don't quite understand how I am supposed to do that ? A javascript ? Just tried it, and it doesn't seem to work

where are those images uploaded? placed

They are uploaded on "noelshack", an image host site; and I placed with the forumotion tool, here for the "Aard bar" (the light blue one) : http://prntscr.com/p2oxr8

ok but do you have a css style for those images in your css sheet? or a js?

No !

@skouliki they are added by the ACP in the RPG settings
No need for any CSS files for it as they are Vote bars as such

There is no real way to stop it looking like that as the system add's a repeat to resize the image you use in the ACP.

yes i think the only way to fix this is by adding another image
i can make you a similar one not solid but similar

I don't think adding different images would change it. I mean, if the resolution is low, the quality will deteriorate when the bar is full, when the resolution is high, the quality is bad when the bar is low !

But if you wanna try, let's go :p

There is 4 parts in a bar : the end in the left (gray), the end in the right (gray too), the colored thing in the middle, and the "black" thing in the middle when there is no color.

Like here the first bar : http://continentem.forumactif.com/u96rpg

@APE, did you try to stop it from looking like that? I'll make a guess and say that you didn't.

Anyway, to achieve the look from Skouliki's post, you can add this to your CSS file:

Code:

.column1 img:nth-child(2n){
object-fit:cover;
}

As about moving that block up, this code may or may not solve it:

Code:

#profile-advanced-details .column2{
position:relative;
top:-330px;
}

This will make it go up but may or may not work on every profile if the first row is of varying size. If that's the case, we need to make some edits to the rpg_sheet template.

Honestly, I've never seen more spaghetti code than the one in a forumotion template.

Occultist wrote:@APE, did you try to stop it from looking like that? I'll make a guess and say that you didn't.

Anyway, to achieve the look from Skouliki's post, you can add this to your CSS file:

Code:

.column1 img:nth-child(2n){
object-fit:cover;
}

As about moving that block up, this code may or may not solve it:

Code:

#profile-advanced-details .column2{
position:relative;
top:-330px;
}

This will make it go up but may or may not work on every profile if the first row is of varying size. If that's the case, we need to make some edits to the rpg_sheet template.

Honestly, I've never seen more spaghetti code than the one in a forumotion template.

When you say "CSS file", what are you talking about ? The CSS Sheet, or the big file of the theme ? Because for the latter, I don't know how to modify it

Edit : and the code didn't work to move up the block hmm. What is the "first row" ?

The sheet(Admin Panel->Display->Colors->CSS stylesheet).

Yeah right, I put them there : http://prntscr.com/p2s5ju

By the way, have you seen my proposal about that ? "What I need, I think, would be a code that make the forum use this picture progressively, instead of utilizing it fully for the bar" ; don't you think that's the solution ?

I don't see the code in the css file. Do you have the Force the basic CSS or the Optimize your CSS options activated? Try deactivating them.

The only other posibility I can think of is you having too many lines/characters in you CSS. Go to the overall_header template, and right before

Code: </head>

, add this code:

Code:

<style>
.column1 img:nth-child(2n){
object-fit:cover;
}
#profile-advanced-details .column2{
position:relative;
top:-330px;
}
</style>

As about your proposal, that will probably work but will not be easy to do because the html code is very badly structured and can't be edited through templates. It can be done through javascript, though.

I have the optimized thing! I'll try to desactive it, when home, I can't modify it on phone, I don't know why xd and we have like 300 lines, I think it's ok, otherwise they you it's too much

I'll try it soon, when at home! And yeah I figured it was through javascript that it should be done, but if it's hard hmm

EDIT : with the code added at the top, it started to work ! Thank you so much man ! I am adding that by the way : it started to work, and in the same time, it did suppress the "html" things. So it looks like that (i had no "</head> anyway) : http://prntscr.com/p2uytz

Plus, just found out that : the bars were not appearing well, when getting full and all. Like one problem is resolved, another one shows on xd... --> http://prntscr.com/p2uzon

</head> is not in the CSS stylesheet, but in a template.

Oh... Sorry... Yes, I did that, thank you. Shall I keep what I wrote in the CSS (it's the same code) ?

But still, the same problem I enounced in my previous message is there

If the CSS works, you do not need to modify the template.

The CSS works when put at the top. Why it is this way ?

If it's only working at the top, it could be there are errors in css further down in your css stylesheet, as it reads the code from top to bottom, which explains why it works at the top of your stylesheet but not the bottom.

Do you have issues with any other css codes?

-Brandon

Thanks for your reply :

I do not have any known issue at least hm

is this solved?