Custom Mini-Profile Creator

[Former Member]

Oct 27, 2015 14:13:24 GMT -8 Brian said:

Oct 27, 2015 13:49:37 GMT -8 Matt said:

Hello, I want to build a mini-profile for myself but I honestly know nothing about coding, could I have some tips on getting started please?

W3Schools is your friend. It contains every HTML tag, CSS property, and Javascript method available in modern browsers as well as learning sections for all three languages. Don't be afraid to experiment and break things while learning.

Oct 27, 2015 13:54:33 GMT -8 Dave B said:

   I know its nothing to do with the plugin functionality and more towards the design of the MP but if you know a way i can make it so that users can select a background image of their own chosing with the MP's i have setup that would be amazing

   Cheers
   Dave

If you create a custom field to contain their background image URL you can use that in Javascript to apply a background.

Simple Javascript component example using a custom field named Mini-Profile Background:

if(user.miniprofilebackground){
    $(this).css('background-image','url('+user.miniprofilebackground+')');
}

Thanks Brian.

[Alan Vende]

Brian’s Custom MP Creator Support Thread

Question for him:

Hey, Brian.

I have been trying to get a background color to encompass the whole background of one of my MP Variants - v6, to be exact.

I have the following HTML for v6:

<div class="switch v6">
   $[user]
   <div class="halloween-text"><p>Are you a paranormal investigator? Do you have any stories that you want to share with fellow investigators? Do you want to prominently display on your full- and mini-profiles that you are an investigator?</p>
       <br />
       <p class="investigator-group">If so, please join our investigator Group!</p></div>
</div>

I have the following CSS for v6:

/* v6 CSS */
.mini-profile.mp-variant {
   background-color: #000000;
   
}
.mini-profile.mp-variant .halloween-text {
   color: #FF9933;
   border: 1px solid #FFFFFF;
   border-radius: 10px;
   box-shadow: 2px 2px 2px #FF9933;
   padding: 5px;
   margin-top: 10px;
   text-align: left;
}
/* // End v6 CSS \\ */

If I keep the background like that, it gives me the background effect that I want, but what I don’t want is for all of my other MP variants to adopt the background; I just want that one variant to have it.

?

See what I mean?

I attempted doing .mini-profile.mp-variant.v6 and .mini-profile.mp-variant .v6, but neither of those were successful.

