Inherit fonts?

[Mike Caskey]

How do you get timeline to inherit the font styles already on the page you embed timeline in?

[Zach Wise]

You could create your own css file for timeline or simply overwrite the css rules.

[Mike Caskey]

That sounds good.  I'd like to use the source LESS files, and compile it back to CSS in the same way that you do.  What's your flow?

[Chris Mathan]

Hi Zach, I'm a front end designer. I'm using Timeline on a WordPress website and would like it feel integral to the site — using the same fonts and colors.  From the examples I see, it looks like the colors can't be changed...but it sounds like you're saying there is more flexibility with the fonts. Is that correct? I'm attaching a file of what I would like to do. Can you let me know if that's possible. If not, might that be changed in the future?

[Zach Wise]

You can customize anything you want since it's styled using css. You can load a custom font css file easily and colors can also be changed via css.

[Ryan Hill]

Ya... I would like to have a more direct answer from someone here.  What are some of the css labels that we need to reference to change the font sizes.  I've been digging through the compiled css and it's a pain. 

[Zach Wise]

If you use chrome or safari, just inspect the element to find out the class.

[dianna doran]

I'm not finding these responses very helpful. I copied the css from the file PT.css and moved it to my page and changed all the fonts to what I want. Nothing changes. Can we get some more explicit instructions?

[Duncan MacDonald]

Am I the only one here who doesn't think the app developer has a responsibility to teach people basic css?

[Dharma Kelleher]

For some reason, when I'm declaring a new rule in my stylesheet, it's not recognizing the new rule.

In this case, I used Firebug and selected the element in question (in this case, .vco-storyjs h2.start). Then I added a rule to the bottom of my normal stylesheet:

.vco-storyjs h2.start {
  font-family: Arial !important;
}

After I saved, updated and refreshed everything, it's not recognizing the rule even exists.  In Firebug in the cascading list of rules for that element, the new rule doesn't show up. I'm wondering if it's because of it being in an iframe or perhaps because it's pulling in the data via JSON.

Any ideas?

On Friday, June 15, 2012 5:31:23 PM UTC-7, Zach Wise wrote:

[Alyssa Factor Saito]

I have the same issue - embedded Timeline into a wordpress page and added rules to my custom.css with no effect.
I've looked at Google template and see no way to overwrite the css rules? I know which elements (per Firebug) I want to change, just not how to implement those changes.
If anyone has this working and can enlighten via this thread, it would be greatly appreciated!

[Andy Gee]

New styles need to be added after the original styles if you want to overwrite them.

[Dharma Kelleher]

On Saturday, June 15, 2013 1:33:36 AM UTC-7, Andy Gee wrote:

New styles need to be added after the original styles if you want to overwrite them.

Yes, I understand CSS. I'm a developer. I've tried a number of different approaches, none of which worked.

The timeline code is getting pulled in via AJAX using the iframe code.

<iframe src='http://embed.verite.co/timeline/?source=0AubTk6Ov6UrIdFFYakFfZ2R6Q0VqWlVRNUFVX1E&maptype=toner&lang=en&height=650' width='100%' height='650' frameborder='0'>
</iframe>

The selector I'm trying to change is .vco-storyjs h2.start.

I've tried putting css after the closing iframe tag on my php file with no effect.

<style>
.vco-storyjs h2.start { font-family: Verdana !important; }
</style>

I've tried it just BEFORE the closing iframe tag. Still no luck.  

I tried using jQuery to modify the CSS of the element with no luck.

    <script>
     jQuery(document).ready(function($) {
        $('.vco-storyjs h2.start').css('font-family','Verdana !important');
      });
    </script>

I tried putting a console.log command in the script to see if it was even finding the selector and the result was null.

I pulled the selector right off of Firebug.

So how else am I supposed to put the CSS after timeline code?

  

[Zach Wise]

If you want to do that, you need to host the code on your own site. You can't change the css inside an iframe.

[Dharma Kelleher]

Thanks for the quick response, Zach.

Just so I understand, you're saying I need to download the Timeline repo and install the JS on my site. Is that correct?

Dharma

[Beth]

Looks like you can use simple html style tags within the actual spreadsheet to get fonts and colors to work. Here's a screenshot example:

Thanks! Loving the timeline - very cool.

On Friday, June 15, 2012 10:46:44 AM UTC-5, Mike Caskey wrote: