Problems implementing badge kit

Jeri Lea Kisala

I thought I had all the pieces correctly assembled from the Badge Kit, but the end result is off in several ways and I don't know enough about html and CSS to do anything more than use the templates and follow the instructions.  The attachment shows the results I get.  There is a badge area displayed, BUT:

 

1 The inner box border from the template displays as only an upper border.

 

2  It appears in blue and I wanted it in green.

 

3  No changes I make to the padding numbers in the badge_scroll page make any difference at all in the positioning of the box on the wrapper.  (Note that the template did not include "float:right" parameters which the instruction document mentioned, but just for fun I tried it with and without that part.  No difference.  I also tried "float: left" just to see if it moved.)

 

4  No badges actually appear, EVEN when I make the new wrapper live and look at participant pages who should qualify for badges.  (Almost anyone should qualify for a participant type badge, and even those don't appear.)

 

(My images are all uploaded to the image library, not the ftp site.)

 

I could live with 1 and 2 if 3 and 4 were working correctly.  Is there anyone who has any ideas to help me???

Kent Gilliam

Can you share a screenshot or where this might be live? 

 

Are you for sure the badges are not larger than what was templated in the kit? 

 

This is the CSS for the border of the scroll:

 

.vScroll p {

color: #4899d2;

font-weight: bold;

font-size: 13pt;

} 

Jeri Lea Kisala

Kent Gilliam:

Can you share a screenshot or where this might be live? 

 

Are you for sure the badges are not larger than what was templated in the kit? 

 

This is the CSS for the border of the scroll:

 

.vScroll p {

color: #4899d2;

font-weight: bold;

font-size: 13pt;

} 

After a week of immersing myself in HTML code (with which I had barely a passing familiarity), I believe I have located the problems I am having with the badge kit to 5 areas:

 

1. There seems to be a syntax error in the monetary value conditionals such as this.
   
   <!-- ****$250 Badge****  -->
   
   <li>
   
   [[?[[E130:[[E48:[[S334:fr_id]]-[[S334x]]:dollars]] 249.99 &gt;]]::1::<img  title="For those who have raised $250 " src="../images/content/pagebuilder/250.png" border="0" alt="I raised $250" >::]]
   
   </li>

 

2. Both the reus_badgeconditionals file and the badge_scroll file have multiple instances of /> which should be just >.

 

3. The instructions for how to adjust the positioning of the badge scroll on the page do not seem to direct you to the right section of code for actually getting the position to change.

 

4. The badge scroll pushes the main content area on the participant page into the wrapper footer section, messing the footer up.

 

5. I think the inner border color of the badge scroll is actually set within one of the java scripts.  If all else were correct, I could probably live with it remaining blue, but it would be nice if all the borders matched our branding.

Our event is in 5 weeks.  Can someone please help?

Kent Gilliam

Jeri Lea Kisala:

After a week of immersing myself in HTML code (with which I had barely a passing familiarity), I believe I have located the problems I am having with the badge kit to 5 areas:

 

1. There seems to be a syntax error in the monetary value conditionals such as this.
   
   <!-- ****$250 Badge****  -->
   
   <li>
   
   [[?[[E130:[[E48:[[S334:fr_id]]-[[S334x]]:dollars]] 249.99 &gt;]]::1::<img  title="For those who have raised $250 " src="../images/content/pagebuilder/250.png" border="0" alt="I raised $250" >::]]
   
   </li>

 

2. Both the reus_badgeconditionals file and the badge_scroll file have multiple instances of /> which should be just >.

 

3. The instructions for how to adjust the positioning of the badge scroll on the page do not seem to direct you to the right section of code for actually getting the position to change.

 

4. The badge scroll pushes the main content area on the participant page into the wrapper footer section, messing the footer up.

 

5. I think the inner border color of the badge scroll is actually set within one of the java scripts.  If all else were correct, I could probably live with it remaining blue, but it would be nice if all the borders matched our branding.

Our event is in 5 weeks.  Can someone please help?

Jeri,

 

It doesn't matter if the tags have /> or just > at the end. That is interchangeable. We've had others implement this kit and didn't hear of any issues but I'll try to help you here. 

 

Can I ask you if you happened to open any of the elements up in WYSIWYG and not the plain-text editor?

 

The badge scroll is intended to fit on the left side of the page at the bottom of your wrapper and only display on personal pages. To change the position you have to play around with the CSS at the top of the "badge_scroll" html. 

 

#scroll-container {

padding: 50 20 20 0;

}

