Wordpress Themes - WP Forum at BFA - [SOLVED] Cannot change table in widget generated by Javascript

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)

- Sidebars & Widgets (http://forum.bytesforall.com/forumdisplay.php?f=14)

- - [SOLVED] Cannot change table in widget generated by Javascript (http://forum.bytesforall.com/showthread.php?t=17173)

webgurl

Mar 31, 2012 01:57 PM

[SOLVED] Cannot change table in widget generated by Javascript

I created a widget area(#text-23 .textwidget) and placed it on a page. I added a text wigdet to the text widget area, and placed some code in it from a third party vendor. It uses Javascript to display up to the minute gas prices. My problem is that the cells of the table that is generated are all on top of one another, making it impossible to read. I used firefox to look at the generated code, and the table layout parameters show cellspacing and padding to be 0, but since it is generated within the Javascript, I am not able to change them.
I've tried CSS inserts to affect the #text-23 .textwidget selector, but to no avail. Can this be done? I am using Atahualpa 3.6.4. and the site url is ezw123.com/cheap-gas. Thanks for any help you can give me.

juggledad

Mar 31, 2012 03:17 PM

ezw123.com/cheap-gas gets a 'Not Found'

webgurl

Mar 31, 2012 03:19 PM

I apologize - wrong site... it's greenvilleconcerts.com/cheap-gas :o

juggledad

Mar 31, 2012 04:00 PM

Have you looked at the table using FireBug?
specifically at the table cell?
If so, did you look at ALL the CSS being applied?

webgurl

Mar 31, 2012 04:43 PM

Yes. In the html snippet that I downloaded from a gas pricing site,

HTML Code:

<table width="100%">

<tr>

<td align="center" style="font-family:Arial; font-weight:bold; font-size:16px;">Lowest Gas Prices in<span id="tenlowest_title">&nbsp;Greenville</span>

</td>

</tr>

<tr>

<td align="center" id="gasbuddy_22783">

Immediately after the above line, it runs a Javascript script that calls the feed. The feed gets dumped into this tiny little table that looks like its ready to explode. I don't visually see a place to change the attributes for the table element.

juggledad

Mar 31, 2012 07:27 PM

1 Attachment(s)

FireBug has this nifty feature, the 'inspector'
Attachment 1810
You can point at an element and see the CSS in the right hand column. Take a look at the <TD> for the first address then look at ALL the CSS that applies to it.

oh yeah, you can click on the css and change the value part of a rule.

So...now that you have inspected the CSS have you figured it out? (The answer is worth 80% of your final grade, the other 20% will be determined by your 'buttering up' the teacher :p)

(You can also add new CSS by tab past the last CSS rule - but you don't need to do this to discover what is happening in this case)

webgurl

Apr 1, 2012 10:30 AM

Quote:

Take a look at the <TD> for the first address then look at ALL the CSS that applies to it.

I was not sure what you meant by "first address" so i looked at first <TD> in the table:

HTML Code:

<td align="center" style="font-family: Arial; font-weight: bold; font-size: 16px;">

That is for header cell, and it fits nicely. If I continue down to next table description,

HTML Code:

<table id="prices" cellspacing="0" width="413" style="border: 1px dotted rgb(172, 172, 172);">

and increase the cellspacing and the width, the text inside the cells is still illegible: it's looks like text that does not have a <br> after each line. Does that mean I need to change the line height?
I guess I am failing this course...:( I seem to be overlooking the code that needs to be changed to affect cell size. Is it cellpadding?
Also, I'm using Firefox 3.6.2.7 - and I always use the "inspect code tool", but the CSS on the right - should it be STYLE, COMPUTED, or DOM when working with CSS? Thanks for your tireless patience and esteemed knowledge. (REAL butter, not an imitation) :o

webgurl

Apr 1, 2012 10:45 AM

Well, I might have it. I changed the line height from .5 to 1.5, and the text seems to fit nicely. Last question - for now ;) .....

How can I change the line height in code that I cannot see? Since the javascript is generating the code, would I be able to make the change in CSS Inserts? I've worked with that before, but usually run into problems with knowing how deep I have to make the CSS path.

Would starting the page div and working down to the table "Prices" be sufficient? I am going to give that a try now. Thank you for the fishing lesson..... ;)

webgurl

Apr 1, 2012 11:12 AM

I changed the line height in ATA options/body, text, links/ to 1.5 and that did the trick. But when i added this code to CSS inserts, it changed nothing..

Code:

div#text-23 .textwidget, table#prices {

cellspacing: 10px;

width: 600px;

border: 1px dotted rgb(172, 172, 172)

}

Can you give me a hint as to why the CSS is being ignored? Table looks much better though:

http://greenvilleconcerts.com/cheap-gas

juggledad

Apr 1, 2012 11:17 AM

If you go back and look, you will see that the 'line-height' is being set as part of the CSS for 'class' of 'body'. That class is associated with the HTM:L element '<body> and since there is no other 'line-height' rule, it cascades (the first 'c' in 'css) to all it's children (of which the <td> are) on the page

So you have several options, you can set a line hight for all TD's

HTML Code:

td {line-height: 1.5em;}

or you could go into the theme options (ato->Body, Text & Links->Body Style) and ponder on why you added a css rule to set the line height to .05em........

(I'm giving you an A- - you found what was causing it, just not where ;))

webgurl

Apr 5, 2012 09:17 AM

Quote:

Originally Posted by juggledad (Post 82883)

....or you could go into the theme options (ato->Body, Text & Links->Body Style) and ponder on why you added a css rule to set the line height to .05em........

(I'm giving you an A- - youfound what was causing it, just not where ;))

Thank you for helping me solve this. I don't know why I set the line height to .5 in ATA options/Body/Text/Links, but at least now I realize that code in that section affects everything on the pages, and posts - including tables.

All times are GMT -6. The time now is 08:18 PM.