How do I remove the border around a javascript widget?

Hi Clif,
Thanks for getting back to me. It doesn't appear to be anything on JS-Kit's end as when I put the exact same code:



in a regular web page there is no border. Here's my test: http://www.biology.usu.edu/labsites/w.... The problem reminds me a bit of when all... tables I think it was... had borders due to PBwiki's default CSS. Anymore ideas?
Thanks,
Ethan

Sorry ... I played around with the DIV styles. I was not able to remove the border. I was able to add a bigger border and add colors to it, but no luck removing it.

I added style="border: 3px coral solid;" into the div and worked from there. If you'd like some more info about inline styles, you can check here:
http://www.yourhtmlsource.com/stylesh...

Ethan, I'm from JS-Kit - I will point this thread out to our support team and see if they can't help you out.

Thanks Chris. Much appreciated.

> It works great, but there is a gray border around the widget that I'd rather not have.

Hello Ethan,

I am an engineer from JS-Kit.
Could you please provide us with URL of the wiki page which contains JS-Kit ratings widget?

Thank you.

Hi Alexander,
Thanks for your help. I've set up an example wiki with the widget on the front page: http://weecology.pbwiki.com/. The wiki is setup to be editable by anyone with an account so if you want to play around you can quickly setup a PBwiki account, click the edit tab in the upper left corner, double click on the green box and you'll see the JS-kit code that can then be edited. Let me know if I can do anything else to help.
Thanks,
Ethan

Hello Ethan,

We have checked the page and found out that the border is added as a result of applying the following CSS selector:

.wikistyle table td, .wikistyle table th {
background:#FFFFFF none repeat scroll 0 0;
border:1px solid #BBBBBB;
padding:2px 4px;
}

As far as we understood such CSS rule is part of default PBWiki's CSS styles.
We are not sure if you can add your own CSS styles, but if you do have such possibility you should be able to resolve the issue by adding the following style:

.js-ratings-tableWrapper .wikistyle table td,
.js-ratings-tableWrapper .wikistyle table th
{
border: 0;
padding: 0;
}

Feel free to contact us should you need any kind of assistance, we will be glad to help you.

Thanks Alexander. I do have the ability to add custom CSS. I'll try your suggestion in the next couple of days and let you know how it turns out.

I have a working solution, though it's not quite what Alexander suggested. Putting the bottom portion of Alexander's code in the CSS using 'style' tags in PBwiki's 'Insert Custom Code' box didn't get rid of the border, but inserting:

.wikistyle table td,
.wikistyle table th
{
border: 0;
padding: 0;
}

does get rid of the border. I don't know much about CSS, but presumably this is getting rid of all table borders. It does appear to be possible to put borders back in by adding a 'style=' inside the 'div' tags for a particular object.

Not knowing much about CSS I'm not sure exactly how the 'js-ratings-tableWrapper' portion of Alexander's code is intended to work, but after a little playing around I got this to work:

.js-kit-rating table td,
.js-kit-rating table th
{
border: 0;
padding: 0;
}

which seems like maybe it would just focus on the js-kit widgets.

Does this look reasonable or have I done something bad/dangerous/stupid?

Thanks again, Ethan

Hello Ethan,

> Does this look reasonable or have I done something bad/dangerous/stupid?

As far as I can see the code looks right and should not cause any issue with displaying of the JS-Kit Ratings widget.

Feel free to contact us, we will be glad to help you.

Thanks again Alexander. I really appreciate all of your help and am looking forward to installing a full JS-Kit Ratings system on some of my wiki pages.

Hello Ethan,

We are glad you managed to resolve the issue.

Feel free to contact us at support@js-kit.com should you need any kind of assistance, we will be glad to help you.