Controlling the CSS of feed API
53 views
Skip to first unread message
darkstarmedia.net
Nov 3, 2009, 3:12:09 PM11/3/09
to Google AJAX APIs
Hello,
i cant find any documentation or any way to control the css of the
google feed api...
it seems to be taking some basic CSS from my sites css
they have sample css here http://code.google.com/apis/ajaxfeeds/documentation/reference.html
but it doesn't do anything, i added it to the page and it has no
effect on the Feed API
some items I want to change....
1. I dont want the title to get shortened if it is too long, i need it
to wrap and display in full
2. i want to change, size, colour, line height, ect of the fonts
3. I need to remove the top grey border
4. I want to control the length of the snippet of text
5. I need to add space between the entries
this is the site
http://www.darkstarmedia.net/cpls/english/index.php
i cant find any documentation or any way to control the css of the
google feed api...
it seems to be taking some basic CSS from my sites css
they have sample css here http://code.google.com/apis/ajaxfeeds/documentation/reference.html
but it doesn't do anything, i added it to the page and it has no
effect on the Feed API
some items I want to change....
1. I dont want the title to get shortened if it is too long, i need it
to wrap and display in full
2. i want to change, size, colour, line height, ect of the fonts
3. I need to remove the top grey border
4. I want to control the length of the snippet of text
5. I need to add space between the entries
this is the site
http://www.darkstarmedia.net/cpls/english/index.php
Jeremy Geerdes
Nov 3, 2009, 3:15:16 PM11/3/09
to google-ajax...@googlegroups.com
The best way to track down the style rules and such of the Feed
Control would be to use Firebug to inspect the elements you want to
affect. Then build your rules to counter whatever is already applied.
Jeremy R. Geerdes
Effective website design & development
Des Moines, IA
For more information or a project quote:
http://jgeerdes.home.mchsi.com
http://jgeerdes.blogspot.com
http://jgeerdes.wordpress.com
jgee...@mchsi.com
Unless otherwise noted, any price quotes contained within this
communication are given in US dollars.
If you're in the Des Moines, IA, area, check out Debra Heights
Wesleyan Church!
And check out my blog, Adventures in Web Development, at http://jgeerdes.blogspot.com
!
Control would be to use Firebug to inspect the elements you want to
affect. Then build your rules to counter whatever is already applied.
Jeremy R. Geerdes
Effective website design & development
Des Moines, IA
For more information or a project quote:
http://jgeerdes.home.mchsi.com
http://jgeerdes.blogspot.com
http://jgeerdes.wordpress.com
jgee...@mchsi.com
Unless otherwise noted, any price quotes contained within this
communication are given in US dollars.
If you're in the Des Moines, IA, area, check out Debra Heights
Wesleyan Church!
And check out my blog, Adventures in Web Development, at http://jgeerdes.blogspot.com
!
darkstarmedia.net
Nov 3, 2009, 3:31:53 PM11/3/09
to Google AJAX APIs
Hello,
the firebug is very handy, but it doesn't work here.. I can see the
styles but google's default style on the server overwrites my style
and there is no where in the API code to change where the css source
is... it is all being done within the google javascript
On Nov 3, 3:15 pm, Jeremy Geerdes <jrgeer...@gmail.com> wrote:
> The best way to track down the style rules and such of the Feed
> Control would be to use Firebug to inspect the elements you want to
> affect. Then build your rules to counter whatever is already applied.
>
> Jeremy R. Geerdes
> Effective website design & development
> Des Moines, IA
>
> For more information or a project quote:http://jgeerdes.home.mchsi.comhttp://jgeerdes.blogspot.comhttp://jgeerdes.wordpress.com
> jgeer...@mchsi.com
the firebug is very handy, but it doesn't work here.. I can see the
styles but google's default style on the server overwrites my style
and there is no where in the API code to change where the css source
is... it is all being done within the google javascript
On Nov 3, 3:15 pm, Jeremy Geerdes <jrgeer...@gmail.com> wrote:
> The best way to track down the style rules and such of the Feed
> Control would be to use Firebug to inspect the elements you want to
> affect. Then build your rules to counter whatever is already applied.
>
> Jeremy R. Geerdes
> Effective website design & development
> Des Moines, IA
>
> For more information or a project quote:http://jgeerdes.home.mchsi.comhttp://jgeerdes.blogspot.comhttp://jgeerdes.wordpress.com
>
> Unless otherwise noted, any price quotes contained within this
> communication are given in US dollars.
>
> If you're in the Des Moines, IA, area, check out Debra Heights
> Wesleyan Church!
>
> And check out my blog, Adventures in Web Development, athttp://jgeerdes.blogspot.com
> Unless otherwise noted, any price quotes contained within this
> communication are given in US dollars.
>
> If you're in the Des Moines, IA, area, check out Debra Heights
> Wesleyan Church!
>
> !
>
> On Nov 3, 2009, at 2:12 PM, darkstarmedia.net wrote:
>
>
>
> > Hello,
>
> > i cant find any documentation or any way to control the css of the
> > google feed api...
> > it seems to be taking some basic CSS from my sites css
>
> > they have sample css herehttp://code.google.com/apis/ajaxfeeds/documentation/reference.html
>
> On Nov 3, 2009, at 2:12 PM, darkstarmedia.net wrote:
>
>
>
> > Hello,
>
> > i cant find any documentation or any way to control the css of the
> > google feed api...
> > it seems to be taking some basic CSS from my sites css
>
Jeremy Geerdes
Nov 3, 2009, 3:40:29 PM11/3/09
to google-ajax...@googlegroups.com
You can override styles one of two ways: more specific CSS selectors,
or CSS rules that have at least the same specificity but are loaded
later in the page loading process. If you want to go for the ultimate
control, you could load the Feeds API with the nocss option like this:
google.load('feeds','1',{nocss:1});
Then it won't load any of its own CSS, and you'll be free to do as you
please.
Jeremy R. Geerdes
Effective website design & development
Des Moines, IA
For more information or a project quote:
!
or CSS rules that have at least the same specificity but are loaded
later in the page loading process. If you want to go for the ultimate
control, you could load the Feeds API with the nocss option like this:
google.load('feeds','1',{nocss:1});
Then it won't load any of its own CSS, and you'll be free to do as you
please.
Jeremy R. Geerdes
Effective website design & development
Des Moines, IA
For more information or a project quote:
http://jgeerdes.home.mchsi.com
http://jgeerdes.blogspot.com
http://jgeerdes.wordpress.com
jgee...@mchsi.com
http://jgeerdes.blogspot.com
http://jgeerdes.wordpress.com
jgee...@mchsi.com
Unless otherwise noted, any price quotes contained within this
communication are given in US dollars.
If you're in the Des Moines, IA, area, check out Debra Heights
Wesleyan Church!
And check out my blog, Adventures in Web Development, at http://jgeerdes.blogspot.com
communication are given in US dollars.
If you're in the Des Moines, IA, area, check out Debra Heights
Wesleyan Church!
!
James Sangster (UST)
Nov 6, 2009, 10:24:00 AM11/6/09
to Google AJAX APIs
I'm having a similar issue.My goal is to have a 440pix box and have
all the text that would overflow, instead wrap. The default CSS is to
force no wrapping. To fix this I've created several css definitions in
the pastable script to override google's external css.
example:
.gfg-title {
width : 440px;
overflow : normal;
text-wrap : normal;
white-space: normal;
}
However, I see now that I've included these that some part of the AJAX
script is creating some of the CSS in-line on the fly. I'm having a
hard time overriding this css that's inserted by google on the fly.
any suggestions would be appreciated.
See http://sangstergraphicdesign.com/rss.html
Note that long text in the lower two boxes now wrap as anticipated but
any linked text in the top most box has this in-line css forcing the
line to either eilipse in chrome, but will simply hide any text after
440 in FF or IE. How do I get that top box to wrap text like the
bottom boxes?
Oh, I'm sure it's in the documentation but I haven't had a chance to
look. Is there an option argument to get it to pull more than 4 items
from each feed?
Many thanks.
On Nov 3, 2:40 pm, Jeremy Geerdes <jrgeer...@gmail.com> wrote:
> You can override styles one of two ways: more specific CSS selectors,
> or CSS rules that have at least the same specificity but are loaded
> later in the page loading process. If you want to go for the ultimate
> control, you could load the Feeds API with the nocss option like this:
>
> google.load('feeds','1',{nocss:1});
>
> Then it won't load any of its own CSS, and you'll be free to do as you
> please.
>
> Jeremy R. Geerdes
> Effective website design & development
> Des Moines, IA
>
all the text that would overflow, instead wrap. The default CSS is to
force no wrapping. To fix this I've created several css definitions in
the pastable script to override google's external css.
example:
.gfg-title {
width : 440px;
overflow : normal;
text-wrap : normal;
white-space: normal;
}
However, I see now that I've included these that some part of the AJAX
script is creating some of the CSS in-line on the fly. I'm having a
hard time overriding this css that's inserted by google on the fly.
any suggestions would be appreciated.
See http://sangstergraphicdesign.com/rss.html
Note that long text in the lower two boxes now wrap as anticipated but
any linked text in the top most box has this in-line css forcing the
line to either eilipse in chrome, but will simply hide any text after
440 in FF or IE. How do I get that top box to wrap text like the
bottom boxes?
Oh, I'm sure it's in the documentation but I haven't had a chance to
look. Is there an option argument to get it to pull more than 4 items
from each feed?
Many thanks.
On Nov 3, 2:40 pm, Jeremy Geerdes <jrgeer...@gmail.com> wrote:
> You can override styles one of two ways: more specific CSS selectors,
> or CSS rules that have at least the same specificity but are loaded
> later in the page loading process. If you want to go for the ultimate
> control, you could load the Feeds API with the nocss option like this:
>
> google.load('feeds','1',{nocss:1});
>
> Then it won't load any of its own CSS, and you'll be free to do as you
> please.
>
> Jeremy R. Geerdes
> Effective website design & development
> Des Moines, IA
>
Jeremy Geerdes
Nov 6, 2009, 10:46:17 AM11/6/09
to google-ajax...@googlegroups.com
If you use Firebug to inspect the affected elements, you'll see that
the problem is actually two-fold. First, the CSS selectors in the
default CSS tend to be relatively specific, which means that they will
override simple class selectors. And second, the problem isn't really
the overflow, text-wrap or white-space rules. It's the height
rule. .gfg-title elements are given a height (if I recall correctly)
of 1 em and a overflow of hidden. This has the effect of hiding
everything but the first line of text in the title elements. What you
need to do is set the height to auto.
Jeremy R. Geerdes
Effective website design & development
Des Moines, IA
For more information or a project quote:
the problem is actually two-fold. First, the CSS selectors in the
default CSS tend to be relatively specific, which means that they will
override simple class selectors. And second, the problem isn't really
the overflow, text-wrap or white-space rules. It's the height
rule. .gfg-title elements are given a height (if I recall correctly)
of 1 em and a overflow of hidden. This has the effect of hiding
everything but the first line of text in the title elements. What you
need to do is set the height to auto.
Jeremy R. Geerdes
Effective website design & development
Des Moines, IA
For more information or a project quote:
http://jgeerdes.home.mchsi.com
http://jgeerdes.blogspot.com
http://jgeerdes.wordpress.com
jgee...@mchsi.com
http://jgeerdes.blogspot.com
http://jgeerdes.wordpress.com
jgee...@mchsi.com
Unless otherwise noted, any price quotes contained within this
communication are given in US dollars.
If you're in the Des Moines, IA, area, check out Debra Heights
Wesleyan Church!
communication are given in US dollars.
If you're in the Des Moines, IA, area, check out Debra Heights
Wesleyan Church!
Reply all
Reply to author
Forward
0 new messages