This is what it looks like when I have .mini-profile.mp-variant { background-color: #000000; }:

?

And this is what it looks like when I have .mini-profile.mp-variant .v6:

?

I was also wondering if it was possible to take off the black banner and the diamond badge that I have put onto my mini-profile off of that one variant.

(For future variants, though, would it be possible to code it so it will remove them from multiple without having to code it individually for each variant that I want it off of? I tried putting the v6 HTML code under the group tag code, but that still put the group tag on the top-right.)

Also: Is it possible to make it so one MP Variant goes across all posts created by me in a board so I don’t have to do each individual post in the JS? For this, instead of:

// Show v6
if($(this).parents('#board-1234').length)

$(this).addClass('switched').children('.v6').show();

I'd do

if($(this).parents('#board-1234').length)

$(this).parents('#board-1234').children('.v7).show();

I have been messing with this all morning. I attempted to look on W3Schools, but didn't find anything that is suitable for this. I attempted looking at your examples, too, and the CSS there didn't help either, so I thought I'd ask here.

Thanks so much for your help, Brian.

[Brian]

Alan Vende: You need to add a new class to the entire mini-profile inside the if statement that determines if v6 shows in order to make the first selector you attempted to use work for changing the background color (.mini-profile.mp-variant.v6).

Using the solution in the previous paragraph you can hide your banner and badge stuff using CSS since the mini-profile will have another unique class you can reference in your CSS component.

If you want a mini-profile to be board-specific you can use this in your JS, substituting the text in green with your board's numerical ID.

if(pb.data('page').thread){
    if(pb.data('page').thread.board_id == 123){
        // Your Javascript here

    }
}

[Alan Vende]

Nov 1, 2015 9:57:09 GMT -8 Brian said:

Alan Vende: You need to add a new class to the entire mini-profile inside the if statement that determines if v6 shows in order to make the first selector you attempted to use work for changing the background color (.mini-profile.mp-variant.v6).

I assume that you mean this one, correct?

// Add unique class to reference this mini-profile in CSS:
$(this).addClass('mp-variant, v6');

So, in my CSS, it would be:

.mini-profile.mp-variant.v6 {
    background-color: #000000;
}

---

Nov 1, 2015 9:57:09 GMT -8 Brian said:

Using the solution in the previous paragraph you can hide your banner and badge stuff using CSS since the mini-profile will have another unique class you can reference in your CSS component.

Wouldn't I hide it using JS like I did the Custom Title and everything? I thought that hiding things like that was only done with JS, not CSS?

---

Nov 1, 2015 9:57:09 GMT -8 Brian said:

If you want a mini-profile to be board-specific you can use this in your JS, substituting the text in green with your board's numerical ID.

if(pb.data('page').thread){
    if(pb.data('page').thread.board_id == 123){
        // Your Javascript here

    }
}

So, the JS would be like this?

if(pb.data('page').thread){
if(pb.data('page').thread.board_id == 123){
if($(this).parents('#post-2331').length)

$(this).addClass('switched').children('.v6').show();

}
}

[Brian]

Nov 1, 2015 10:13:07 GMT -8 Alan Vende said:

I assume that you mean this one, correct?

// Add unique class to reference this mini-profile in CSS:
$(this).addClass('mp-variant, v6');

So, in my CSS, it would be:

.mini-profile.mp-variant.v6 {
    background-color: #000000;
}

Nope. You'd have to tell it to add another class to the mini-profile itself inside of the same if statement that contains the line that tells v6 to show.

The CSS is correct if you do the above correctly.

Nov 1, 2015 10:13:07 GMT -8 Alan Vende said:

Wouldn't I hide it using JS like I did the Custom Title and everything? I thought that hiding things like that was only done with JS, not CSS?

You can do it either way. CSS is faster in this case because the browser doesn't have to run through another line of Javascript and just references the CSS rules you've already applied to the page. Just tell it to display: none; the element when it's a descendant of .mini-profile.mp-variant.v6 or whichever one you're hiding it on after adding the class I mentioned above.

Nov 1, 2015 10:13:07 GMT -8 Alan Vende said:

So, the JS would be like this?

if(pb.data('page').thread){
if(pb.data('page').thread.board_id == 123){
if($(this).parents('#post-2331').length)

$(this).addClass('switched').children('.v6').show();

}
}

Remove the if statement that's targeting the post. Otherwise it'll still only show for that post.

[Alan Vende]

Nov 1, 2015 11:46:58 GMT -8 Brian said:

Nov 1, 2015 10:13:07 GMT -8 Alan Vende said:

I assume that you mean this one, correct?
So, in my CSS, it would be:

Nope. You'd have to tell it to add another class to the mini-profile itself inside of the same if statement that contains the line that tells v6 to show.

The CSS is correct if you do the above correctly.

Arg! I put that one first to ask and then I put the other one - second guessing myself. So, it'd be:

// Show v6
if($(this).parents('#post-2331').length)

$(this).addClass('switched, v6').children('.v6').show();

---

Nov 1, 2015 11:46:58 GMT -8 Brian said:

Nov 1, 2015 10:13:07 GMT -8 Alan Vende said:

Wouldn't I hide it using JS like I did the Custom Title and everything? I thought that hiding things like that was only done with JS, not CSS?

You can do it either way. CSS is faster in this case because the browser doesn't have to run through another line of Javascript and just references the CSS rules you've already applied to the page. Just tell it to display: none; the element when it's a descendant of .mini-profile.mp-variant.v6 or whichever one you're hiding it on after adding the class I mentioned above.

To target decedents, do you do >? Example: .mini-profile.mp-variant.v6 > v6? (I've never targeted decedents before, so go easy on me!

Nov 1, 2015 11:46:58 GMT -8 Brian said:

Nov 1, 2015 10:13:07 GMT -8 Alan Vende said:

So, the JS would be like this?

Remove the if statement that's targeting the post. Otherwise it'll still only show for that post.

I think I've got it:

if(pb.data('page').thread){
if(pb.data('page').thread.board_id == 123){
$(this).addClass('switched').children('.v6').show();
}
}

I didn't realize I posted it with the if statement on it; I thought I took that out. Thanks for that!

[Brian]

Those are all correct.

[Alan Vende]

Nov 1, 2015 12:02:05 GMT -8 Brian said:

Those are all correct.

Thanks, Brian! Sorry, I was typing my question and decedents and PBS crashed for a minute, talking about another angry bear attack, but it's back now. Sorry about that!

Thank you for your help!

EDIT: If I wanted to add more than one board, would I put a comma after the board ID?

if(pb.data('page').thread){
if(pb.data('page').thread.board_id == 232, 456, etc...){
$(this).addClass('switched').children('.v6').show();
}
}

[Alan Vende]

Brian: Also, for some reason, my background color isn't fully showing on v6 like I desire it to in the second screenshot. It's still showing like the third, but minus the staff banner. (I'm still trying to hide the diamond, though! )

I have:

.mini-profile.mp-variant.v6 > .staff-diamond, .short-black-banner {
display: none;
}

but I feel as if something's wrong somewhere. It hid the black banner, but not the staff diamond, so I assume that I did one right but not the other?

[Brian]

You'd need to duplicate the if statement over and over with different board IDs. You can't separate them with commas.

if(pb.data('page').thread.board_id == 123 || pb.data('page').thread.board_id == 456)

If .staff-diamond isn't a direct child of your mini-profile it's not going to hide it. Also, the way you have it specified now will hide every instance of .short-black-banner on the page, not just in your mini-profile. Use this instead.

.mini-profile.mp-variant.v6 .staff-diamond,
.mini-profile.mp-variant.v6 .short-black-banner {
display: none !important;
}

The !important is to ensure it overrides any inline styles that are added by the .show() jQuery function.

[Alan Vende]

Nov 1, 2015 12:41:43 GMT -8 Brian said:

You'd need to duplicate the if statement over and over with different board IDs. You can't separate them with commas.

if(pb.data('page').thread.board_id == 123 || pb.data('page').thread.board_id == 456)

Why can you separate the classes with commas but not the JS if statements?

Nov 1, 2015 12:41:43 GMT -8 Brian said:

If .staff-diamond isn't a direct child of your mini-profile it's not going to hide it. Also, the way you have it specified now will hide every instance of .short-black-banner on the page, not just in your mini-profile. Use this instead.

.mini-profile.mp-variant.v6 .staff-diamond,
.mini-profile.mp-variant.v6 .short-black-banner {
display: none !important;
}

The !important is to ensure it overrides any inline styles that are added by the .show() jQuery function.

For some reason, with this code, they have returned:



I have the code for my black banner outside of the v6 switch so it will be on the other MPs:

<div class="switch v6">
   $[user]
   <div class="investigator-text"><p>Are you a paranormal investigator and want to prominently display that on your full- and mini-profiles?</p>
       <br />
       <p class="investigator-group">If so, please join our investigator Group!</p></div>
</div>

<div class="short-black-banner">
   $[user.group.name]
</div>

[Brian]

Nov 1, 2015 13:01:52 GMT -8 Alan Vende said:

Why can you separate the classes with commas but not the JS if statements?

Because .addClass() is a jQuery function designed specifically to support multiple values and if statements are basic Javascript which only supports comparing individual values.

Nov 1, 2015 13:01:52 GMT -8 Alan Vende said:

For some reason, with this code, they have returned:

I have the code for my black banner outside of the v6 switch so it will be on the other MPs:

The classes you specified in .addClass() actually need to be separated by a space, not a comma.

.staff-diamond should be .staff_diamond in your CSS since that's the class you specified.

[Alan Vende]

Nov 1, 2015 14:32:06 GMT -8 Brian said:

Nov 1, 2015 13:01:52 GMT -8 Alan Vende said:

Why can you separate the classes with commas but not the JS if statements?

Because .addClass() is a jQuery function designed specifically to support multiple values and if statements are basic Javascript which only supports comparing individual values.

Thank you. I didn't realize that!

Nov 1, 2015 14:32:06 GMT -8 Brian said:

Nov 1, 2015 13:01:52 GMT -8 Alan Vende said:

For some reason, with this code, they have returned:

I have the code for my black banner outside of the v6 switch so it will be on the other MPs:

The classes you specified in .addClass() actually need to be separated by a space, not a comma.

I changed the comma to a space, but it didn't show any changes. Could it be because of my cache?

Nov 1, 2015 14:32:06 GMT -8 Brian said:

.staff-diamond should be .staff_diamond in your CSS since that's the class you specified.

I checked that and it is. I'm not sure why they keep coming back, though. I checked to make sure it was spelled correctly and it is. I'm going to clear my cache to see if that helps.

EDIT: Clearing my cache didn't seem to help. I still see the diamond and the banner on the v6 variant profile.

[Brian]

Nov 1, 2015 14:38:25 GMT -8 Alan Vende said:

I changed the comma to a space, but it didn't show any changes. Could it be because of my cache?

You changed it for the one that hides it for an individual post but not the one where it hides it for particular boards.

[Alan Vende]

Nov 1, 2015 14:44:33 GMT -8 Brian said:

Nov 1, 2015 14:38:25 GMT -8 Alan Vende said:

I changed the comma to a space, but it didn't show any changes. Could it be because of my cache?

You changed it for the one that hides it for an individual post but not the one where it hides it for particular boards.

What exactly are you seeing, Brian? I'm seeing this:

// Default JS
// Staff Badge
if(user.group){
if(user.group.name == "Head Administrator"){
$(this).append('<div class="staff_diamond"><a href="http://psychic-psyghtings.proboards.com/thread/755/new-badges-on-mini-profiles"><img src="http://storage.proboards.com/6033396/i/z0ia563wclNdTJSvDxFq.png"></a></div>');
}
}

// Add class to mini-profile to use in CSS
$(this).addClass('admin-mp');

// Make group tag short
if(user.group){
if(user.group.name == "Head Administrator")
$(this).children('.short-black-banner').html('Admin');
}



// Hide custom title if none exists
if(!user.custom_title)
$(this).children('.custom_title').hide();

// Hide personal text if none exists
if(!user.personal_text)
$(this).children('.status').hide();

// Hide online status if offline
if(!user.is_online)
$(this).find('.online').hide();

// Hide Birthstone if none exists
if(!user.birthstosne)
$(this).find('.birthstone').hide();
// End default JS

// Add unique class to reference this mini-profile in CSS:
$(this).addClass('mp-variant');

// Show v1
if($(this).parents('#post-8').length)
$(this).addClass('switched').children('.v1').show();

// Show v2
if($(this).parents('#post-1784').length)
$(this).addClass('switched').children('.v2').show();

// Show v3
if($(this).parents('#post-2230').length)

$(this).addClass('switched').children('.v3').show();

// Show v4
if($(this).parents('#post-1956').length)

$(this).addClass('switched').children('.v4').show();

// Show v5
if($(this).parents('#post-2210').length)

$(this).addClass('switched').children('.v5').show();

// Show v6
if($(this).parents('#post-2331').length)

$(this).addClass('switched v6').children('.v6').show();

// Put v6 on all posts in The World of the Paranomral and sub-boards

if(pb.data('page').thread){
if(pb.data('page').thread.board_id == 232 || pb.data('page').thread.board_id == 115 || pb.data('page').thread.board_id == 240){
$(this).addClass('switched').children('.v6').show();
}
}

The bolded above is what I thought you were talking about. Is that not it?