Custom Mini-Profile Creator

[Brian]

That CSS is targeting the div around the link and not the link itself which is why it's not changing the link's color. You'll need a separate CSS declaration pointing at the link itself.

[Alan Vende]

Nov 10, 2015 11:53:21 GMT -8 Brian said:

That CSS is targeting the div around the link and not the link itself which is why it's not changing the link's color. You'll need a separate CSS declaration pointing at the link itself.

I didn't realize that that was pointing to just the div. Thanks so much!

[Alan Vende]

Brian:

I have looked it up (and found this page and this page), but nowhere does it say that you can append things to only certain areas. I want to append one image to only one variant of my mini-profile. They tell me how to append something to something, but not how to make it so it only shows on certain things. Am I looking in the right places for this information?

At the moment, I have this:

// Append Paranormal Badge to v8
if(user.group){
   if(user.group.name == "Head Administrator"){
       $(this).append('<div class="para-badge"><a href="http://psychic-psyghtings.proboards.com/thread/755/new-badges-on-mini-profiles"><img src="http://storage.proboards.com/6033396/i/iC1V9RwUrJSJIPbEN0OQ.png"></a></div>');
   }
}
I was thinking that it would be something like this:

// Append Paranormal Badge to v8
if(user.group){
if(user.group.name == "Head Administrator"){
$(this).append.v8('<div class="para-badge"><a href="http://psychic-psyghtings.proboards.com/thread/755/new-badges-on-mini-profiles"><img src="http://storage.proboards.com/6033396/i/iC1V9RwUrJSJIPbEN0OQ.png"></a></div>');
}
}

I assume that the class .v8 would go after the append since it'd show that it wants to be appended to one variant, correct?

EDIT: I tried the following CSS, like it is with the staff-diamond badge on v6 and so forth, but it didn't take effect:

.mini-profile.mp-variant.v1 .para-badge,
.mini-profile.mp-variant.v2 .para-badge,
.mini-profile.mp-variant.v3 .para-badge,
.mini-profile.mp-variant.v4 .para-badge,
.mini-profile.mp-variant.v5 .para-badge,
.mini-profile.mp-variant.v6 .para-badge,
.mini-profile.mp-variant.v7 .para-badge {
   display: none !important;
}
I did it just like the one above it is in the code. I guess there's an error somewhere? It looks correct to me, though

Thanks!

[Brian]

You've already done it previously. Look at this post:

support.proboards.com/post/6498964

[Alan Vende]

Nov 11, 2015 10:01:40 GMT -8 Brian said:

You've already done it previously. Look at this post:

support.proboards.com/post/6498964

I thought about that after I wrote the post. I looked there and altered the code for that particular instance.

HTML:

<div class="para-badge"></div>
CSS:

.mini-profile.mp-variant.v8 .para-badge {
   position: absolute;
   top: 2px;
   right: 2px;
}
JS:

// Append Paranormal Badge to v8
$(this).find('.para-badge').append('http://storage.proboards.com/6033396/i/iC1V9RwUrJSJIPbEN0OQ.png');
I'm assuming, though, that it's missing something. The JS tells it to append anywhere where the class .para-badge is, right? For some reason, though, it's not showing up. The code looks the same as it would for the other one that's there, and that one's showing up?

I guess I'm not thinking straight.

[Brian]

You told the plugin to append the URL which is just text. It has no concept of whether or not that text is a link to an image that should be embedded unless you've actually placed the link inside an <img> tag.

[Alan Vende]

I keep forgetting that I'm on an outdated version of FireFox here. Could this be part of my problem? I put the img class="para-badge" src="image link" />, but it's still not showing. If it's not the code, then ti's the browser and if it's not the browser, then I typed the code in wrong.

[Brian]

You're only one version behind me.

The image tag needs to be in the actual .append() function.

$(this).find('.para-badge').append('<img src="http://storage.proboards.com/6033396/i/iC1V9RwUrJSJIPbEN0OQ.png">');

[Alan Vende]

Brian,

To make it so it only shows on one variant, I was thinking that you do $(this).find('.para-badge').append.v8('img src="http://storage.proboards.com/6033396/i/iC1V9RwUrJSJIPbEN0OQ.png">'); or something along those lines. I looked at the different append pages that I found when I did a Google Search, and that's what I thought how to do it.

[Brian]

If the element you're appending it to only exists in one variant there's no need to specify the variant itself.

If it's in multiple variants you'll want to use the .find() function twice to specify that you're only searching for instances of .para-badge inside of the .v8 element.

