“Stat box”
-
Okay, so I write for this music blog (http://soundsofthecar.com) and I do a column called “the plug” (where I plug relatively unherad of bands)… Anyway, I want to start inlcuding a little stat/fact box kinda thing, so I can just have a little info about them… basically, all I’d probably need is some kind of greyish table…
What’s the best way to achieve this effect?
-
Use an HTML table. You can find quite a number of free table generators by googling “HTML table generator.” You answer a few questions (cell padding, cell spacing, alignment, number of rows and columns, background color, etc.) and then click generate and it will make the code for you. You then paste it into the HTML tab in the post editor where you want the table.
-
Oh yeah, you can actually add your cell contents from within the visual editor by clicking in the cell and typing.
The other way, if you are on Windows, is to get Windows Live Writer (free download) which has table creation functions built into it. You can even compose the entire post in it and then publish right from WLW to the blog.
-
Oh, cheers, I thought that might be the way, but I wasn’t sure if there was a better option…
Is there a way to make the background semi transparent? I have my code as “<table style=”background-color: transparent;” border=”0″ cellspacing=”0″ cellpadding=”0″ width=”260″ align=”right” bordercolor=”#ffffff”>”
But I want it semi transparent… -
Oh, and, Is there a way to make it have solid colour lines (for the border, and cell dividers , rather than the ugly two colour lines? like this, if you don’t know what I mean
-
Levels of opacity are a little harder to do since you not only have to put in the code for the “normal” browsers, but you also have to put in special code for Internet Explorer since it doesn’t understand the normal “opacity” attribute.
-
Do you need the code for the whole post, or just the table? I presume just the table, so… The table part is still a draft… (I’m experimenting atm, hence the no cells thing… it’s quite a think blog scheme, and when I had it as two columns, it was a bit too wide…
<table style="background-color: transparent;" border="1" cellspacing="0" width="200" align="right"><caption><em><strong><span style="text-decoration: underline;">QUICK STATS AND FACTS</span></strong></em></caption> <tbody> <tr><td>Country of Origin Sweden Genre Post-Rock/Post-Metal/Ambient/Screamo Vocals Sung(English)/Dialogue(Swedish)/Screaming (English) No. of Releases 1x EP 1x Album No. of last.fm listeners 8,011 Label Unsigned Sounds like Sigur ros, Breach, Cult of luna, Mono, Mogwai (at the same time)</td></tr> </tbody> </table> -
If I could edit I would… anyway, here is the post with the table.. Ideally, it’d look something like the images… http://soundsofthecar.com/?p=1442
Code: `<table style=”background-color: transparent;” border=”1″ cellspacing=”0″ width=”200″ align=”right”><caption><span style=”text-decoration: underline;”>QUICK STATS AND FACTS</span></caption>
<tbody>
<tr>
<td>Country of Origin:
Sweden
Genre:
Post-Rock/Post-Metal/Ambient/Screamo
Vocals:
Sung(English)/Dialogue(Swedish)/Screaming (English)
No. of Releases:
1x EP 1x Album
No. of Last.fm listeners:
8,011
Label:
Unsigned
Sounds like…
Sigur ros, Breach, Cult of luna, Mono, Mogwai (at the same time).</td>
</tr>
</tbody>
</table>`
Is there a way to have some kind of padding on the outside of the table, so the words don’t “hit” it? -
gah, didn’t post in the code box for some reason… last try…
<table style="background-color: transparent" border="1" cellspacing="0" width="200" align="right"><caption><em><strong><span style="text-decoration: underline">QUICK STATS AND FACTS</span></strong></em></caption> <tbody> <tr> <td><strong>Country of Origin</strong>: Sweden <strong>Genre</strong>: Post-Rock/Post-Metal/Ambient/Screamo <strong>Vocals:</strong> Sung(English)/Dialogue(Swedish)/Screaming (English) <strong>No. of Releases:</strong> 1x EP 1x Album <strong>No. of Last.fm listeners</strong>: 8,011 <strong>Label:</strong> Unsigned <strong>Sounds like...</strong> Sigur ros, Breach, Cult of luna, Mono, Mogwai (at the same time).</td> </tr> </tbody> </table>Apologies for the triple post…
-
http://soundsofthecar.com/ is a self-hosted install of wordpress.ORG software and you need to inquire for that blog over at http://wordpress.ORG/support/ as that is where the self-hosted version of wordpress is supported. That said, this should get you on your way however do note that the “opacity/transparency” part I added will also apply to the text inside the table. To have it NOT apply to the text is quite a bit more complex. I also changed the border declaration as you will see to inline CSS (in the style declaration) so that you have more control over it.
<table cellspacing="0" align="right" width="200" style="background-color: #FFFFFF; opacity:0.5;filter:alpha(opacity=50); border:2px solid #444444;"> -
The space around around the text in the cells is called “cellpadding”. Add this to the style declaration in the “table” tag
padding:10px;You can adjust the padding as you see fit.
-
Ah okay. Sorry to waste your time. I knew the two were different, I just didn’t realise how different.
(for the record, that code didn’t seem to work… thanks anyway, as it probably works on a .com blog…)
-
I used Firebug on Firefox directly on your blog and it worked just fine for me.
There are some good tutorials and great information over at W3C schools. The HTML and the inline CSS would be the same for .COM and .ORG blogs, unless I made a mistake copying it over or something.
- The topic ‘“Stat box”’ is closed to new replies.
WordPress.com Forums 