.vScroll {

background-color: #ffffff;

border: 0;

margin: 10px;

padding: 10 10 200 10;

width: 201px;

border:3px solid #4899d2;

}

 

The scroll is built into the pagewrapper because that is the only place available to insert html code and have it display on a personal page and appear to be in the body of the page. Because header sizes can vary, you have to play around with these. The order of the numbers control the different sides, so when you see "padding: 10 10 200 10;" it is controlling the position this way: padding: (top) (right) (bottom) (left)

 

 

The CSS to change the color is

 

.vScroll {

background-color: #ffffff;

border: 0;

margin: 10px;

padding: 10 10 200 10;

width: 201px;

border:3px solid #4899d2;

}

 

The color I bolded is what will change your color. I put the finall controlling CSS for the display element at the top of the "badge_scroll" html doc so you don't have to updated the full CSS doc. 

 

I don't see any syntax errors so I'm not sure where those are coming up. If you opened any of the elements up in the WYSIWYG then you will have to redo that code since it probably scrambled some of the code. 

Jeri Lea Kisala

Kent Gilliam:

Jeri,

 

It doesn't matter if the tags have /> or just > at the end. That is interchangeable. We've had others implement this kit and didn't hear of any issues but I'll try to help you here. 

 

Can I ask you if you happened to open any of the elements up in WYSIWYG and not the plain-text editor?

 

The badge scroll is intended to fit on the left side of the page at the bottom of your wrapper and only display on personal pages. To change the position you have to play around with the CSS at the top of the "badge_scroll" html. 

 

#scroll-container {

padding: 50 20 20 0;

}

.vScroll {

background-color: #ffffff;

border: 0;

margin: 10px;

padding: 10 10 200 10;

width: 201px;

border:3px solid #4899d2;

}

 

The scroll is built into the pagewrapper because that is the only place available to insert html code and have it display on a personal page and appear to be in the body of the page. Because header sizes can vary, you have to play around with these. The order of the numbers control the different sides, so when you see "padding: 10 10 200 10;" it is controlling the position this way: padding: (top) (right) (bottom) (left)

 

 

The CSS to change the color is

 

.vScroll {

background-color: #ffffff;

border: 0;

margin: 10px;

padding: 10 10 200 10;

width: 201px;

border:3px solid #4899d2;

}

 

The color I bolded is what will change your color. I put the finall controlling CSS for the display element at the top of the "badge_scroll" html doc so you don't have to updated the full CSS doc. 

 

I don't see any syntax errors so I'm not sure where those are coming up. If you opened any of the elements up in the WYSIWYG then you will have to redo that code since it probably scrambled some of the code. 

Kent -



I appreciate that you are trying to help me, and I am willing to concede a whole lot of user error, but, going point by point



1.

Before I took out the />'s and replaced them with >, my page just looked blank. Once I made that change, a lot more of my page showed up correctly.

2.

I was scrupulously careful not to open any of these in the WYSIWYG editor. And if I look at the code that is in place now, it has not been scrambled or changed in any way.

3.

I understand that the badge scroll is supposed to be inserted in the page wrapper to appear as though it is in the content area (although at the top, not the bottom, according to the instructions and example), and that changing the scroll container padding numbers is supposed to change the position. And I have changed them, to be many different values and no matter what I change them to, the position of the scroll container does not appear to move. HOWEVER, I have experimented with putting the badge scroll in the participant page footer script, and it seems to look good there, so I might be able to avoid dealing with why I am not able to position this element as intended. I won't know for sure until I get the whole display working.

4.

Also, I found the last border I needed to change the color of, but it was in the CSS accompanying the CarouselLite java script code which gets uploaded to the ftp, NOT the badge_scroll script we were instructed to edit.

5.

The biggest problem I am facing at this point is in the reus_badgeconditionals script, which is what is supposed to determine which badge images need to be displayed and pass them on to the badge scroll element. So far the participation conditions and the self-donation conditions correctly pass along images, but the ones based on dollars raised do not. I don't know if there is a syntax error, but I did notice that the structure of those conditionals is slightly different than the ones that do work. Perhaps there is some other error that causes those not to work. Is "dollars" a field or a function in the database that contains the total raised? I am just trying to guess at what the different pieces mean. Maybe "dollars" needs to be something else.



I have not seen any of the similar conditionals, such as the ones based on number of gifts or number of emails, successfully return a badge image, either, but I have not been as focused on trying to trip those conditions specifically, until I get the dollars ones working.