$(this).find('.v8').find('.para-badge').append('<img src="http://storage.proboards.com/6033396/i/iC1V9RwUrJSJIPbEN0OQ.png">');

[Alan Vende]

I put in the JS and for some reason it resulted in this:

[Brian]

Nov 12, 2015 17:11:14 GMT -8 Alan Vende said:

I put in the JS and for some reason it resulted in this:

According to the classes assigned to the mini-profile both v6 and v8 are assigned to it at the same time in that post, so it's adopting the CSS from v6 that's telling it to hide the badge.

The CSS you added to hide the badge isn't really necessary to begin with on account of the fact that the badge only exists in v8.

[Alan Vende]

Nov 12, 2015 17:19:28 GMT -8 Brian said:

Nov 12, 2015 17:11:14 GMT -8 Alan Vende said:

I put in the JS and for some reason it resulted in this:

According to the classes assigned to the mini-profile both v6 and v8 are assigned to it at the same time in that post, so it's adopting the CSS from v6 that's telling it to hide the badge.

The CSS you added to hide the badge isn't really necessary to begin with on account of the fact that the badge only exists in v8.

To clarify, you're talking about this, right?

.mini-profile.mp-variant.v1 .para-badge,
.mini-profile.mp-variant.v2 .para-badge,
.mini-profile.mp-variant.v3 .para-badge,
.mini-profile.mp-variant.v4 .para-badge,
.mini-profile.mp-variant.v5 .para-badge,
.mini-profile.mp-variant.v6 .para-badge,
.mini-profile.mp-variant.v7 .para-badge {
display: none !important;
}

That worked! Thanks so much, Brian! The background, though, changed from the black that I had specified to the default background for some reason.

[Lynx]

Brian,

Alan Vende is doing the work on this plugin on Avatar Ascent (currently in MM) and we cannot for the life of us figure out how he managed to get his MOD banner - not in the top right of his profile, but on the top right of my MM bar. O.O

It's only there when viewing a thread where Alan has a post on that page. Here's an example thread.

To show you, here's the top right of the home page (the blue part is part of the MM bar):


Here's what it looks like when viewing a thread (you can see it from the thread link above) with Alan having a post on the page:



Not sure what happened, but I had a good laugh tonight while we were trying to figure this out. I'd appreciate some enlightenment, if you would be so kind, good sir! Why is his banner trying to escape on my MM bar and not stay in his MP?

Thanks!

Edit: I've looked through the CSS tweaks in the stylesheet (Blue Jewel - starts on line 1600) and I can't see anything that we've tweaked would be affecting the plugin. Alan's added a diamond to my profile and it's getting put under the MOD banner from the 2nd image. As with the MOD banner, it only shows up on a page where I've got a post on the page. I'm just completely stumped now. (Note: Alan had the diamond image linked from his forum's theme image storage. I've added it to our custom images in the theme and gave Alan the link so it reflects coming from my forum's theme's custom images.)

Edit #2: Alan informs me that the padding for my Staff Member (just above the Send PM on the mini-profile) is not taking effect.

Thank you very much, kind sir!

[Brian]

Nov 12, 2015 20:09:20 GMT -8 Lynx said:

Brian,

Alan Vende is doing the work on this plugin on Avatar Ascent (currently in MM) and we cannot for the life of us figure out how he managed to get his MOD banner - not in the top right of his profile, but on the top right of my MM bar. O.O

It's only there when viewing a thread where Alan has a post on that page. Here's an example thread.

To show you, here's the top right of the home page (the blue part is part of the MM bar):

Here's what it looks like when viewing a thread (you can see it from the thread link above) with Alan having a post on the page:

Not sure what happened, but I had a good laugh tonight while we were trying to figure this out. I'd appreciate some enlightenment, if you would be so kind, good sir! Why is his banner trying to escape on my MM bar and not stay in his MP?

Thanks!

If the mini-profile doesn't have position: relative; in its CSS the absolute positioning of the banner will be relative to the body of the page rather than the mini-profile.

If your CSS isn't taking effect either the wrong selector has been specified or other CSS on the page is overruling it, both of which can be diagnosed by right-clicking the affected element and selecting Inspect Element in your respective browser to view the HTML and CSS. If your CSS isn't there you've specified the wrong selector. If your CSS is crossed out it's being overridden by other CSS.

An image showing up only when another user posts means something's wrong with either the CSS or jQuery relating to it.