Thanks Michael. I tried what you suggested, but I must be doing something wrong as it isn't working.
I made my own version of the bubble images. All I did was simply negate the color scheme (to high contrast black, cf., the default high contrast white). I made no changes to geometry/size. I copied and modified my own copies of the 2 css files you described updating the paths for the images to point to my modified png files. I updated the HTML in the head section to load the modified CSS files after the timeline code has been loaded .... <<<< <script src="http://static.simile.mit.edu/timeline/api-2.3.0/ timeline-api.js?bundle=true" type="text/javascript"></script> <!-- Redirect to my custom bubble graphics --> <link ref="stylesheet" href="mygraphics.css" type="text/css"> <link ref="stylesheet" href="mygraphics-ie6.css" type="text/css"> >>>> Unfortunately it is behaving has if I'm made no changes at all. You'll find the timeline here (if that helps): http://tom.raresteeds.com/genealogy/timelines/MorrisseyElaine.tl.htm Thanks for the assistance so far and any further insight you can provide. On Jun 21, 8:42 am, Michael Nosal <mno...@mitre.org> wrote: > 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/ap... > > > 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 <mno...@mitre.org> 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)- Hide quoted > >>> text - > > - Show quoted text - -- You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to simile-widg...@googlegroups.com. To unsubscribe from this group, send email to simile-widgets+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.