If you could just focus on helping me with this fifth point, I think I can work around all the other little things. But a badge display that doesn't display badges is not a whole lot of good.



-Jeri-

Kent Gilliam

Jeri Lea Kisala:

Kent -



I appreciate that you are trying to help me, and I am willing to concede a whole lot of user error, but, going point by point



1.

Before I took out the />'s and replaced them with >, my page just looked blank. Once I made that change, a lot more of my page showed up correctly.

2.

I was scrupulously careful not to open any of these in the WYSIWYG editor. And if I look at the code that is in place now, it has not been scrambled or changed in any way.

3.

I understand that the badge scroll is supposed to be inserted in the page wrapper to appear as though it is in the content area (although at the top, not the bottom, according to the instructions and example), and that changing the scroll container padding numbers is supposed to change the position. And I have changed them, to be many different values and no matter what I change them to, the position of the scroll container does not appear to move. HOWEVER, I have experimented with putting the badge scroll in the participant page footer script, and it seems to look good there, so I might be able to avoid dealing with why I am not able to position this element as intended. I won't know for sure until I get the whole display working.

4.

Also, I found the last border I needed to change the color of, but it was in the CSS accompanying the CarouselLite java script code which gets uploaded to the ftp, NOT the badge_scroll script we were instructed to edit.

5.

The biggest problem I am facing at this point is in the reus_badgeconditionals script, which is what is supposed to determine which badge images need to be displayed and pass them on to the badge scroll element. So far the participation conditions and the self-donation conditions correctly pass along images, but the ones based on dollars raised do not. I don't know if there is a syntax error, but I did notice that the structure of those conditionals is slightly different than the ones that do work. Perhaps there is some other error that causes those not to work. Is "dollars" a field or a function in the database that contains the total raised? I am just trying to guess at what the different pieces mean. Maybe "dollars" needs to be something else.



I have not seen any of the similar conditionals, such as the ones based on number of gifts or number of emails, successfully return a badge image, either, but I have not been as focused on trying to trip those conditions specifically, until I get the dollars ones working.



If you could just focus on helping me with this fifth point, I think I can work around all the other little things. But a badge display that doesn't display badges is not a whole lot of good.



-Jeri-

So the syntax of the E tag is to explore the URL and determine the participant ID and then render based on that. When you go to your page where you are testing, has that participant raised the amount you're trying to render a badge for? Can you share your test record and the page you're testing so I can take a look?

Jeri Lea Kisala

Kent Gilliam:

So the syntax of the E tag is to explore the URL and determine the participant ID and then render based on that. When you go to your page where you are testing, has that participant raised the amount you're trying to render a badge for? Can you share your test record and the page you're testing so I can take a look?

Here are screenshot markups of the top and bottom of a participant page. I have noted three possible locations where the badge scroll could go, depending on what we can get to work and look right. (I don't know why my iPad gave them both the same name.)



Thanks!





-Jeri-



Jeri Lea Kisala

Office Manager

Samaritans, Inc.

41 West Street Suite 401

Boston, MA 02111

617-536-2460 x 5228

FAX: 617-247-0207

Kent Gilliam

Jeri Lea Kisala:
Here are screenshot markups of the top and bottom of a participant page. I have noted three possible locations where the badge scroll could go, depending on what we can get to work and look right. (I don't know why my iPad gave them both the same name.)



Thanks!





-Jeri-



Jeri Lea Kisala

Office Manager

Samaritans, Inc.

41 West Street Suite 401

Boston, MA 02111

617-536-2460 x 5228

FAX: 617-247-0207

Hi Jeri,

 

There's not any images attached to the post. 

Kent Gilliam

Jeri Lea Kisala:
Here are screenshot markups of the top and bottom of a participant page. I have noted three possible locations where the badge scroll could go, depending on what we can get to work and look right. (I don't know why my iPad gave them both the same name.)



Thanks!





-Jeri-



Jeri Lea Kisala

Office Manager

Samaritans, Inc.

41 West Street Suite 401

Boston, MA 02111

617-536-2460 x 5228

FAX: 617-247-0207

Hi Jeri,

 

Would it be possible to chat on the phone tomorrow morning? I'm free from 8-9 CDT and then 9:30 to 12:00 CDT. Let me know what works for you and we can get this figured out. If you can share those screenshots of where you want the badge scroll I will get it positioned where you want it and help you make sure the conditional codes are working and will show your badges. 

 

Thanks,

Kent