TIMELINE. Controlling style of event bubble contents

[GoogleCodeExporter]

How does one control the style of the event bubble window?

thanks!

william

[Submitted by  on simile.mit.edu]

william - 22/Aug/07 11:26 AM
Found a solution. thx!
[ Show » ]
william - 22/Aug/07 11:26 AM Found a solution. thx!

[ Permlink | « Hide ]
Gaurav - 15/Oct/07 07:23 PM
william, please post what you did so others may benefit from it..
[ Show » ]
Gaurav - 15/Oct/07 07:23 PM william, please post what you did so others may
benefit from it..

[ Permlink | « Hide ]
Gaurav - 15/Oct/07 07:25 PM
What I did is added a div tag with a style sheet class assigned around the
bubble content in the event xml. Then you can assign any styling elements
in your css file ...
[ Show » ]
Gaurav - 15/Oct/07 07:25 PM What I did is added a div tag with a style
sheet class assigned around the bubble content in the event xml. Then you
can assign any styling elements in your css file ...

[ Permlink | « Hide ]
william - 16/Oct/07 11:49 AM
If I recall I added this script to the page:

<script>Timeline.ClassicTheme = new Object();

Timeline.ClassicTheme.implementations = [];

Timeline.ClassicTheme.create = function(locale) {
    if (locale == null) {
        locale = Timeline.Platform.getDefaultLocale();
    }

    var f = Timeline.ClassicTheme.implementations[locale];
    if (f == null) {
        f = Timeline.ClassicTheme._Impl;
    }
    return new f();
};

Timeline.ClassicTheme._Impl = function() {
    this.firstDayOfWeek = 0; // Sunday

    this.ether = {
        backgroundColors: [
            "#ffffff",
            "#c9e9ed", // bottom
            "#990000",
            "#030303"
        ],
        highlightColor: "white",
        highlightOpacity: 44,
        interval: {
            line: {
                show: true,
                color: "#181818",
                opacity: 15
            },
            weekend: {
                color: "#818181",
                opacity: 30
            },
            marker: {
                hAlign: "Bottom",
                hBottomStyler: function(elmt) {
                    elmt.className = "timeline-ether-marker-bottom";
                },
                hBottomEmphasizedStyler: function(elmt) {
                    elmt.className = "timeline-ether-marker-bottom-emphasized";
                },
                hTopStyler: function(elmt) {
                    elmt.className = "timeline-ether-marker-top";
                },
                hTopEmphasizedStyler: function(elmt) {
                    elmt.className = "timeline-ether-marker-top-emphasized";
                },

                vAlign: "Right",
                vRightStyler: function(elmt) {
                    elmt.className = "timeline-ether-marker-right";
                },
                vRightEmphasizedStyler: function(elmt) {
                    elmt.className = "timeline-ether-marker-right-emphasized";
                },
                vLeftStyler: function(elmt) {
                    elmt.className = "timeline-ether-marker-left";
                },
                vLeftEmphasizedStyler:function(elmt) {
                    elmt.className = "timeline-ether-marker-left-emphasized";
                }
            }
        }
    };

    this.event = {
        track: {
            offset: 0.5, // em
            height: 1.5, // em
            gap: 0.5 // em
        },
        instant: {
            icon: Timeline.urlPrefix + "images/dull-blue-circle.png",
            lineColor: "#2D2D2D",
            impreciseColor: "#58A0DC",
            impreciseOpacity: 20,
            showLineForNoText: true
        },
        duration: {
            color: "#262626",
            opacity: 100,
            impreciseColor: "#58A0DC",
            impreciseOpacity: 20
        },
        label: {
            insideColor: "white",
            outsideColor: "black",
            width: 200 // px
        },
        highlightColors: [
            "#2D2D2D",
            "#E4E4E4",
            "#E4E4E4",
            "#E4E4E4"
        ],
        bubble: {
            width: 250, // px
            height: 125, // px
            titleStyler: function(elmt) {
                elmt.className = "timeline-event-bubble-title";
            },
            bodyStyler: function(elmt) {
                elmt.className = "timeline-event-bubble-body";
            },
            imageStyler: function(elmt) {
                elmt.className = "timeline-event-bubble-image";
            },
            wikiStyler: function(elmt) {
                elmt.className = "timeline-event-bubble-wiki";
            },
            timeStyler: function(elmt) {
                elmt.className = "timeline-event-bubble-time";
            }
        }
    };
};
</script>

and then called a .css file with:

/*Bubble styles*/
#timeline {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #818181;
text-decoration: none;
height: 200px;
width: 800px;
border: 1px solid #969696;

}
.timeline-event-bubble-title {
    font-family: Arial, Helvetica, sans-serif;
    font-size:12px;
}
.timeline-event-bubble-title a {
    color:#424242;
    text-decoration:none;
}
.timeline-event-bubble-body {
    font-family: Arial, Helvetica, sans-serif;
    font-size:12px;

}
.timeline-event-bubble-wiki {

}
.timeline-event-bubble-time {
    font-family: Arial, Helvetica, sans-serif;
    font-size:10px;
}

.timeline-ether-marker-bottom {
    font-family: Arial, Helvetica, sans-serif;
    font-size:11px;
}

Original issue reported on code.google.com by GabrielR...@googlemail.com on 7 Apr 2009 at 2:46