Motobojo,
The references to the images themselves are in a stylesheet file
/timeline/src/ajax/api/styles/graphics.css (and in graphics-ie6.css which
includes the filters to make the transparency work correctly in IE). You won't
need to host your own copy of the Timeline src, just your own images and CSS.
To use your own bubble background image, you need to make replacement images
for each part of the bubble (sides, corners, top, bottom, and arrows). Give
these new names that make sense to you and put them in your stylesheet image
directory, e.g. "myImages".
Then you need to make two new css files (call them "myGraphics.css" and
"myGraphics-ie6.css") and change all the references to the bubble images from
the "images" directory to your "myImages" directory. If your bubble is
differently sized, you will have to adjust the size and positioning as well.
When your HTML loads, have it load your stylesheet. You must load it *after*
Timeline has loaded graphics.css.
The javascript object SimileAjax.Graphics.bubbleConfig contains css classnames
and image metrics used by the code to figure out how big the bubble is. You
might need to change the values for borderGraphicSize,
arrowGraphicTargetOffset, arrowGraphicLength, arrowGraphicWidth and
extraPadding if your bubble is differently sized or shaped. If all you do is
change the background color of the existing Simile-Widgets bubble, then you
shouldn't need to do this.
Just set this object in your code before you create the timeline. To use images
with a wider graphic for the border, say 70px instead of 50px, just add:
SimileAjax.Graphics.bubbleConfig = {
borderGraphicSize: 70
};
It's not a trivial change, but should all be doable with your own images, CSS
and maybe a snippet of Javascript.
--Mike
On Jun 20, 2010, at 5:49 PM, motobojo wrote:
> Thanks for the pointer to the images.
> I find them here:
> http://simile-widgets.googlecode.com/svn/timeline/trunk/src/webapp/api/images/
>
> But now I'll really expose my lack of understanding (sorry) ...
> Once I make my alternatively colored versions of the component images
> of the bubble how do I go about using my version of the images rather
> than the default ones?
>
> I'm loading timeline via:
> <script src="http://static.simile.mit.edu/timeline/api-2.3.0/timeline-
> api.js?bundle=true" type="text/javascript"></script>
>
> Am I going to need to host my own copy of the source merely to make
> these few changes?
>
> Thanks for any insight and for your patience.
>
> On Jun 1, 8:07 am, Michael Nosal <[email protected]> wrote:
>> The bubbles are made from several images. See timeline/src/webapp/api/images
>> - there are a dozen images that make up the parts of a bubble. The
>> background color for the bubble is part of the image, so if you want bubbles
>> with different background colors, you'll need to make new images.
>>
>> --Mike
>>
>> On May 28, 2010, at 4:04 PM, motobojo wrote:
>>
>>
>>
>>> Is there a way to way to change the color of the bubble background
>>> color for Timeline?
>>
>>> I have discovered many means of changing the background color for the
>>> various bits of text included in the bubble, but not the bubble fill/
>>> background color itself.
>>
>>> My apologies if this is documented somewhere and I just missed it. I
>>> am a newbie, but I've done quite a bit of poking around to find the
>>> answer myself and haven't had any luck.
>>
>>> Thanks in advance for any help.
>>
>>> fwiw I'm using Timeline version 2.3.0 (with Ajax lib 2.2.0)
--
You received this message because you are subscribed to the Google Groups
"SIMILE Widgets" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/simile-widgets?hl=en.
